#720
Wrapping chips
Single-choice chips for a sales team size: five short options that wrap to two rows on a phone.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Wrapping chips" pattern (@codeatlasdev/ui demo #720, inputs/chip-group) in my app.
Call get_demo({ ids: ["#720"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Choosing one of a few short options (team size, plan length, frequency) where RadioGroup is too tall and SegmentedControl would overflow a 390px screen.
Keep these library parts, with the props and tokens the demo uses:
- ChipGroup from "@codeatlasdev/ui"
Behaviour to keep:
- `<ChipGroup label="Sales team size" items={sizes} bind:value={size} />`
- `sizes` has 5 items: `1` Just me, `2-5` 2 to 5, `6-20` 6 to 20, `21-50` 21 to 50, `50+` 50+
- `bind:value={size}` with initial `$state('2-5')`; the selected chip shows a check icon
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- ChipGroup
@codeatlasdev/ui
How it is built
- `<ChipGroup label="Sales team size" items={sizes} bind:value={size} />`
- `sizes` has 5 items: `1` Just me, `2-5` 2 to 5, `6-20` 6 to 20, `21-50` 21 to 50, `50+` 50+
- `bind:value={size}` with initial `$state('2-5')`; the selected chip shows a check icon
Related
Loading source.