# SettingsSection

> One group of settings: a title and description beside or above a bordered card of 1px-ruled rows.

```ts
import { SettingsSection } from "@sdxc/ui/app";
```

Renders the section. The card is a `<form>` when `form` is set; an explicit section ends
in a footer holding its own Save, which ⌘S presses while focus is in the section, an
instant one submits whenever a control changes, and a `"none"` one is a plain card.

## Examples

```tsx
<SettingsSection title="Monitor defaults" save="explicit" form={{ action: "/settings/monitors" }} labels={{ save: "Save" }}>
	<SettingsSection.Row label="Check interval" htmlFor="interval"><Select id="interval" name="interval">…</Select></SettingsSection.Row>
</SettingsSection>
```

```tsx
<SettingsSection title="Notifications" save="instant" form={{ action: "/settings/notifications" }} labels={{ save: "Save" }}>
	<SettingsSection.Row layout="inline-switch" label="Email me when a monitor goes down" labelId="down-label">
		<Switch name="emailOnDown" aria-labelledby="down-label" />
	</SettingsSection.Row>
</SettingsSection>
```

```tsx
<SettingsSection title="Members" save="none" actions={<Button commandfor="invite" command="show-modal">Invite member</Button>}>
	<Table.Container>…</Table.Container>
</SettingsSection>
```

## Props

Takes no props of its own.

### SettingsSection.Row

Renders one setting as a label and help beside or above its control.

| Prop | Type | Description |
| --- | --- | --- |
| `label` | `RemixNode` |  |
| `description?` | `RemixNode` | Help under the label: what the setting changes, in a sentence. |
| `htmlFor?` | `string` | The control's `id`, which turns the label into a `<label for>`. |
| `labelId?` | `string` | The label's `id`, for a control named through `aria-labelledby`, such as a `Switch`. |
| `descriptionId?` | `string` | The description's `id`, for a control's `aria-describedby`. |
| `layout?` | `"split" \| "stacked" \| "inline-switch" \| "action"` | `"split"` puts the label at the start and the control at the end, stacking under 32rem; `"stacked"` puts the control under the label; `"inline-switch"` keeps a small control at the end at every width; `"action"` gives the text the row's width and puts a button that acts at once, such as "Open billing portal", where `actionPlacement` says, stacking under the text below 32rem. |
| `actionPlacement?` | `ActionPlacement` | Where an `"action"` row's control sits on a wide card. |

Also accepts everything in `TagProps<"div">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Save` | `"explicit" \| "instant" \| "none"` | How the section's changes persist. |
| `RowLayout` | `"split" \| "stacked" \| "inline-switch" \| "action"` | Where a row's label sits against its control. |