Forms

TagInput

A field that turns typed text into tags.

import { TagInput } from "@flinbu/seed";

With suggestions and validation

Components in this release

button
input
select

Enter or a comma adds one. Paste a list to add many.

import { Field, TagInput } from "@flinbu/seed";

const [v, setV] = React.useState(["button", "input", "select"]);

<div className="w-full max-w-md">
  <Field label="Components in this release" hint="Enter or a comma adds one. Paste a list to add many.">
    <TagInput value={v} onValueChange={setV} placeholder="Add a component" suggestions={["badge", "card", "checkbox", "combobox", "dialog", "tabs", "tooltip"]}
      validate={(t) => (/^[a-z][a-z0-9-]*$/.test(t) ? true : "Use lowercase letters, numbers and dashes.")} />
  </Field>
</div>

Use it for

Components in a release, keywords, aliases.

Props

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`string[]`	–	The tags.
`suggestions`	`string[]`	–	Offered as people type.
`validate`	`(tag) => truestring`	–	The message to show when it fails.
`max`	`number`	–	Limit.
`swatchFor`	`(tag) => stringundefined`	–	Color chips for tokens.

Accessibility

Each add and remove is announced; suggestions follow the combobox pattern; errors are linked to the field.