#011
States
Three Combobox states: with description and custom search and empty texts, with error and required, and disabled.
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 #011, inputs/combobox) in my app.
Call get_demo({ ids: ["#011"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Documenting validation, helper text and unavailable states of a searchable select in a form.
Keep these library parts, with the props and tokens the demo uses:
- Combobox from "@codeatlasdev/ui"
Behaviour to keep:
- `frameworks` has 4 options, the last is `{ value: 'astro', label: 'Astro', disabled: true }`
- First field: `bind:value`, `description="Astro is disabled."`, `searchPlaceholder="Filter frameworks…"`, `emptyText="No framework matches."`
- Second field: `error="Pick a framework."` and `required`
- Third field: `disabled` with `placeholder="Unavailable"`
- Wrapper `.col` has `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
- Combobox
@codeatlasdev/ui
How it is built
- `frameworks` has 4 options, the last is `{ value: 'astro', label: 'Astro', disabled: true }`
- First field: `bind:value`, `description="Astro is disabled."`, `searchPlaceholder="Filter frameworks…"`, `emptyText="No framework matches."`
- Second field: `error="Pick a framework."` and `required`
- Third field: `disabled` with `placeholder="Unavailable"`
- Wrapper `.col` has `max-width: 320px`
Related
Loading source.