Chips / Tags
Selectable chips for multi-choice inputs (SetupForm) and read-only tags for decorative labeling (HowItWorks). Both use rounded-full with border transitions.
Selectable Chips
Interactive chips from SetupForm. Click to toggle selection. Selected state uses accent background + accent-foreground border. Unselected uses border-border + muted text.
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Visible text, and the accessible name. |
| selected | boolean | — | Whether this choice is active. Drives both the styling and `aria-pressed`. |
| onClick | () => void | — | Called when the chip is activated. |
| className | string | — | Layout only — never for restyling the chip itself. |
States
Every visual state side by side. Focus-visible and aria-pressed were added when this component was extracted -- the hand-written copies had neither, so keyboard users moved through the group with no visible focus and screen readers announced no selection.
Read-only Tags
Decorative tags from the HowItWorks landing section. Non-interactive, using direct violet color classes.
VoiceMock was built by one designer
I'm Sergiy, a product designer. I built this trainer myself — research, design system, code. On LinkedIn I show how products like this come together, and what it changes in a designer's work.
Product Designer · AI Design Engineer · Designer for Startups
See it on LinkedIn