# Settings form

> Groups of fields described by data, rendered as one plain HTML form.

URL: https://apogee.avaui.dev/docs/sections/settings-form
Last updated: 2026-10-15

Groups of fields described by data, rendered as one plain HTML form.

Last updated October 15, 2026

```astro
<SettingsForm layout="two-column" action="/settings" groups={[{ heading, description?, fields: [{ kind: 'input' | 'select' | 'switch' | 'textarea', name, label, hint?, options?, value?, required?, type? }] }]} cancelLabel="Reset" />
```

## Add

```sh
npx @ava-ui/apogee add settings-form
```

## API

| Prop | Type | Default | Category | Description |
| --- | --- | --- | --- | --- |
| `groups` | `{ heading, description?, fields }[]` | — | content | Each field: `kind`, `name`, `label`, `hint?`, `options?` (select), `value?` (`'on'` checks a switch), `required?`, `type?` (input). |
| `action`, `method` | `string`, `'get' \| 'post'` | —, `'post'` | content | Passed to the `form`. |
| `submitLabel` | `string` | `'Save changes'` | content |  |
| `cancelLabel` | `string` | — | content | Shows a reset button. |
| `label` | `string` | `'Settings'` | content | Landmark name. |
| `layout` | `'stacked' \| 'two-column'` | `'stacked'` | layout | Two-column puts the group heading beside its fields. |
| `spacing`, `headingLevel`, `id` |  | `spacing` is `small` | layout |  |

## Layouts

```astro
<SettingsForm layout="stacked" groups={…} />
```

## Accessibility

-   Each group is a `fieldset` labelled by its heading; every control has a visible label; the form submits without JS.