#995
A form with the keyboard open
A scrollable account form with three TextFields (work email, company, role) and a StickyActions bar with a stretched Continue button, wrapped in the keyboardAware action.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "A form with the keyboard open" pattern (@codeatlasdev/ui demo #995, concepts/viewport) in my app.
Call get_demo({ ids: ["#995"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: A form that stays operable with the on-screen keyboard open: the page scrolls, the focused field comes into view and the action bar rides above the keyboard and the safe area.
Keep these library parts, with the props and tokens the demo uses:
- Button, StickyActions, TextField from "@codeatlasdev/ui"
- keyboardAware from "@codeatlasdev/ui/actions"
Behaviour to keep:
- `<form` with `use:keyboardAware` (from `@codeatlasdev/ui/actions`), `max-height: 24rem` and `overflow-y: auto`
- `<TextField label="Work email" type="email" bind:value={email} autocomplete="email" />`, then `Company` and `Role` fields with matching `autocomplete`
- A filler `div` of at least `8rem` so the form scrolls
- `<StickyActions align="stretch">` holds `<Button variant="filled" type="submit">` whose label becomes `Sent` after submit
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
- Button
@codeatlasdev/ui - StickyActions
@codeatlasdev/ui - TextField
@codeatlasdev/ui
How it is built
- `<form` with `use:keyboardAware` (from `@codeatlasdev/ui/actions`), `max-height: 24rem` and `overflow-y: auto`
- `<TextField label="Work email" type="email" bind:value={email} autocomplete="email" />`, then `Company` and `Role` fields with matching `autocomplete`
- A filler `div` of at least `8rem` so the form scrolls
- `<StickyActions align="stretch">` holds `<Button variant="filled" type="submit">` whose label becomes `Sent` after submit
Related
Loading source.