#060
Single and multiple
Single-select alignment group, a required text filter and a multi-select formatting group.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Single and multiple" pattern (@codeatlasdev/ui demo #060, inputs/toggle-group) in my app.
Call get_demo({ ids: ["#060"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Editor toolbars with exclusive options like alignment and combinable options like bold or italic.
Keep these library parts, with the props and tokens the demo uses:
- ToggleGroup from "@codeatlasdev/ui"
Behaviour to keep:
- Alignment: `type="single"` with `aria-label="Text alignment"` and `bind:value={align}`
- Alignment items: AlignLeft, AlignCenter, AlignRight with `'aria-label': 'Align left'` etc.
- Filter: `type="single"` with `required`, `aria-label="Filter"`, `bind:value={filter}` (starts `'all'`), items All, Open, Closed; pressing the active item keeps it
- Formatting: `type="multiple"` with `aria-label="Text formatting"` and `bind:value={format}`
- `format` is `$state<string[]>(['bold'])` with items Bold, Italic, Underline
- Values are printed as `value: {align || '–'}` and `JSON.stringify(format)`
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
- ToggleGroup
@codeatlasdev/ui
How it is built
- Alignment: `type="single"` with `aria-label="Text alignment"` and `bind:value={align}`
- Alignment items: AlignLeft, AlignCenter, AlignRight with `'aria-label': 'Align left'` etc.
- Filter: `type="single"` with `required`, `aria-label="Filter"`, `bind:value={filter}` (starts `'all'`), items All, Open, Closed; pressing the active item keeps it
- Formatting: `type="multiple"` with `aria-label="Text formatting"` and `bind:value={format}`
- `format` is `$state<string[]>(['bold'])` with items Bold, Italic, Underline
- Values are printed as `value: {align || '–'}` and `JSON.stringify(format)`
Related
Loading source.