Inputs

TagInput

Chips-in-input for editing a list of short string tags. Type a value and press Enter to add it as a chip; click × or press Backspace on an empty input to remove the last one. Autocompletes from suggestions. The web counterpart of the native TagInput. Controlled via value / onChange; chips use the active accent.

Source · API

Examples

Loading examples…

API

From COMPONENTS.md.

Chips-in-input for a list of short string tags. Web counterpart of the native TagInput. Enter to add, Backspace or × to remove; autocompletes from suggestions. Chips use the active accent.

import { TagInput } from 'achery-ui'

const [tags, setTags] = useState<string[]>(['fiction', 'draft'])

<TagInput
  value={tags}
  onChange={setTags}
  suggestions={['fiction', 'fantasy', 'draft']}
  placeholder="Add a tag…"
/>

Prop	Type	Notes
`value`	`string[]`	Selected tags (controlled)
`onChange`	`(tags: string[]) => void`
`suggestions`	`string[]`	Optional autocomplete list
`normalize`	`(raw: string) => string`	Default: lowercase + trim + collapse whitespace
`placeholder`	`string`	Shown when empty
`disabled`	`boolean`