Tag input

Updated October 31, 2026

TagInput collects free-text values as solid ink chips, like keywords or email addresses, where a multiple Combobox only picks from its options. Enter, a comma or leaving the field adds a tag, a pasted list splits on commas, and Backspace removes the last one. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Keywords

revenuechurn

Press Enter or a comma to add.

Alert emails

ops@example.com

import "@/components/dithercharts/controls.css"
import { TagInput } from "@/components/dithercharts/tag-input"

<TagInput
  label="Keywords"
  name="keywords"
  defaultValue={["revenue", "churn"]}
  placeholder="Add a keyword"
  hint="Press Enter or a comma to add."
  onValueChange={(tags) => setKeywords(tags)}
/>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add tag-input

Props

It renders a native element, so every other attribute that element takes passes through.

TagInput props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The caption above the field, and its accessible name.
value	Type readonly string[]	Default –	The tags, for a controlled field; pair it with `onValueChange`.
defaultValue	Type readonly string[]	Default –	The tags at first, for an uncontrolled field.
onValueChange	Type (value: string[]) => void	Default –	Called with the tags after one is added or removed.
placeholder	Type string	Default –	Shown while there are no tags.
name	Type string	Default –	The form field name; a hidden input carries each tag.
disabled	Type boolean	Default `false`
className	Type string	Default –
hint	Type ReactNode	Default –	Help text under the field, read after its label.
error	Type ReactNode	Default –	An error under the field; it also marks the field invalid.