---
title: Section
description: A titled group of form rows, as on settings pages.
---

```tsx
import { Button, List, Section, Switch } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function SectionBasic() {
  return (
    <Preview block={true}>
      <Section.Root>
        <Section.Header>
          <Section.Title>Title</Section.Title>
          <Section.Meta>12</Section.Meta>
          <Section.Actions>
            <Button.Root>Action</Button.Root>
          </Section.Actions>
        </Section.Header>
        <List.Root>
          <List.Field htmlFor="section-basic-switch" label="Label">
            <Switch.Root id="section-basic-switch" />
          </List.Field>
        </List.Root>
      </Section.Root>
    </Preview>
  );
}
```

- A section heads a [List](/deft/components/list) of fields or records. Use it for forms and settings; content blocks on product pages use [Block](/deft/components/block).
- The title is a semibold `h2` at the size of a row label. The header has the same side inset as the rows, so the title lines up with the row labels and the actions line up with the controls.
- Meta follows the title, for example a count; actions go to the right.
- `Section.Description` goes last in the header and takes a line of its own under the title. It says what the section is for, in one sentence. Most sections don't need it.

## API

Parts: `Root`, `Header`, `Title`, `Description`, `Actions`, `Meta`. Props go to the native element: `section` for `Root`, `h2` for `Title`, `p` for `Description`, `span` for `Meta`, `div` for the rest.