Settings

Preference rows: label and description at the start, the control at the end.

.settingsCSS only

Examples

Settings

General

AppearanceFollows the system unless you choose.

LightAutoDark

Reduce transparencySolid surfaces instead of glass.

Accent

Anatomy

`.settings`	The group: a raised panel with shadow and frost edge. Rows are divided by hairlines.
`> h6`	Optional group heading above the rows.
`> .setting`	One row: two columns, text and control. Under 40rem the control drops below the text.
`> .setting > div`	The text: a `<b>` name and an optional `<small>` description, shown muted.
`> .setting > :last-child`	The control: a switch, segmented control, select or button.

Accessibility

The <b> name is not a label. Tie it to the control: give the name an id and the control aria-labelledby, or make the name a <label for>; point aria-describedby at the <small>.
A group of radios (as in a segmented control) needs the name too: put aria-labelledby on the role="radiogroup" element.