TagsInput

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

SourcePackage @weft-js/warp

Preview

tsx

import { state } from '@weft-js/core'import { Stack, TagsInput, Text } from '@weft-js/warp'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 @weft-js/warp

Usage

tsx

import { TagsInput } from '@weft-js/warp'

With validation

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

tsx

import { state } from '@weft-js/core'import { TagsInput } from '@weft-js/warp'export function Emails() {  const emails = state(['dara@weft.dev', 'kai@weft'])  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@weft 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