#022
Role filter
A FilterGroup of three role options bound to a value that is printed below.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Role filter" pattern (@codeatlasdev/ui demo #022, inputs/filter-group) in my app.
Call get_demo({ ids: ["#022"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Filtering a list or table by one category, such as user role, with a short set of choices.
Keep these library parts, with the props and tokens the demo uses:
- FilterGroup from "@codeatlasdev/ui"
Behaviour to keep:
- `<FilterGroup label="Role" options={roles} bind:value={role} />`
- `const roles` has 3 options with `value` and `label`: `admin`, `editor`, `viewer`
- `let role = $state('all')` starts at `all`, which is not one of the options
- `<p>Selected: {role}</p>` prints the current value
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
- FilterGroup
@codeatlasdev/ui
How it is built
- `<FilterGroup label="Role" options={roles} bind:value={role} />`
- `const roles` has 3 options with `value` and `label`: `admin`, `editor`, `viewer`
- `let role = $state('all')` starts at `all`, which is not one of the options
- `<p>Selected: {role}</p>` prints the current value
Related
Loading source.