# Form section (goodtabs UI)

A settings form layout: title on the left, fields in a bordered surface, a save bar below.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/form-section.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/form-section`

## Usage

```tsx
import { FormSection, FormSectionFooter, FormSectionRow } from "@/components/form-section"
import { Input } from "@/components/ui/input"

<form action={save}>
  <FormSection title="Profile" description="How you appear to others." footer={<FormSectionFooter />}>
    <FormSectionRow label="Name" htmlFor="name">
      <Input id="name" name="name" />
    </FormSectionRow>
  </FormSection>
</form>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| title | `ReactNode` |  | Section title, shown in the left column from md up. |
| description | `ReactNode` |  | One or two sentences under the title. |
| children | `ReactNode` |  | FormSectionRow elements. Hairlines are drawn between them. |
| footer | `ReactNode` |  | A FormSectionFooter, or your own bar, under the rows. |
| label | `ReactNode` |  | On FormSectionRow: the field label. |
| htmlFor | `string` |  | On FormSectionRow: id of the control, so the label focuses it. |
| cancelLabel, saveLabel | `string` | `"Cancel", "Save"` | On FormSectionFooter: the two button labels. Pass children to replace both. |

## When to use

- Settings and profile pages with a few fields per topic
- Any form where each field needs a label and a line of help beside it
- Several topics on one page, stacked with one save bar at the end

## When not to use

- Sign in, sign up and other short single column forms
- Long wizards or forms with conditional steps
- Tables of editable rows, which want a data table

## Notes for agents

- Server component with no state; wrap sections in your own form and the footer's save button submits it
- The cancel button is type reset, so it clears uncontrolled fields; pass children to the footer for your own buttons
- Give every control an id and pass it as htmlFor so the row label focuses it
- The title column collapses above the surface below md; rows stack their label and control below sm

Docs: https://ui.goodtabs.co/components/form-section