# Settings Layout

> Standard settings page: a label column with one sentence on what it does, controls on the right, one row per topic.

Component · Foundations · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/SettingsLayout/)

Standard settings page: a label column with one sentence on what it does, controls on the right, one row per topic.

Props: `sections` ({id, title, text, badge, children}), `footer`. Stacks on narrow screens.

## Example

```tsx
import { Button, SecretField, Segmented, SettingsLayout, Switch } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div className="tf-panel">
      <SettingsLayout
        sections={[
          {
            title: "Appearance",
            text: "Theme and density for this browser.",
            children: <Segmented defaultValue="System" options={["System", "Light", "Dark"]} />,
          },
          {
            title: "Notifications",
            text: "What reaches your phone.",
            children: [
              <Switch key={1} spread defaultChecked>
                Approvals waiting on me
              </Switch>,
              <Switch key={2} spread>
                Weekly digest
              </Switch>,
            ],
          },
          {
            title: "API key",
            text: "Used by the CLI.",
            children: <SecretField prefix="hq_" last4="9c1e" onCopy={() => {}} />,
          },
        ]}
        footer={<Button icon="check">Save changes</Button>}
      />
    </div>
  );
}
```

## Props

### Button

| Prop | Type | Notes |
| --- | --- | --- |
| `variant?` | `"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"` |  |
| `size?` | `"md" \| "sm"` |  |
| `icon?` | `IconName` |  |
| `iconRight?` | `IconName` |  |
| `disabled?` | `boolean` |  |
| `type?` | `"button" \| "submit" \| "reset"` |  |
| `onClick?` | `(e: MouseEvent<HTMLButtonElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `asChild?` | `boolean` | Render the single child element (a link, a router Link) with the button's look instead of a <button>. |
| `id?` | `string` |  |
| `name?` | `string` | Form field name and value, sent with the form when this button submits it. |
| `value?` | `string` |  |
| `form?` | `string` | The id of the form this button belongs to, when it sits outside it. |
| `title?` | `string` |  |
| `tabIndex?` | `number` |  |
| `autoFocus?` | `boolean` |  |
| `aria-label?` | `string` |  |
| `aria-labelledby?` | `string` |  |
| `aria-describedby?` | `string` |  |
| `aria-expanded?` | `boolean \| "true" \| "false"` | For disclosure and menu triggers: whether what the button controls is open. |
| `aria-controls?` | `string` |  |
| `aria-haspopup?` | `boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"` |  |
| `aria-pressed?` | `boolean \| "true" \| "false" \| "mixed"` | For toggle buttons. |
| `aria-current?` | `boolean \| "true" \| "false" \| "page" \| "step" \| "location" \| "date" \| "time"` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### SecretField

| Prop | Type | Notes |
| --- | --- | --- |
| `prefix?` | `string` |  |
| `last4?` | `string` |  |
| `value?` | `string` |  |
| `meta?` | `ReactNode` |  |
| `onReveal?` | `() => boolean \| Promise<boolean>` |  |
| `onCopy?` | `() => void` |  |
| `onRotate?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Segmented

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `(string \| Option)[]` | Required |
| `value?` | `string` |  |
| `defaultValue?` | `string` |  |
| `onChange?` | `(v: string) => void` |  |
| `size?` | `"sm"` |  |
| `block?` | `boolean` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### SettingsLayout

| Prop | Type | Notes |
| --- | --- | --- |
| `sections` | `{ id?: string; title: ReactNode; text?: ReactNode; badge?: ReactNode; children?: ReactNode; }[]` | Required |
| `footer?` | `ReactNode` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Switch

| Prop | Type | Notes |
| --- | --- | --- |
| `name?` | `string` |  |
| `checked?` | `boolean` |  |
| `defaultChecked?` | `boolean` |  |
| `onChange?` | `(e: ChangeEvent<HTMLInputElement>) => void` |  |
| `children?` | `ReactNode` |  |
| `spread?` | `boolean` |  |
| `disabled?` | `boolean` |  |
| `label?` | `string` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |