#035
Disabled
Two radio groups: one with a single disabled item and one fully disabled group.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Disabled" pattern (@codeatlasdev/ui demo #035, inputs/radio) in my app.
Call get_demo({ ids: ["#035"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing unavailable choices in a form: one option locked, or a whole question locked.
Keep these library parts, with the props and tokens the demo uses:
- RadioGroup from "@codeatlasdev/ui"
Behaviour to keep:
- First group `items={yesNo}` with `orientation="horizontal"` and `bind:value={answer}`
- `yesNo` has Yes, No, Maybe, and Maybe carries `disabled: true`
- Second group `items={fruits}` with `value="banana"` and `disabled` on the whole group
- `fruits` has 3 items: Apple, Banana, Cherry
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
- RadioGroup
@codeatlasdev/ui
How it is built
- First group `items={yesNo}` with `orientation="horizontal"` and `bind:value={answer}`
- `yesNo` has Yes, No, Maybe, and Maybe carries `disabled: true`
- Second group `items={fruits}` with `value="banana"` and `disabled` on the whole group
- `fruits` has 3 items: Apple, Banana, Cherry
Related
Loading source.