The tag input collects multiple strings as removable chips. Tag displays read-only labels. Checkbox handles boolean consent and multi-select lists. Compose them in filter bars and settings forms.
Component roles
Component
Mode
Typical use
Tag input
Editable multi-value
Email recipients, skill tags, filter tokens
Chip
Removable pill inside tag input
Visual token with X button
Tag
Read-only label
Categories, status labels, skill badges
Checkbox
Boolean or list selection
Terms acceptance, bulk row select
All extend Core layout primitives — use Column/Row gaps consistently with other form controls.
Tag input for multi-value fields
The tag input wraps Input and manages a string array value. Users type a token and press Enter or comma to commit; Backspace on empty input removes the last chip.Keep tags in parent state as a string array. Wire id, label, placeholder, value, and onChange to the tag input field. Use an actionable placeholder like "Add a skill and press Enter".Each committed string renders as a removable chip. Keep placeholders actionable so the interaction is discoverable.
Validation
Validate on submit, not on every keystroke. Reject duplicates in your onChange handler before updating state. Cap count server-side too — the tag input does not enforce max length by itself.
Read-only Tag rows
Use Tag when values are informational, not editable. Stack tags in a Row with gap 8 and wrap enabled.
Row gap="8" wrap
Tag → Design system
Tag → Documentation
Tag → Open source
Tags inherit typography tokens — do not override with custom font sizes. For interactive filters, pair Tag with Button semantics or use toggle buttons instead.
Checkbox patterns
Single consent
Wire id, label, checked, and onChange to the checkbox. Place consent checkboxes directly above the submit Button. Disable submit until checked is true.
Select-all in tables
Use a header checkbox to toggle all visible rows. Keep indeterminate state in parent logic when some rows are selected. Pair with the tables guide for row selection layout.
Filter bar composition
A typical filter toolbar stacks:
Row with gap 12 and wrap
Tag input for free-text tokens (search facets)
SegmentedControl or dropdown for enumerated filters
Button variant ghost to clear all
Row gap="12" wrap vertical="center"
Input or tag input → keywords
Button variant="ghost" → Clear
Align label sizes with other inputs in the bar (size m default).
Write this / not this
✅ Once UI way
❌ Common mistake
string array state for tag input
Comma-separated string in one Input
Chip remove via onChange
Manually rendering unstyled spans
Tag for display-only labels
Editable contenteditable divs
Checkbox with linked id + label
Clickable div with no input semantics
Check yourself
Tag input value is a string array, not a delimited string
