Section

A titled group of form rows, as on settings pages.

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 of fields or records. Use it for forms and settings; content blocks on product pages use 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.