Tag Input

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"
import { TagInput } from "@hel/ui/tag-input"

When to use it#

Use a tag input when people build a list of short pieces of text themselves: keywords, labels, email recipients. They type, press Enter or a comma, and the text becomes a tag. Backspace in the empty input removes the last tag, and every tag has a remove button.

If the choices come only from a fixed list, a Combobox with chips is the stricter option. A tag input lets people add any text, and treats the suggestions as help.

Import#

Copyimport { TagInput } from "@hel/ui/tag-input"

Usage#

TagInput is one component with options. Put it inside a Field to give it a label, or give it an aria-label.

Copy<TagInput aria-label="Keywords" defaultValue={["invoices"]} placeholder="Add a keyword" />

The value is an array of strings. Use value and onValueChange to control it, or defaultValue to let the component keep the list. onValueChange always gets the full list after a tag is added or removed.

Pasting text with separators in it adds a tag for each part.

Examples#

Suggestions#

suggestions shows a list to pick from while the person types. They can still add any other text. By default, the same tag cannot be added twice, and the check ignores case.

import * as React from "react"

import { Stack } from "@hel/ui/stack"

Limits and separators#

max stops more tags from being added. separators chooses which characters end a tag. Enter always does, and the default separator is a comma.

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"
import { Stack } from "@hel/ui/stack"
import { TagInput } from "@hel/ui/tag-input"

Validating tags#

Return false from validate for text that must not become a tag. The text is not added, and onReject is called with the text and the reason: "duplicate", "invalid" or "max". Use it to show a message, and set invalid to show the error ring.

import * as React from "react"

import { Field, FieldHelperText, FieldLabel } from "@hel/ui/field"

In a form#

Give the field a name and each tag is sent as its own value of that name. By default, text left in the input when it loses focus is added as a tag. Set addOnBlur={false} to turn that off.

States#

disabled and readOnly lock the list so tags cannot be added or removed. invalid shows the error ring, and an invalid Field does the same. required marks the input as needed.

Props#