---
language: "en"
title: "Components"
canonical: "https://uniaria.tenphi.me/components/"
source: "docs/components/index.mdx"
index: true
---

# Components

Each component is one definition in `@uniaria/core/<name>`, rendered in React
with `useBehavior` and registered as a custom element by
`@uniaria/elements/<name>`. Every page has a live demo running the custom
element, the React and HTML usage, and the full reference. TextInput is the
exception: a bare text input for building your own components, with no element
or page of its own (see
[Build on the controls](/guide/custom-components/#build-on-the-controls)).

## Buttons

| Component                                  | What it does                                    | Pattern                                                             | Element               |
| ------------------------------------------ | ----------------------------------------------- | ------------------------------------------------------------------- | --------------------- |
| [Button](/components/button/)              | Runs an action, or follows a link in link mode. | [Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/)          | `<uni-button>`        |
| [ToggleButton](/components/toggle-button/) | A button that stays on or off.                  | [Button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) (toggle) | `<uni-toggle-button>` |

## Forms

| Component                                    | What it does                                             | Pattern                                                                                     | Element                            |
| -------------------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------- |
| [Form](/components/form/)                    | Holds, checks, submits and resets its fields' values.    | None: a native `<form>`                                                                     | `<uni-form>`                       |
| [Field](/components/field/)                  | Label, description and error for any control.            | [Names and descriptions](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/) | `<uni-field>`                      |
| [TextField](/components/text-field/)         | A text input or text area with its field.                | None needed: a native `<input>` or `<textarea>`                                             | `<uni-text-field>`                 |
| [NumberField](/components/number-field/)     | A locale-aware number input with stepper buttons.        | [Spinbutton](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/)                          | `<uni-number-field>`               |
| [Checkbox](/components/checkbox/)            | A checkbox, with an indeterminate state.                 | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)                              | `<uni-checkbox>`                   |
| [CheckboxGroup](/components/checkbox-group/) | A labelled group of checkboxes with one array value.     | [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)                              | `<uni-checkbox-group>`             |
| [Switch](/components/switch/)                | An on/off switch.                                        | [Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)                                  | `<uni-switch>`                     |
| [RadioGroup](/components/radio-group/)       | Radios where one is selected, with arrow-key navigation. | [Radio group](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)                              | `<uni-radio-group>`, `<uni-radio>` |

## Overlays

| Component                       | What it does                                                             | Pattern                                                                                                                                         | Element         |
| ------------------------------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- | --------------- |
| [Dialog](/components/dialog/)   | A modal `<dialog>` or alert dialog, with focus management and dismissal. | [Dialog (modal)](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/), [Alert dialog](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/) | `<uni-dialog>`  |
| [Popover](/components/popover/) | A positioned panel opened from a trigger, in the top layer.              | [Disclosure](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) trigger, dialog content                                                      | `<uni-popover>` |
| [Tooltip](/components/tooltip/) | A short description shown on hover and keyboard focus.                   | [Tooltip](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/)                                                                                    | `<uni-tooltip>` |

## Collections

| Component                                 | What it does                                                             | Pattern                                                                                                  | Element              |
| ----------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------- | -------------------- |
| [Listbox](/components/listbox/)           | A list of options, single or multiple selection, optionally virtualized. | [Listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)                                             | `<uni-listbox>`      |
| [Select](/components/select/)             | A button that opens a listbox to pick a value.                           | [Select-only combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/) | `<uni-select>`       |
| [Autocomplete](/components/autocomplete/) | A text input that filters a list shown under it.                         | [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) with list autocomplete, always expanded   | `<uni-autocomplete>` |
| [Combobox](/components/combobox/)         | A text input that filters a listbox of suggestions.                      | [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) with list autocomplete                    | `<uni-combobox>`     |

## Shared behavior

* [Styling](/guide/styling/): the parts and state attributes every
  component writes.
* [State](/guide/state/): controlled values, events and selectors.
* [Composition](/guide/composition/): groups, radios and tooltips.
* [Forms](/guide/forms/), [Overlays](/guide/overlays/) and
  [Collections](/guide/collections/): what the components in each family
  share.