Tag inputs render tags inside an input, followed by an actual text input. By default, tags are added when text is typed in the input field and the Enter or Comma key is pressed. Throughout the interaction, DOM focus remains on the input element.
API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.
string | number
string
boolean
string | number
string
boolean
boolean
Whether to add a tag when you paste values into the tag input
boolean
Whether a tag can be edited after creation. If `true` and focus is on a tag, pressing `Enter`or double clicking will edit the tag.
boolean
Whether to allow tags to exceed max. In this case, we'll attach `data-invalid` to the root
boolean
Whether the input should be auto-focused
'clear' | 'add'
The behavior of the tags input when the input is blurred - `"add"`: add the input value as a new tag - `"none"`: do nothing - `"clear"`: clear the input value
string[]
string
The character that serves has: - event key to trigger the addition of a new tag - character used to split tags when pasting into the input
'ltr' | 'rtl'
The document's text/writing direction.
boolean
Whether the tags input should be disabled
string
The associate form of the underlying input element.
() => ShadowRoot | Node | Document
A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
string
The unique identifier of the machine.
Partial<{ root: string input: string clearBtn: string label: string control: string tag(opts: TagProps): string tagDeleteTrigger(opts: TagProps): string tagInput(opts: TagProps): string }>
The ids of the elements in the tags input. Useful for composition.
string
The tag input's value
boolean
Whether the tags input is invalid
number
The max number of tags
number
The max length of the input.
string
The name attribute for the input. Useful for form submissions
(event: FocusOutsideEvent) => void
Function called when the focus is moved outside the combobox
(details: HighlightChangeDetails) => void
Callback fired when a tag is highlighted by pointer or keyboard navigation
(event: InteractOutsideEvent) => void
Function called when an interaction happens outside the combobox
(event: PointerDownOutsideEvent) => void
Function called when the pointer is pressed down outside the combobox
(details: ValueChangeDetails) => void
Callback fired when the tag values is updated
(details: ValidityChangeDetails) => void
Callback fired when the max tag count is reached or the `validateTag` function returns `false`
boolean
Whether the tags input should be read-only
IntlTranslations
Specifies the localized strings that identifies the accessibility elements and their states
(details: ValidateArgs) => boolean
Returns a boolean that determines whether a tag can be added. Useful for preventing duplicates or invalid tag values.
string[]
The tag values
(value: string) => void
Function to add a tag to the tags.
() => void
Function to clear the value of the tags entry input.
Dict<any>
(id?: string | undefined) => void
Function to clear the value of the tags.
Dict<any>
number
The number of the tags.
() => void
Function to focus the tags entry input.
(options: TagProps) => Dict<any>
(options: TagProps) => Dict<any>
(options: TagProps) => Dict<any>
(props: TagProps) => TagState
Returns the state of a tag
Dict<any>
Dict<any>
string
The value of the tags entry input.
boolean
Whether the tags have reached the max limit.
boolean
Whether the tags are empty
Dict<any>
Dict<any>
(value: string) => void
Function to set the value of the tags entry input.
(value: string[]) => void
Function to set the value of the tags.
(index: number, value: string) => void
Function to set the value of a tag at the given index.
string[]
The value of the tags as an array of strings.
string
The value of the tags as a string.
string | number
string
boolean