#062
No schema
Form built with useForm and a hand-written validate function, with Validate and Reset buttons.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "No schema" pattern (@codeatlasdev/ui demo #062, inputs/use-form) in my app.
Call get_demo({ ids: ["#062"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Small forms where validation runs on demand without a schema.
Keep these library parts, with the props and tokens the demo uses:
- Button, TextField, useForm from "@codeatlasdev/ui"
Behaviour to keep:
- `const form = useForm({ name: '', email: '' })`
- TextFields use `value={form.fields.name.value}`, `error={form.fields.name.error}`, `oninput={(v) => form.set('name', v)}`, `onblur={() => form.touch('name')}`
- Same wiring for `email` with `type="email"`
- `validate()` sets `form.fields[k].touched` and `form.fields[k].error` manually
- Buttons: Validate with `onclick={validate}`, Reset with `variant="outlined"` calling `form.reset()`
- `{#if form.dirty}` shows the hint `dirty: values changed from initial`
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
- `const form = useForm({ name: '', email: '' })`
- TextFields use `value={form.fields.name.value}`, `error={form.fields.name.error}`, `oninput={(v) => form.set('name', v)}`, `onblur={() => form.touch('name')}`
- Same wiring for `email` with `type="email"`
- `validate()` sets `form.fields[k].touched` and `form.fields[k].error` manually
- Buttons: Validate with `onclick={validate}`, Reset with `variant="outlined"` calling `form.reset()`
- `{#if form.dirty}` shows the hint `dirty: values changed from initial`
Related
Loading source.