#085
Form
A medium dialog containing an invite form with name, email and role fields and a Send invite button disabled until name and email are filled.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "Form" pattern (@codeatlasdev/ui demo #085, feedback/dialog) in my app.
Call get_demo({ ids: ["#085"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Short create or invite flows that collect a few fields without leaving the page.
Keep these library parts, with the props and tokens the demo uses:
- Dialog, Button, TextField, Select, Stack from "@codeatlasdev/ui"
Behaviour to keep:
- `<Dialog bind:open title="Invite team member" size="md">`
- Fields stacked in `<Stack gap="3.5">`: two `<TextField` (Full name, Email with `type="email"`) using `bind:value={name}` and `bind:value={email}`
- `<Select label="Role" bind:value={role} options={roleOpts}` with three options: Admin, Editor, Viewer
- `let role = $state('viewer')` is the default role
- `{#snippet actions()}`: ghost Cancel and filled Send invite with `disabled={!name || !email}`
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
- Dialog
@codeatlasdev/ui - Button
@codeatlasdev/ui - TextField
@codeatlasdev/ui - Select
@codeatlasdev/ui - Stack
@codeatlasdev/ui
How it is built
- `<Dialog bind:open title="Invite team member" size="md">`
- Fields stacked in `<Stack gap="3.5">`: two `<TextField` (Full name, Email with `type="email"`) using `bind:value={name}` and `bind:value={email}`
- `<Select label="Role" bind:value={role} options={roleOpts}` with three options: Admin, Editor, Viewer
- `let role = $state('viewer')` is the default role
- `{#snippet actions()}`: ghost Cancel and filled Send invite with `disabled={!name || !email}`
Related
Loading source.