#042
Placeholder
Select with no initial value that shows placeholder text until a country is chosen.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Placeholder" pattern (@codeatlasdev/ui demo #042, inputs/select) in my app.
Call get_demo({ ids: ["#042"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Required choice in a form where no default should be preselected.
Keep these library parts, with the props and tokens the demo uses:
- Select from "@codeatlasdev/ui"
Behaviour to keep:
- `<Select label="Country" placeholder="Choose a country…"` with `options={countries}`
- `countries` has 5 options: Brazil, United States, Germany, Japan, Australia
- `bind:value={country}` with initial `$state('')`
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
- `<Select label="Country" placeholder="Choose a country…"` with `options={countries}`
- `countries` has 5 options: Brazil, United States, Germany, Japan, Australia
- `bind:value={country}` with initial `$state('')`
Related
Loading source.