ids | - | Partial<{ root: string; input: string; hiddenInput: string; clearBtn: string; label: string; control: string; item: (opts: ItemProps) => string; itemDeleteTrigger: (opts: ItemProps) => string; itemInput: (opts: ItemProps) => string; }> | undefined The ids of the elements in the tags input. Useful for composition. |
translations | - | IntlTranslations | undefined Specifies the localized strings that identifies the accessibility elements and their states |
maxLength | - | number | undefined The max length of the input. |
delimiter | "," | string | RegExp | undefined 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 |
autoFocus | - | boolean | undefined Whether the input should be auto-focused |
disabled | - | boolean | undefined Whether the tags input should be disabled |
readOnly | - | boolean | undefined Whether the tags input should be read-only |
invalid | - | boolean | undefined Whether the tags input is invalid |
required | - | boolean | undefined Whether the tags input is required |
editable | true | boolean | undefined Whether a tag can be edited after creation, by pressing `Enter` or double clicking. |
inputValue | - | string | undefined The controlled tag input's value |
defaultInputValue | - | string | undefined The initial tag input value when rendered.
Use when you don't need to control the tag input value. |
value | - | string[] | undefined The controlled tag value |
defaultValue | - | string[] | undefined The initial tag value when rendered.
Use when you don't need to control the tag value. |
onValueChange | - | ((details: ValueChangeDetails) => void) | undefined Callback fired when the tag values is updated |
onInputValueChange | - | ((details: InputValueChangeDetails) => void) | undefined Callback fired when the input value is updated |
onHighlightChange | - | ((details: HighlightChangeDetails) => void) | undefined Callback fired when a tag is highlighted by pointer or keyboard navigation |
onValueInvalid | - | ((details: ValidityChangeDetails) => void) | undefined Callback fired when the max tag count is reached or the `validateTag` function returns `false` |
validate | - | ((details: ValidateArgs) => boolean) | undefined Returns a boolean that determines whether a tag can be added.
Useful for preventing duplicates or invalid tag values. |
blurBehavior | - | "clear" | "add" | undefined The behavior of the tags input when the input is blurred
- `"add"`: add the input value as a new tag
- `"clear"`: clear the input value |
addOnPaste | false | boolean | undefined Whether to add a tag when you paste values into the tag input |
max | Infinity | number | undefined The max number of tags |
allowOverflow | - | boolean | undefined Whether to allow tags to exceed max. In this case,
we'll attach `data-invalid` to the root |
name | - | string | undefined The name attribute for the input. Useful for form submissions |
form | - | string | undefined The associate form of the underlying input element. |
dir | "ltr" | "ltr" | "rtl" | undefined The document's text/writing direction. |
getRootNode | - | (() => ShadowRoot | Node | Document) | undefined A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. |
onPointerDownOutside | - | ((event: PointerDownOutsideEvent) => void) | undefined Function called when the pointer is pressed down outside the component |
onFocusOutside | - | ((event: FocusOutsideEvent) => void) | undefined Function called when the focus is moved outside the component |
onInteractOutside | - | ((event: InteractOutsideEvent) => void) | undefined Function called when an interaction happens outside the component |
element | - | Snippet<[HTMLAttributes<"div">]> | undefined Render the element yourself |
