Skip to content
Pinky UI

forms

Token Field

A multi-value field turns confirmed text into removable values while the next value stays ready to type.

  • forms
  • tokens
  • multi-value
  • input
  • keyboard
Related pattern

One structured token model for tags, recipients and filters; variants remain presets.

Live preview

Design
Motion

Press Enter or comma to keep a value. Backspace removes the previous token.

Quick usage

usage
import { TokenField } from "@pinky-ui/systems";

<TokenField label="Recipients" tokens={recipients} onTokensChange={setRecipients} />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
tokensstring[]—Confirmed values rendered as individually removable tokens.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Tokens expose their own focus and remove buttons; Enter and comma confirm the current draft.
  • Backspace and arrow keys provide a complete keyboard path without requiring drag.

Performance

  • Token layout is ordinary wrapping content; there is no per-token animation loop.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • Recipients, tags, filters and other small multi-value fields

When not to use

  • Long editable lists or values that need independent metadata

Skill

Purpose

Use Token Field for small, confirmed multi-value input such as recipients, tags or filter values.

Interaction

Keep the next value in a native input. Enter or comma confirms a token; Backspace removes the previous token when the draft is empty. Existing tokens expose focus and individual remove actions.

Usage

tsx
<TokenField label="Recipients" tokens={recipients} onTokensChange={setRecipients} />

Accessibility

Provide a visible label, keyboard removal and a separate remove button for every token. Tokens must wrap on narrow screens instead of forcing horizontal scrolling.

Reduced motion

Add or remove tokens immediately. Confirmation must remain visible through text and focus, not an insertion animation.

Open this skill on its own page