Forms
Tag Input
A field for entering several tags, such as emails or keywords. Enter or a separator adds one; Backspace in an empty field removes the last.
ReactVueWeb Components
View in Storybook Playground
Examples
<FormField label="宛先"><TagInput defaultValue={['ada@example.com']} /></FormField>Props
| Name | Type | Default | Description |
|---|---|---|---|
value | string[] | — | Controlled list of tags. |
defaultValue | string[] | — | Initial tags when uncontrolled. @default [] |
onChange | (tags: string[]) => void | — | Called with the updated tag list. |
placeholder | string | — | Placeholder for the text field. |
delimiters | string[] | — | Keys (besides Enter) that commit the current text. @default [','] |
unique | boolean | true | Reject duplicate tags. @default true |
disabled | boolean | false | Disable adding/removing. @default false |
aria-label | string | — | Accessible label for the group/field. |
removeLabel | (tag: string) => string | Remove ${tag} | Builds the remove button label for a tag. @default `Remove ${tag}` |
id | string | — | |
className | string | — |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.