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).
| Component |
What it does |
Pattern |
Element |
| Button |
Runs an action, or follows a link in link mode. |
Button |
<uni-button> |
| ToggleButton |
A button that stays on or off. |
Button (toggle) |
<uni-toggle-button> |
| Component |
What it does |
Pattern |
Element |
| Form |
Holds, checks, submits and resets its fields’ values. |
None: a native <form> |
<uni-form> |
| Field |
Label, description and error for any control. |
Names and descriptions |
<uni-field> |
| TextField |
A text input or text area with its field. |
None needed: a native <input> or <textarea> |
<uni-text-field> |
| NumberField |
A locale-aware number input with stepper buttons. |
Spinbutton |
<uni-number-field> |
| Checkbox |
A checkbox, with an indeterminate state. |
Checkbox |
<uni-checkbox> |
| CheckboxGroup |
A labelled group of checkboxes with one array value. |
Checkbox |
<uni-checkbox-group> |
| Switch |
An on/off switch. |
Switch |
<uni-switch> |
| RadioGroup |
Radios where one is selected, with arrow-key navigation. |
Radio group |
<uni-radio-group>, <uni-radio> |
| Component |
What it does |
Pattern |
Element |
| Dialog |
A modal <dialog> or alert dialog, with focus management and dismissal. |
Dialog (modal), Alert dialog |
<uni-dialog> |
| Popover |
A positioned panel opened from a trigger, in the top layer. |
Disclosure trigger, dialog content |
<uni-popover> |
| Tooltip |
A short description shown on hover and keyboard focus. |
Tooltip |
<uni-tooltip> |
| Component |
What it does |
Pattern |
Element |
| Listbox |
A list of options, single or multiple selection, optionally virtualized. |
Listbox |
<uni-listbox> |
| Select |
A button that opens a listbox to pick a value. |
Select-only combobox |
<uni-select> |
| Autocomplete |
A text input that filters a list shown under it. |
Combobox with list autocomplete, always expanded |
<uni-autocomplete> |
| Combobox |
A text input that filters a listbox of suggestions. |
Combobox with list autocomplete |
<uni-combobox> |