Tag Input - HapplyUI

A tag input component with controlled/uncontrolled pattern. Add tags on Enter, remove on dismiss or Backspace.

Installation

bunx @happlyui/cli@latest add tag-input

Dependencies

Registry dependencies

These are automatically installed when you add this component.

form-field-context
use-form-field-binding
input
tag

Usage

import * as TagInput from "@/components/ui/tag-input"

<TagInput.Root defaultValue={['Berlin', 'London']} />

Examples

Default

Tag input with default tags.

Berlin

London

Paris

<TagInput.Root defaultValue={['Berlin', 'London', 'Paris']} />

Controlled

A controlled tag input with onValueChange callback.

React

TypeScript

Tags: React, TypeScript

const [tags, setTags] = React.useState(['React', 'TypeScript'])

<TagInput.Root value={tags} onValueChange={setTags} />

Max Tags

Tag input limited to a maximum number of tags.

Tag 1

<TagInput.Root defaultValue={['Tag 1']} maxTags={3} placeholder='Max 3 tags...' />

Gray Variant

Tag input with gray tag variant.

Design

Dev

<TagInput.Root defaultValue={['Design', 'Dev', 'QA']} tagVariant='gray' />

Sizes

Tag input in medium, small, and xsmall sizes.

Medium

Small

XSmall

<TagInput.Root size='medium' defaultValue={['Medium']} />
<TagInput.Root size='small' defaultValue={['Small']} />
<TagInput.Root size='xsmall' defaultValue={['XSmall']} />

With Form Field

Tag input composed with FormField for consistent label and hint.

Tags*

Press Enter to add a tag.

<FormField.Root
  label="Tags"
  required
  hint="Press Enter to add a tag."
>
  <TagInput.Root />
</FormField.Root>

API Reference

TagInput.Root

The tag input component. Forwards ref to the underlying input element.

Prop	Type	Default	Description
`value`	`string[]`	-	Tags (controlled)
`defaultValue`	`string[]`	`[]`	Tags (uncontrolled)
`onValueChange`	`(tags: string[]) => void`	-	Change callback
`size`	`'medium' \| 'small' \| 'xsmall'`	`'medium'`	Input size
`hasError`	`boolean`	`false`	Error state
`placeholder`	`string`	`'Add tags...'`	Placeholder text
`tagVariant`	`'stroke' \| 'gray'`	`'gray'`	Tag appearance
`maxTags`	`number`	-	Maximum number of tags
`allowDuplicates`	`boolean`	`false`	Allow duplicate tags
`triggerKeys`	`string[]`	`['Enter']`	Keys that trigger adding a tag
`disabled`	`boolean`	`false`	Disabled state