Tags Input

Create and manage a list of tags/chips.

hello
world
	<script lang="ts">
  import { TagsInput } from "bits-ui";
  import X from "phosphor-svelte/lib/X";
 
  let value = $state<string[]>(["hello", "world"]);
</script>
 
<div class="flex items-center justify-center">
  <TagsInput.Root
    bind:value
    class="flex flex-col gap-2"
    blurBehavior="add"
    delimiters={[",", ";", ":"]}
    validate={(value) => value.length > 1}
  >
    <div
      class="flex h-auto w-[400px] flex-col gap-4 rounded-card-sm border border-border-input bg-background p-4 text-sm placeholder:text-foreground-alt/50 focus-within:outline-none focus-within:ring-2 focus-within:ring-foreground focus-within:ring-offset-2 focus-within:ring-offset-background hover:border-dark-40 [&:has([data-invalid])]:border-destructive"
    >
      <TagsInput.List class="flex flex-wrap gap-1.5">
        {#each value as tag, index}
          <TagsInput.Tag value={tag} {index}>
            <TagsInput.TagContent
              class="flex items-center gap-1 rounded-[4px] bg-[#FCDAFE] text-[0.7rem] font-semibold leading-none text-[#2A266B] no-underline group-hover:no-underline"
            >
              <TagsInput.TagText class="py-1 pl-1.5">
                {tag}
              </TagsInput.TagText>
              <TagsInput.TagRemove
                class="flex items-center justify-center rounded-r-[4px] px-1 py-1 hover:bg-[#edc6f0]"
              >
                <X class="size-3" />
              </TagsInput.TagRemove>
            </TagsInput.TagContent>
            <TagsInput.TagEdit />
          </TagsInput.Tag>
        {/each}
      </TagsInput.List>
      <TagsInput.Input
        class="focus-override bg-transparent focus:outline-none focus:ring-0 "
        placeholder="Add a tag..."
      />
    </div>
    <TagsInput.Clear
      class="inline-flex h-input w-full items-center justify-center rounded-input bg-muted text-[15px] font-medium shadow-mini transition-all hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
    >
      Clear Tags
    </TagsInput.Clear>
  </TagsInput.Root>
</div>

API Reference

TagsInput.Root

An enhanced label component that can be used with any input.

Property Type Description
value $bindable
string[]

The value of the tags input. An array of tag values/strings.

Default: []
onValueChange
function

A callback function called when the active accordion item value changes. If the type is 'single', the argument will be a string. If type is 'multiple', the argument will be an array of strings.

Default: undefined
controlledValue
boolean

Whether or not the value is controlled or not. If true, the component will not update the value state internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

Default: false
delimiters
string[]

An array of delimiters to use to splitting the input value.

Default: [',']
pasteBehavior
enum

How text is handled when it is pasted into the input.

Default: 'add'
validate
function

A validation function to determine if the individual tag being added/edited is valid. Return true to allow the tag to be added/edited, or false to prevent it from being added/confirm edited.

Default: undefined
editable
boolean

Whether or not the individual tags are editable or not. This applies to all tags. If you wish to override a specific tag's editable state, you can use the editable prop on the TagInput.Tag component.

Default: true
name
string

If provided, a hidden input element will be rendered for each tag to submit the values with a form.

Default: undefined
required
boolean

Whether or not the hidden input element should be marked as required or not.

Default: false
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-root
''

Present on the root element.

TagsInput.List

The container for the tags.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-invalid
''

Present on the list element when the tags input is invalid.

data-tags-input-list
''

Present on the list element.

TagsInput.Tag

The container for a single tag within the tags input.

Property Type Description
value required
string

The value of the tag.

Default: undefined
index required
number

The index of the tag in the value array.

Default: undefined
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-editing
''

Present on the tag element when the tag is being edited.

data-invalid
''

Present on the tag element when the tags input is marked as invalid.

TagsInput.TagContent

The container for the tag content, which typically includes the tag text and edit/remove buttons and does not include the edit input.

Property Type Description
ref $bindable
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-tag-content
''

TagsInput.TagText

The text content of the tag.

Property Type Description
ref $bindable
HTMLSpanElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-tag-text
''

Present on the text element.

TagsInput.TagRemove

The remove button for the tag.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-tag-remove
''

Present on the remove element.

TagsInput.TagEdit

The edit button for the tag.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-tag-edit
''

Present on the edit element.

data-invalid
''

Present on the edit element when the tags input is marked as invalid.

TagsInput.Input

The input field for the tags input.

Property Type Description
blurBehavior
enum

The behavior to use when the input is blurred with text in it.

Default: 'none'
value $bindable
string

The value of the input.

Default: undefined
onValueChange
function

A callback function called when the value of the input changes.

Default: undefined
controlledValue
boolean

Whether or not the value is controlled or not. If true, the component will not update the value internally, instead it will call onValueChange when it would have otherwise, and it is up to you to update the value prop that is passed to the component.

Default: false
ref $bindable
HTMLInputElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-invalid
''

Present on the input element when the tags input is marked as invalid.

data-tags-input-input
''

Present on the input element.

TagsInput.Clear

The clear button for the tags input.

Property Type Description
ref $bindable
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to get a reference to the element.

Default: undefined
children
Snippet

The children content to render.

Default: undefined
child
Snippet

Use render delegation to render your own element. See Child Snippet docs for more information.

Default: undefined
Data Attribute Value Description
data-tags-input-clear
''

Present on the clear element.