# Tags Input
Allows input of multiple values.
```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Label
{(tagsInput) =>
tagsInput.value.map((value, index) => (
{value}
))
}
Clear All
);
}
```
> TIP: Double tap each tag to quickly and easily edit in place.
## Custom Icon
Implement any icon of your choosing for the remove action.
```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
import { CircleXIcon } from 'lucide-react';
export default function Default() {
return (
{(tagsInput) =>
tagsInput.value.map((value, index) => (
{value}
))
}
);
}
```
## Color
Change the tag color using utility classes or custom CSS variables to match your design system.
```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
{(tagsInput) =>
tagsInput.value.map((value, index) => (
{value}
))
}
);
}
```
## Provider Pattern
Use the [Provider Pattern](/docs/\[framework]/get-started/fundamentals#provider-pattern) to gain access to the inner component APIs.
```tsx
import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-react';
export default function Default() {
const tagsInput = useTagsInput({
defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
});
return (
);
}
```
## Direction
Set the text direction (`ltr` or `rtl`) using the `dir` prop.
```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
Label
{(tagsInput) =>
tagsInput.value.map((value, index) => (
{value}
))
}
);
}
```
## Anatomy
Here's an overview of how the TagsInput component is structured in code:
```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
export default function Anatomy() {
return (
);
}
```
## API Reference
### Root
| Prop | Description | Type | Default |
| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| ids | The ids of the elements in the tags input. Useful for composition. | 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 | - |
| translations | Specifies the localized strings that identifies the accessibility elements and their states | IntlTranslations \| undefined | - |
| maxLength | The max length of the input. | number \| undefined | - |
| delimiter | 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 | string \| RegExp \| undefined | "," |
| autoFocus | Whether the input should be auto-focused | boolean \| undefined | - |
| disabled | Whether the tags input should be disabled | boolean \| undefined | - |
| readOnly | Whether the tags input should be read-only | boolean \| undefined | - |
| invalid | Whether the tags input is invalid | boolean \| undefined | - |
| required | Whether the tags input is required | boolean \| undefined | - |
| editable | Whether a tag can be edited after creation, by pressing \`Enter\` or double clicking. | boolean \| undefined | true |
| inputValue | The controlled tag input's value | string \| undefined | - |
| defaultInputValue | The initial tag input value when rendered.
Use when you don't need to control the tag input value. | string \| undefined | - |
| value | The controlled tag value | string\[] \| undefined | - |
| defaultValue | The initial tag value when rendered.
Use when you don't need to control the tag value. | string\[] \| undefined | - |
| onValueChange | Callback fired when the tag values is updated | ((details: ValueChangeDetails) => void) \| undefined | - |
| onInputValueChange | Callback fired when the input value is updated | ((details: InputValueChangeDetails) => void) \| undefined | - |
| onHighlightChange | Callback fired when a tag is highlighted by pointer or keyboard navigation | ((details: HighlightChangeDetails) => void) \| undefined | - |
| onValueInvalid | Callback fired when the max tag count is reached or the \`validateTag\` function returns \`false\` | ((details: ValidityChangeDetails) => void) \| undefined | - |
| validate | Returns a boolean that determines whether a tag can be added.
Useful for preventing duplicates or invalid tag values. | ((details: ValidateArgs) => boolean) \| undefined | - |
| allowDuplicates | Whether to allow duplicate tags. | boolean \| undefined | false |
| blurBehavior | 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 | "clear" \| "add" \| undefined | - |
| addOnPaste | Whether to add a tag when you paste values into the tag input | boolean \| undefined | false |
| max | The max number of tags | number \| undefined | Infinity |
| allowOverflow | Whether to allow tags to exceed max. In this case,
we'll attach \`data-invalid\` to the root | boolean \| undefined | - |
| sanitizeValue | Function to sanitize the tag value before adding.
Useful for trimming whitespace, normalizing case, or stripping special characters. | ((value: string) => string) \| undefined | (value) => value.trim() |
| name | The name attribute for the input. Useful for form submissions | string \| undefined | - |
| form | The associate form of the underlying input element. | string \| undefined | - |
| placeholder | The placeholder text for the input | string \| undefined | - |
| dir | The document's text/writing direction. | "ltr" \| "rtl" \| undefined | "ltr" |
| getRootNode | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | (() => ShadowRoot \| Node \| Document) \| undefined | - |
| onPointerDownOutside | Function called when the pointer is pressed down outside the component | ((event: PointerDownOutsideEvent) => void) \| undefined | - |
| onFocusOutside | Function called when the focus is moved outside the component | ((event: FocusOutsideEvent) => void) \| undefined | - |
| onInteractOutside | Function called when an interaction happens outside the component | ((event: InteractOutsideEvent) => void) \| undefined | - |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Provider
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| value | - | TagsInputApi\ | - |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Context
| Prop | Description | Type | Default |
| -------- | ----------- | -------------------------------------------------- | ------- |
| children | - | (tagsInput: TagsInputApi\) => ReactNode | - |
### Label
| Prop | Description | Type | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | - |
### Control
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### Item
| Prop | Description | Type | Default |
| -------- | --------------------------- | --------------------------------------------------------------- | ------- |
| index | - | string \| number | - |
| value | - | string | - |
| disabled | - | boolean \| undefined | - |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | - |
### ItemPreview
| Prop | Description | Type | Default |
| ------- | --------------------------- | -------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | - |
### ItemText
| Prop | Description | Type | Default |
| ------- | --------------------------- | --------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | - |
### ItemDeleteTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | - |
### ItemInput
| Prop | Description | Type | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | - |
### Input
| Prop | Description | Type | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | - |
### ClearTrigger
| Prop | Description | Type | Default |
| ------- | --------------------------- | ----------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | - |
### HiddenInput
| Prop | Description | Type | Default |
| ------- | --------------------------- | ---------------------------------------------------------------- | ------- |
| element | Render the element yourself | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | - |