Components

Overview

Tokenised text input that converts typed values into removable chips. Also known as tag input, token input, or pills input.

When to use

• Email recipients, user permissions, and keyword fields.
• Labels, categories, and skills where values should stay visible.
• Any repeated free-text values that benefit from compact pill display.

Presets

Build specialised flows on the same component:

• Chip input — generic multi-value entry.
• Tag input — labels and keywords.
• Token input — recipients, users, and permissions.

Props

Prop	Type	Default	Description
value	string[]	—	Current chips.
onChange	(value: string[]) => void	—	Chip list handler.
placeholder	string	—	Shown when empty.
variant	"filled" | "outlined" | "soft" | "glass" | "gradient"	"soft"	Chip visual style.
readOnly	boolean	false	Show chips without editing.
disabled	boolean	false	Disables interaction.
mode	"stacked" | "flagged"	"stacked"	Layout mode for label and control.
labelPosition	"left" | "right"	"left"	Label placement in flagged mode.
error	string	—	Validation message; sets aria-invalid when present.
help	string	—	Supplementary help text linked via aria-describedby.
required	boolean	false	Marks the field as required for assistive tech.

Interaction

• Press Enter, Comma, or Tab to commit the current text as a chip.
• Press Backspace on an empty input to remove the last chip.
• Click × on a chip to remove it.

Chip variants

Variant	Description
Filled	Solid chip background.
Outlined	Border-only chips.
Soft	Accent-tinted fill.
Glass	Frosted translucent chips.
Gradient	Purple/blue Opus gradient border.

States

Default, hover, focus, disabled, error, and read-only are supported on the field and chips.

Accessibility

• Wrapped in FieldShell for label, help, error, and required wiring.
• Chips expose remove buttons with descriptive aria-label values.

Related

• Text input
• Select