'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
ComboBox and TagField
Type to filter and pick one option, or several as removable tags.
Ant Design: AutoComplete, Select showSearch, Select mode="tags"
import { ComboBox, TagField } from '@alea/ui';
Examples
ComboBox
defaultItems filters as people type.
Free text
allowsCustomValue keeps whatever people type.
Or type your own
TagField
Several picks as tags; Backspace removes the last one.
2 of 5
Props
ComboBox props
Type to filter a list and pick one (Ant's AutoComplete / Select showSearch). Pass defaultItems to filter as people type, or items to filter yourself (async search). allowsCustomValue keeps free text.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | ((item: T) => ReactNode) | - | Option rendering for custom items; plain {id, label} items render as options. |
description | ReactNode | - | Help text under the field. |
emptyText | ReactNode | 'No matches' | Shown when nothing matches. Default "No matches". |
errorMessage | ReactNode | ((v: ValidationResult) => ReactNode) | - | Error text, shown when invalid. |
label | ReactNode | - | The visible label. |
placeholder | string | - | Shown while the field is empty. |
size | "sm" | "md" | "lg" | 'md' | sm 32 px, md 44 px (default), lg 48 px. |
TagField props
Pick several options by typing; picks show as removable tags (Ant's Select mode="tags").
| Prop | Type | Default | Description |
|---|---|---|---|
itemsrequired | SelectOption[] | - | The options to pick from. |
allowsCustomValue | boolean | - | Lets people add values that are not in the list (Enter). |
className | string | - | Extra class names for the root element. |
defaultValue | Key[] | - | The tags to start with. |
description | ReactNode | - | Help text shown under the field. |
isDisabled | boolean | - | Disables every part of it. |
label | ReactNode | - | The visible label. |
max | number | - | Most picks allowed. |
onChange | ((value: Key[]) => void) | - | Called with the tags. |
placeholder | string | 'Type to add…' | Shown while there is no value. |
style | CSSProperties | - | Inline styles for the root element. |
value | Key[] | - | Picked ids (controlled). |
Accessibility
- A combobox with a listbox; the highlighted option is announced while focus stays in the field.
- Picked tags have remove buttons named after the tag.
Keyboard
| Key | Does |
|---|---|
| Typing | Filters |
| Arrow Down / Up | Moves through suggestions |
| Enter | Picks (or adds custom text in TagField) |
| Escape | Closes the list |
| Backspace (empty) | Removes the last tag |
Do and don't
Do
- Use defaultItems to filter as people type, items to filter yourself (server search).
Don't
- Don't use for fewer than eight options: use Select.