#389
Hidden label
Two inline TextFields whose label is kept for screen readers only with hideLabel, plus native maxlength and a bound ref.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Hidden label" pattern (@codeatlasdev/ui demo #389, inputs/text-field) in my app.
Call get_demo({ ids: ["#389"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Inline editing in lists and toolbars where the label is implied visually but each input still needs an accessible name.
Keep these library parts, with the props and tokens the demo uses:
- Button, TextField from "@codeatlasdev/ui"
Behaviour to keep:
- `label="Task name"` with `hideLabel`: the label stays for screen readers and is not shown
- `maxlength={40}` and `autocomplete="off"` reach the native input
- `bind:ref` gives the `HTMLInputElement`; a text `Button` calls `first?.focus()`
- Column wrapper has `max-width: 400px`
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
How it is built
- `label="Task name"` with `hideLabel`: the label stays for screen readers and is not shown
- `maxlength={40}` and `autocomplete="off"` reach the native input
- `bind:ref` gives the `HTMLInputElement`; a text `Button` calls `first?.focus()`
- Column wrapper has `max-width: 400px`
Related
Loading source.