TagsInput

Type several values into one field, each becoming a tag you can remove.

SourcePackage @kerf-js/veneer

Preview

tsx

import { state } from '@kerf-js/core'import { Stack, TagsInput, Text } from '@kerf-js/veneer'export function Labels() {  const labels = state(['production', 'eu-west'])  return (    <Stack gap="related">      <TagsInput        label="Project labels"        value={labels}      />      <Text subtle>        {labels.value.length} labels on storefront.      </Text>    </Stack>  )}

Installation

npm install @kerf-js/veneer

Usage

tsx

import { TagsInput } from '@kerf-js/veneer'

With validation

valid keeps a bad tag in the field, marked critical.

tsx

import { state } from '@kerf-js/core'import { TagsInput } from '@kerf-js/veneer'export function Emails() {  const emails = state(['dara@kerf.dev', 'kai@kerf'])  return (    <TagsInput      label="Email addresses"      hint="Press Enter or comma after each one."      value={emails}      valid={(tag) =>        /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(tag)      }      error={        emails.value.some((e) => !e.includes('.'))          ? 'kai@kerf is not a full address.'          : undefined      }    />  )}

When to use

Use it for

A free list of short values, like emails or labels

Accessibility

Enteror,: Adds what you typed
Backspace: Highlights the last tag, then removes it

API Reference

Prop	Type	Default	Description
`label`	`string`	—	Its accessible name. Fields show it; icon-only controls speak it.
`hint`	`unknown`	—	One line of help under the control.
`error`	`unknown`	—	A message that marks the field invalid and says why.
`value`	`State<string[]>`	—	The tags, as a state.
`valid`	`((tag: string) => boolean)`	—	Return false to mark a tag critical.
`autofocus`	`boolean`	`false`	Focuses the field when it mounts.

Event	Type	Default	Description
`onEdit`	`(() => void)`	—	Called when the tags change, to clear a stale error.
`onSubmit`	`(() => void)`	—	Called on Enter with nothing typed.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="tags-input"] [data-part="input"]

input

RelatedInvite dialog Tag