'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Layout
SettingsSection
The layout of a settings page: groups with a title and a line of help, and rows with the name and its help on the left and the control on the right. Rows stack by the width of their own section.
import { SettingsSection, SettingRow } from '@alea-design/ui';
Examples
Settings section
A title, a line of help and rows: the name and its help on the left, the control on the right.
Plain, with actions
appearance="plain" drops the panel so the section fits inside a Card or a Modal. actions sits on the right of the title.
Rows with fields
The control sits on the right and gives itself an aria-label. In a narrow section it moves under the text: resize the window.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-border…--alea-surface…--alea-text…--alea-text-muted…
Space
--alea-space-0-5…--alea-space-2…--alea-space-3…
Radius
--alea-radius-md…
Type
--alea-font-family-body…--alea-font-leading-normal…--alea-font-size-base…--alea-font-size-sm…--alea-font-weight-semibold…
Props
SettingsSection props
A group on a settings page: a title, a line of help and the rows below it in one panel. The region is named by its title. Rows are SettingRow.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | The SettingRows, or any content such as a Form. | |
titlerequired | ReactNode | The name of the group of settings ("Notifications"). | |
actions | ReactNode | none | Buttons or a menu on the right of the title. |
appearance | "plain" | "card" | "card" | card (default): the rows sit in one bordered panel. plain: no panel, only lines between rows, for settings inside a Card or a Modal. |
description | ReactNode | none | One line under the title that says what the group is for. |
headingLevel | 2 | 3 | 4 | 5 | 2 | Heading level of the title. Default 2. |
SettingRow props
One setting: the name and its help on the left, the control on the right. Stacks on narrow sections. Use inside SettingsSection.
| Prop | Type | Default | Description |
|---|---|---|---|
titlerequired | ReactNode | What the setting is ("Weekly digest"). | |
children | ReactNode | none | The control: Switch, Select, Button, SegmentedControl, a field. It sits on the right and drops under the text when the section is narrow. |
description | ReactNode | none | What it does, in a sentence. |
htmlFor | string | none | The id of the control, when there is one field: the title becomes its label. Leave it out for a Switch or a group and give that control its own label. |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
SettingsSection
- Variants
appearanceplaincard- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-settings.alea-settings-head.alea-settings-text.alea-settings-title.alea-settings-desc.alea-settings-actions.alea-settings-rows- Data attributes
data-appearance=plain
SettingRow
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-setting.alea-setting-text.alea-setting-title.alea-setting-desc.alea-setting-control- Data attributes
data-appearance=plain
Accessibility
- Each section is a region named by its title, and the title is a heading (level 2 by default; set headingLevel to fit the page outline).
- A row is a group named by its title and described by its help text, so a screen reader says both when focus enters a control inside it.
- When a row holds one field, htmlFor turns the title into that field's label. Otherwise the control needs its own aria-label.
- Rows stack by the width of the section, not of the window, so the layout holds inside a narrow panel or at 400 percent zoom.
Do and don't
Do
- Put one topic in a section and keep it to about seven rows.
- Write the title as a noun ("Weekly digest") and the help as one sentence.
- Use appearance="plain" when the section sits inside a Card or a Modal, so there is no panel in a panel.
- Put a danger action in its own section at the end.
Don't
- Don't stack a Card per setting.
- Don't put long forms in a row: use a Form below the section.
- Don't hide the only way to save: settings that need a save belong in a Form with FormActions.