#064
With schema
Form using a schema for username length and bio length, with a live character count.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "With schema" pattern (@codeatlasdev/ui demo #064, inputs/use-form) in my app.
Call get_demo({ ids: ["#064"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Forms with several validation rules that run all at once.
Keep these library parts, with the props and tokens the demo uses:
- Button, TextArea, TextField, useForm from "@codeatlasdev/ui"
Behaviour to keep:
- `useForm(` with `schema: (data) => {` returns `errs`
- Username rules: `data.username.length < 3` and `data.username.length > 20`
- Bio rule: `data.bio.length > 160` with `Bio must be 160 characters or fewer.`
- Bio TextArea shows `description="{form.fields.bio.value.length}/160"`
- Buttons: `Validate all` calls `form.validate()`, Reset calls `form.reset()`
- Footer prints `valid: {form.valid}`
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
- `useForm(` with `schema: (data) => {` returns `errs`
- Username rules: `data.username.length < 3` and `data.username.length > 20`
- Bio rule: `data.bio.length > 160` with `Bio must be 160 characters or fewer.`
- Bio TextArea shows `description="{form.fields.bio.value.length}/160"`
- Buttons: `Validate all` calls `form.validate()`, Reset calls `form.reset()`
- Footer prints `valid: {form.valid}`
Related
Loading source.