#982
Text addons
Five TextFields with text addons inside the border: a URL (https:// and .com), a price ($ and USD), a small @handle, an error with a .dev suffix and a disabled one.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Text addons" pattern (@codeatlasdev/ui demo #982, inputs/text-field) in my app.
Call get_demo({ ids: ["#982"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Fields whose value needs fixed context: a URL scheme, a currency, a handle, a unit or a domain suffix.
Keep these library parts, with the props and tokens the demo uses:
- TextField from "@codeatlasdev/ui"
Behaviour to keep:
- `label="Website" prefix="https://" suffix=".com"` with a description
- `label="Price" prefix="$" suffix="USD"` with `inputmode="decimal"`
- `label="Handle" prefix="@" size="sm"`
- `label="Domain" suffix=".dev" error="Already taken"`
- `label="Disabled" prefix="https://" disabled`
- The fields are stacked in a column, `max-width: 24rem`, `gap: var(--ca-space-4)`
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
- TextField
@codeatlasdev/ui
How it is built
- `label="Website" prefix="https://" suffix=".com"` with a description
- `label="Price" prefix="$" suffix="USD"` with `inputmode="decimal"`
- `label="Handle" prefix="@" size="sm"`
- `label="Domain" suffix=".dev" error="Already taken"`
- `label="Disabled" prefix="https://" disabled`
- The fields are stacked in a column, `max-width: 24rem`, `gap: var(--ca-space-4)`
Related
Loading source.