TagsInput

A component that allows users to enter multiple values as tags.

Usage

The TagsInput component is a compound component used for entering and managing a list of tags.

import { TagsInput, Button, Icon } from "@elemnts-ui/react";

<TagsInput.Root defaultValue={["React", "TypeScript"]}>
  <TagsInput.Label>Frameworks</TagsInput.Label>
  <TagsInput.Control>
    <TagsInput.Context>
      {({ value }) =>
        value.map((item, index) => (
          <TagsInput.Item key={index} index={index} value={item}>
            <TagsInput.ItemPreview>
              <TagsInput.ItemText>{item}</TagsInput.ItemText>
              <TagsInput.ItemDeleteTrigger asChild>
                <Button variant="tertiary" size="xs">
                  <Icon icon="tabler:x" width="12" height="12" />
                </Button>
              </TagsInput.ItemDeleteTrigger>
            </TagsInput.ItemPreview>
            <TagsInput.ItemInput />
          </TagsInput.Item>
        ))
      }
    </TagsInput.Context>
    <TagsInput.Input placeholder="Add tag..." />
  </TagsInput.Control>
</TagsInput.Root>;

Clearable

Use the TagsInput.ClearTrigger to allow users to remove all tags at once.

API Reference

TagsInput

The root component that manages the tags input state.

Prop	Type	Default
addOnPaste	`boolean`	`false`
allowDuplicates	`boolean`	`false`
allowOverflow	`boolean`	-
asChild	`boolean`	`false`
autoFocus	`boolean`	-
blurBehavior	`"clear" \| "add"`	-
defaultInputValue	`string`	-
defaultValue	`string[]`	-
delimiter	`string \| RegExp`	`","`
disabled	`boolean`	-
editable	`boolean`	`true`
form	`string`	-
id	`string`	-
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 }>`	-
inputValue	`string`	-
invalid	`boolean`	-
max	`number`	`Infinity`
maxLength	`number`	-
name	`string`	-
onFocusOutside	`(event: FocusOutsideEvent) => void`	-
onHighlightChange	`(details: HighlightChangeDetails) => void`	-
onInputValueChange	`(details: InputValueChangeDetails) => void`	-
onInteractOutside	`(event: InteractOutsideEvent) => void`	-
onPointerDownOutside	`(event: PointerDownOutsideEvent) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
onValueInvalid	`(details: ValidityChangeDetails) => void`	-
placeholder	`string`	-
readOnly	`boolean`	-
required	`boolean`	-
sanitizeValue	`(value: string) => string`	`(value) => value.trim()`
translations	`IntlTranslations`	-
validate	`(details: ValidateArgs) => boolean`	-
value	`string[]`	-

TagsInputLabel

The label for the tags input.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputControl

Wraps the tags and input elements.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputInput

The text input used to add tags.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputItem

Wraps an individual tag.

Prop	Type	Default
index	`string \| number`	required
value	`string`	required
asChild	`boolean`	`false`
disabled	`boolean`	-

TagsInputItemPreview

Displays an individual tag when it is not being edited.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputItemText

Displays the value of an individual tag.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputItemDeleteTrigger

Removes an individual tag.

Prop	Type	Default
asChild	`boolean`	`false`

TagsInputClearTrigger

Removes all tags.

Prop	Type	Default
asChild	`boolean`	`false`