Form SectionNew

One group of a settings page: a title and description beside its fields.

$ pnpm dlx shadcn@latest add @dashral/form-section

Installation

$ pnpm dlx shadcn@latest add @dashral/form-section

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/form-section.json

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { Input } from "@/components/dashral/input"
3import { FormSection } from "@/components/dashral/form-section"
4
5<FormSection title="Profile" description="How you appear to your team." footer={<Button type="submit">Save</Button>}>
6  <Input label="Name" defaultValue={user.name} />
7  <Input label="Email" type="email" defaultValue={user.email} />
8</FormSection>

Using the npm package? Import from @dashral/ui/components/form-section instead, here and in the examples; the rest is the same.

Examples

Settings page

variant="card" with a Save bar per section, divided, ending in a danger zone.

Workspace

Its name and where its time comes from.

Workspace name

Time zone

Notifications

What we email you about.

Weekly summary

Every Monday at 9:00.

Failed payments

As soon as one fails.

Danger zone

Deleting the workspace removes its data for everyone. It can't be undone.

You'll be asked to type the workspace's name to confirm.

Stacked

layout="stacked" for a narrow column, with a password strength meter.

API reference

FormSection

Also takes every prop of <section>(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` What the fields are about. Required.	—
`description`	`ReactNode` What changing them does.	—
`titleAs`	`"h2" \| "h3"` The heading's level.	`"h2"`
`children`	`ReactNode` The fields. Required.	—
`footer`	`ReactNode` The section's buttons; a bar along the foot of a card.	—
`layout`	`"split" \| "stacked"` The title beside the fields from the md breakpoint, or above them.	`"split"`
`variant`	`"plain" \| "card"` The fields on the page, or in a bordered card.	`"plain"`
`divided`	`boolean` A line above, to part it from the section before.	`false`
`classNames`	`{ header, title, description, content, footer }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A <section> named by its heading (aria-labelledby), so it's a region screen readers can jump to.
It doesn't make a form: wrap the sections in one, or each in its own.