#400
Checkbox and radio items
A view menu with two checkbox items and a radio group for the sort order, kept open while options change, with the current state shown below.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Checkbox and radio items" pattern (@codeatlasdev/ui demo #400, navigation/menu) in my app.
Call get_demo({ ids: ["#400"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Menus that set view options: toggles (show hidden, show preview) and one choice among several (sort by).
Keep these library parts, with the props and tokens the demo uses:
- DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>View options</Button>`
- Two `<DropdownMenuCheckboxItem bind:checked={showHidden}>` style items (`bind:checked={showPreview}`): Show hidden files and Show preview
- `<DropdownMenuSeparator />` then `<DropdownMenuRadioGroup bind:value={sort} aria-label="Sort by">` with a `DropdownMenuLabel` and radio items name, date, size
- `aria-live="polite"` note reports `Sorted by {sort}` and the two toggles
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
- DropdownMenu
@codeatlasdev/ui - DropdownMenuCheckboxItem
@codeatlasdev/ui - DropdownMenuLabel
@codeatlasdev/ui - DropdownMenuRadioGroup
@codeatlasdev/ui - DropdownMenuRadioItem
@codeatlasdev/ui - DropdownMenuSeparator
@codeatlasdev/ui - Button
@codeatlasdev/ui
How it is built
- `<DropdownMenu>` with `{#snippet triggerChild(props)}` rendering `<Button variant="glass" {...props}>View options</Button>`
- Two `<DropdownMenuCheckboxItem bind:checked={showHidden}>` style items (`bind:checked={showPreview}`): Show hidden files and Show preview
- `<DropdownMenuSeparator />` then `<DropdownMenuRadioGroup bind:value={sort} aria-label="Sort by">` with a `DropdownMenuLabel` and radio items name, date, size
- `aria-live="polite"` note reports `Sorted by {sort}` and the two toggles
Related
Loading source.