Theme

TagsInput

input @dryui/ui Compound

Input for managing a list of tags

formtagschipsmultiinput

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { TagsInput } from '@dryui/ui';
</script>

<TagsInput.Root>
  <TagsInput.Input>...</TagsInput.Input>
  <TagsInput.Tag>...</TagsInput.Tag>
  <TagsInput.TagDelete>...</TagsInput.TagDelete>
  <TagsInput.List>...</TagsInput.List>
</TagsInput.Root>

Import options

Root package

ts
import { TagsInput } from '@dryui/ui'

Per-component subpath

ts
import { TagsInput } from '@dryui/ui/tags-input'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

With Initial Tags

svelte typescript
svelte
<TagsInput.Root value={['svelte', 'typescript']}>
  <TagsInput.List>
    <TagsInput.Tag index={0} value="svelte">svelte<TagsInput.TagDelete index={0} value="svelte" /></TagsInput.Tag>
    <TagsInput.Tag index={1} value="typescript">typescript<TagsInput.TagDelete index={1} value="typescript" /></TagsInput.Tag>
  </TagsInput.List>
  <TagsInput.Input placeholder="Add tag..." />
</TagsInput.Root>

Interactive (Bound)

svelte typescript css
svelte
<script lang="ts">
  let tags = $state(['svelte', 'typescript', 'css']);
</script>
<TagsInput.Root bind:value={tags}>
  <TagsInput.List>
    {#each tags as tag, i (tag)}
      <TagsInput.Tag index={i} value={tag}>
        {tag}
        <TagsInput.TagDelete index={i} value={tag} />
      </TagsInput.Tag>
    {/each}
  </TagsInput.List>
  <TagsInput.Input placeholder="Add tag..." />
</TagsInput.Root>

Structure

Compound components always start with TagsInput.Root. Use this structure block to understand required wrappers before you wire state or styling.

TagsInput.Root
  TagsInput.Input
  TagsInput.Tag
  TagsInput.TagDelete
  TagsInput.List
TagsInput.Root TagsInput.InputTagsInput.TagTagsInput.TagDeleteTagsInput.List

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with TagsInput.Root, then add only the parts you need.

TagsInput.InputTagsInput.TagTagsInput.TagDeleteTagsInput.List

TagsInput.Root

Prop Type Default Required Bindable
value
string[]
[] — ✓
maxTags
number
— — —
allowDuplicates
boolean
— — —
disabled
boolean
— — —
size
smmdlg
 'md' — —
onValueChange
(value: string[]) => void
— — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

TagsInput.Input

Prop Type Default Required Bindable
placeholder
string
— — —

Forwards <input> attributes via rest props. Common examples: name, autocomplete, inputmode.

TagsInput.Tag

Prop Type Default Required Bindable
index
number
— ✓ —
value
string
— ✓ ✓
children
Snippet
— — —

Forwards <span> attributes via rest props. Common examples: id, style, aria-label.

TagsInput.TagDelete

Prop Type Default Required Bindable
index
number
— ✓ —
value
string
— — —

Forwards <button> attributes via rest props. Common examples: type, disabled, name.

TagsInput.List

Prop Type Default Required Bindable
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.