FormLayout, FormSection and FormActions
Frame every form the same way: a card, titled sections and one button row.
Example
Installation
bunx --bun shadcn@latest add @fieldkit/form-layoutNeeds the @fieldkit registry. Add it once
Usage
Terminal
import { FormActions, FormLayout, FormSection,} from "@/components/form/form-layout"
<FormLayout title="New member" width="md"> <Form schema={schema} defaultValues={defaults} onSubmit={save}> <FieldGroup> <FormSection title="Profile"> <FormText name="firstName" /> <FormEmail name="email" /> </FormSection> <FormSection title="Access"> <FormSelect name="role" options={roles} /> </FormSection> <FormActions> <FormSubmit>Create member</FormSubmit> </FormActions> </FieldGroup> </Form></FormLayout>
// Without the card<FormLayout title="New member" card={false}>...</FormLayout>API reference
FormLayout
PropDescription
titleReact.ReactNodeHeading above the fields.descriptionReact.ReactNodeOne line under the title.width"sm" | "md" | "lg" = formConfig.widths.pageMaximum width: 28rem, 42rem or 56rem.cardboolean = formConfig.layout === "card"Set false for a plain column with the same width.FormSection
PropDescription
title (required)React.ReactNodeNames the group of fields.descriptionReact.ReactNodeOne line under the title.FormActions
PropDescription
children (required)React.ReactNodeButtons. Put the submit button last.Notes
- Set display, layout, width and checks for every form in lib/form-config.ts.
- Sections put their title beside the fields once they are 48rem wide.
- Actions stack on small screens with the last button on top.
- Inside a dialog, sheet or expandable screen the actions lose their top border.