#173
Basic form
A complete user creation form with a header, two sections, bound fields and a footer with Cancel and Create user.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Basic form" pattern (@codeatlasdev/ui demo #173, layout/form-page) in my app.
Call get_demo({ ids: ["#173"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Create or edit pages that group fields into sections and keep their actions in a footer.
Keep these library parts, with the props and tokens the demo uses:
- AppForm, FormSection, TextField, Select, Switch, Button, Divider from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppForm title="New User" description="Fill in the details to create a new user.">` with `{#snippet leading()}` holding `<Button variant="ghost" size="sm" aria-label="Back">`
- `<FormSection title="Account details"` holds `<TextField label="Full name" bind:value={name}`, `<TextField label="Work email" bind:value={email}` and `<Select label="Role" bind:value={role} options={roleOptions} />`
- `roleOptions` has 3 entries: Admin, Editor, Viewer, with `let role = $state('viewer')`
- `<FormSection title="Notifications" description="Email preferences." layout="list">` holds `<Switch label="Send welcome email" bind:checked={welcome} />`, `<Divider />` and `<Switch label="Weekly digest" bind:checked={digest} />`
- `{#snippet footer()}` has Cancel with `variant="ghost"` and Create user with `disabled={saving || !name || !email}`
- `function save()` sets `saving = true` and resets it with `setTimeout(() => (saving = false), 1400)`
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
- AppForm
@codeatlasdev/ui - FormSection
@codeatlasdev/ui - TextField
@codeatlasdev/ui - Select
@codeatlasdev/ui - Switch
@codeatlasdev/ui - Button
@codeatlasdev/ui - Divider
@codeatlasdev/ui
How it is built
- `<AppForm title="New User" description="Fill in the details to create a new user.">` with `{#snippet leading()}` holding `<Button variant="ghost" size="sm" aria-label="Back">`
- `<FormSection title="Account details"` holds `<TextField label="Full name" bind:value={name}`, `<TextField label="Work email" bind:value={email}` and `<Select label="Role" bind:value={role} options={roleOptions} />`
- `roleOptions` has 3 entries: Admin, Editor, Viewer, with `let role = $state('viewer')`
- `<FormSection title="Notifications" description="Email preferences." layout="list">` holds `<Switch label="Send welcome email" bind:checked={welcome} />`, `<Divider />` and `<Switch label="Weekly digest" bind:checked={digest} />`
- `{#snippet footer()}` has Cancel with `variant="ghost"` and Create user with `disabled={saving || !name || !email}`
- `function save()` sets `saving = true` and resets it with `setTimeout(() => (saving = false), 1400)`
Related
Loading source.