#174
Without header
A compact form page with no title or description, one section and a Cancel and Save footer.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Without header" pattern (@codeatlasdev/ui demo #174, layout/form-page) in my app.
Call get_demo({ ids: ["#174"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Quick edit forms embedded in a larger page that already provides its own heading.
Keep these library parts, with the props and tokens the demo uses:
- AppForm, FormSection, TextField, Button from "@codeatlasdev/ui"
Behaviour to keep:
- `<AppForm>` is used with no title or description
- `<FormSection title="Quick update">` holds `<TextField label="Name" placeholder="Enter name…" />` and `<TextField label="Email" type="email" placeholder="[email protected]" />`
- `{#snippet footer()}` holds `<Button variant="ghost">Cancel</Button>` and `<Button variant="filled">Save</Button>`
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 - Button
@codeatlasdev/ui
How it is built
- `<AppForm>` is used with no title or description
- `<FormSection title="Quick update">` holds `<TextField label="Name" placeholder="Enter name…" />` and `<TextField label="Email" type="email" placeholder="[email protected]" />`
- `{#snippet footer()}` holds `<Button variant="ghost">Cancel</Button>` and `<Button variant="filled">Save</Button>`
Related
Loading source.