# Tags Input

Allows input of multiple values.

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Custom Icon

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';
import { CircleXIcon } from 'lucide-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger>
										<CircleXIcon className="size-4" />
									</TagsInput.ItemDeleteTrigger>
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Color

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']}>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview className="preset-filled-secondary-500">
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## Provider Pattern

Use the [Provider Pattern](/docs/get-started/fundamentals#provider-pattern) to gain access to the the inner component APIs.

```tsx
import { TagsInput, useTagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	const tagsInput = useTagsInput({
		defaultValue: ['Vanilla', 'Chocolate', 'Strawberry'],
	});

	return (
		<div className="w-full space-y-4">
			<TagsInput.Provider value={tagsInput}>
				<TagsInput.Control>
					<TagsInput.Context>
						{(tagsInput) =>
							tagsInput.value.map((value, index) => (
								<TagsInput.Item key={index} value={value} index={index}>
									<TagsInput.ItemPreview>
										<TagsInput.ItemText>{value}</TagsInput.ItemText>
										<TagsInput.ItemDeleteTrigger />
									</TagsInput.ItemPreview>
									<TagsInput.ItemInput />
								</TagsInput.Item>
							))
						}
					</TagsInput.Context>
					<TagsInput.Input placeholder="Add a flavor..." />
				</TagsInput.Control>
				<TagsInput.HiddenInput />
			</TagsInput.Provider>

			{/* Programmatic Controls */}
			<div className="card preset-outlined-surface-200-800 flex justify-center items-center py-4">
				<button className="btn preset-filled" onClick={() => tagsInput.clearValue()}>
					Clear Tags
				</button>
			</div>
		</div>
	);
}

```

## Direction

```tsx
import { TagsInput } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<TagsInput defaultValue={['Vanilla', 'Chocolate', 'Strawberry']} dir="rtl">
			<TagsInput.Label>Label</TagsInput.Label>
			<TagsInput.Control>
				<TagsInput.Context>
					{(tagsInput) =>
						tagsInput.value.map((value, index) => (
							<TagsInput.Item key={index} value={value} index={index}>
								<TagsInput.ItemPreview>
									<TagsInput.ItemText>{value}</TagsInput.ItemText>
									<TagsInput.ItemDeleteTrigger />
								</TagsInput.ItemPreview>
								<TagsInput.ItemInput />
							</TagsInput.Item>
						))
					}
				</TagsInput.Context>
				<TagsInput.Input placeholder="Add a flavor..." />
			</TagsInput.Control>
			<TagsInput.ClearTrigger>Clear All</TagsInput.ClearTrigger>
			<TagsInput.HiddenInput />
		</TagsInput>
	);
}

```

## API Reference

### TagsInputRootProps

| Property              | Default  | Type                                                                                                                                                                                                                                                       | Description                                                                                                                                         |
| --------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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:&#xA;- event key to trigger the addition of a new tag&#xA;- 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.&#xA;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.&#xA;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.&#xA;Useful for preventing duplicates or invalid tag values.                           |
| blurBehavior?         | -        | "clear" \| "add" \| undefined                                                                                                                                                                                                                              | The behavior of the tags input when the input is blurred&#xA;- \`"add"\`: add the input value as a new tag&#xA;- \`"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,&#xA;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?              | -        | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                                                                                                                                                             | Render the element yourself                                                                                                                         |

### TagsInputRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | TagsInputApi\<PropTypes>                                       | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputRootContextProps

| Property | Default | Type                                               | Description |
| -------- | ------- | -------------------------------------------------- | ----------- |
| children | -       | (tagsInput: TagsInputApi\<PropTypes>) => ReactNode | -           |

### TagsInputLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### TagsInputControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputItemProps

| Property  | Default | Type                                                            | Description                 |
| --------- | ------- | --------------------------------------------------------------- | --------------------------- |
| index     | -       | string \| number                                                | -                           |
| value     | -       | string                                                          | -                           |
| disabled? | -       | boolean \| undefined                                            | -                           |
| element?  | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TagsInputItemPreviewProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### TagsInputItemTextProps

| Property | Default | Type                                                            | Description                 |
| -------- | ------- | --------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself |

### TagsInputItemDeleteTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TagsInputItemInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### TagsInputInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |

### TagsInputClearTriggerProps

| Property | Default | Type                                                              | Description                 |
| -------- | ------- | ----------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"button">) => Element) \| undefined | Render the element yourself |

### TagsInputHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |