#043
States
Three selects showing a description, an error and a disabled state, with one disabled option.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "States" pattern (@codeatlasdev/ui demo #043, inputs/select) in my app.
Call get_demo({ ids: ["#043"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Showing helper text, validation errors and locked fields on dropdowns in a form.
Keep these library parts, with the props and tokens the demo uses:
- Select from "@codeatlasdev/ui"
Behaviour to keep:
- Plan select has `description="Enterprise is disabled."` and `bind:value={plan}`
- `plans` has Free, Pro, Enterprise, and Enterprise has `disabled: true`
- Region select has `error="Pick a region to continue."` and no bound value
- Size select has `disabled` with `bind:value={size}`
- 3 selects stacked in `.col` with `max-width: 320px`
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
- Select
@codeatlasdev/ui
How it is built
- Plan select has `description="Enterprise is disabled."` and `bind:value={plan}`
- `plans` has Free, Pro, Enterprise, and Enterprise has `disabled: true`
- Region select has `error="Pick a region to continue."` and no bound value
- Size select has `disabled` with `bind:value={size}`
- 3 selects stacked in `.col` with `max-width: 320px`
Related
Loading source.