Components

Tag Input

A field of short values (tags, emails): Enter or a comma adds one, Backspace takes the last back.

Labels

groceriesweekly

Press Enter or a comma after each.

Import

import { TagInput } from '@rinzai/zen';

API reference

<TagInput>

A field of short values (tags, emails, labels): typing one and pressing Enter or a comma adds it, pasting a list adds each, Backspace in the empty field takes the last one back. Each is removed with its ×. Values are trimmed and kept once. Past about three rows the tags scroll, under a typing line that stays in view (a max-h-* class sets the field's height).

Prop	Type	Default
`defaultValue`	`string[]`	`[]`
`onValueChange`	`((value: string[]) => void)`	`—`
`removeLabel` The × button's label, for screen readers.	`((tag: string) => string)`	(tag) => `Remove ${tag}`
`validate` Whether an entry may be added (e.g. looks like an email).	`((entry: string) => boolean)`	`—`
`value`	`string[]`	`—`