TagInput

TagInput accepts free-form tags — press Enter or , to commit, Backspace to remove the last tag. Built on Ark UI tags-input, sourced from Shark UI.

react

svelte

react

svelte

// apps/docs/src/components/examples/tags-input/default/react.tsx
import {
  TagInput,
  TagInputControl,
  TagInputInput,
  TagInputItem,
  TagInputItemPreview,
  TagInputItemText,
  TagInputItemInput,
  TagInputItemDeleteTrigger,
  TagInputContext,
} from '@cloudvoyant/helical-react';
import { X } from 'lucide-react';

export default function ReactTagInputDefault() {
  return (
    <TagInput defaultValue={['react', 'svelte']} className="max-w-sm">
      <TagInputControl>
        <TagInputContext>
          {(api) => (
            <>
              {api.value.map((value, index) => (
                <TagInputItem key={value} index={index} value={value}>
                  <TagInputItemPreview>
                    <TagInputItemText>{value}</TagInputItemText>
                    <TagInputItemDeleteTrigger>
                      <X />
                    </TagInputItemDeleteTrigger>
                  </TagInputItemPreview>
                  <TagInputItemInput />
                </TagInputItem>
              ))}
              <TagInputInput placeholder="Add tag" />
            </>
          )}
        </TagInputContext>
      </TagInputControl>
    </TagInput>
  );
}

<!-- apps/docs/src/components/examples/tags-input/default/svelte.svelte -->
<script lang="ts">
  import {
    TagInput,
    TagInputControl,
    TagInputInput,
    TagInputItem,
    TagInputItemPreview,
    TagInputItemText,
    TagInputItemInput,
    TagInputItemDeleteTrigger,
    TagInputContext,
  } from '@cloudvoyant/helical-svelte';
  import { X } from 'lucide-svelte';
</script>

<TagInput defaultValue={['react', 'svelte']} class="max-w-sm">
  <TagInputControl>
    <TagInputContext>
      {#snippet render(api)}
        {#each api().value as value, index (value)}
          <TagInputItem {index} {value}>
            <TagInputItemPreview>
              <TagInputItemText>{value}</TagInputItemText>
              <TagInputItemDeleteTrigger>
                <X />
              </TagInputItemDeleteTrigger>
            </TagInputItemPreview>
            <TagInputItemInput />
          </TagInputItem>
        {/each}
        <TagInputInput placeholder="Add tag" />
      {/snippet}
    </TagInputContext>
  </TagInputControl>
</TagInput>

API Reference

TagInput

Props

Accepts all Ark TagsInputRoot props (value, defaultValue, onValueChange, max, editable, …) plus className/class. Renders the hidden input for form submission automatically.

TagInputControl / TagInputInput / TagInputItem / TagInputItemPreview / TagInputItemText / TagInputItemInput / TagInputItemDeleteTrigger / TagInputClearTrigger

Accept all corresponding Ark props plus className/class. TagInputItem requires index and value. TagInputContext exposes the Ark render prop (api.value, api.addValue, …) to map items.

Accessibility

Ark manages the combobox-like structure, aria-controls, and the delete triggers (each TagInputItemDeleteTrigger has an aria-label). Enter/, adds, Backspace removes.

Theming

No theme extension — uses --input, --secondary, --muted-foreground.