Form Layout React component
A full settings form laid out in sections, with titles on the left and fields in cards on the right: profile with a workspace URL that follows the name, a brand color picker and a character counter, a billing contact address grid, and email and push notification choices. Changed fields get a dot, a sticky bar counts unsaved changes, and saving checks every field and jumps to the first problem.
About the Form Layout component
Form Layout is a full settings page built the way long forms read best: each group of fields gets a short title and a sentence on the left, and the fields sit in a card on the right. It covers a workspace profile, a billing contact address and notification choices.
It behaves like a real form. Changed fields get a small dot, a sticky bar counts unsaved changes with Discard and Save, and saving checks every field. If something is wrong, the bar says how many fields need attention and the first one is focused and scrolled into view.
When to use it
Use it for account, workspace, profile or billing settings, or any form long enough to need sections.
Choose the split layout for wide settings pages and the stacked layout for narrow ones or when the form sits next to a sidebar.
Installation
Add the Form Layout component to your project with the shadcn CLI. It lands in components/form-layout.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/form-layoutOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<FormLayout /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| initialValues | Partial<FormLayoutValues> | — |
| onSave | (values: FormLayoutValues) => Promise<void> | void | — |
| layout | "split" | "stacked" | "split" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- initialValuesPartial<FormLayoutValues>
- onSave(values: FormLayoutValues) => Promise<void> | void
- layout"split" | "stacked"Default: "split"
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Form Layout FAQ
- How do I save to my backend?
- Pass onSave. It receives all values. If it returns a Promise the bar shows Saving… until it resolves, and the saved values become the new baseline.
- Why does the URL change when I type the name?
- The workspace URL follows the name until you edit it yourself. After that it stays as you typed it.
- How do keyboard users save?
- Press Enter in any field or Ctrl/⌘+S anywhere in the form. Save, Discard and every control are reachable with Tab.
- Can I change the fields?
- Yes. Each section is a title, a sentence and a grid of fields. Add or remove fields in the grid and add their rules to the validate function.
- Is it accessible?
- Every input has a label, errors are linked with aria-describedby and aria-invalid, the color and push choices are radio groups, checkboxes are native inputs, and the save bar is a live status region.
