Settings group
The one settings anatomy: a label outside a hairline card, rows of label and control, a quiet note.
import { SettingsGroup, SettingsRow } from "@arcadia/ui"Appearance
Applies to every window on this device.
The one settings anatomy, in an app and on a website alike. The group label sits outside the card on its left edge, in the group type; the card is a hairline frame a step above the page; rows split by hairlines. A row is what it is on the left and its control on the right. Below 560px the control drops under the text.
One primary action per page at most. A group-wide action rides the label's line (action); a row's own action is its control. A note under the card says what the group's settings share, never a row's detail.
Examples
A group is a section labelled by its heading, so a screen reader can jump between groups. A row is plain structure: the control inside carries its own name (hideLabel on a switch still names it), and an error is announced with role="alert".
SettingsGroup
label- ReactNode
- The group's name, outside the card, inset to the rows' text.
action- ReactNode
- One action at the end of the label's line (a refresh, "Sign out everywhere else").
note- ReactNode
- A quiet line under the card: what the group's settings have in common, a consequence.
dense- booleanDefaultfalse
- One-line rows at a 40px pitch (a reference list such as keyboard shortcuts).
flush- booleanDefaultfalse
- The card hands its whole box to its content (a table, a list with its own rows): no row anatomy.
danger- booleanDefaultfalse
- The card's frame takes a red cast: the group's actions can't be undone.
id- string
rootStyle- RootStyle
- Typed StyleX override: where the group sits.
leading- ReactNode
- A leading mark (a provider's tile, a mode's icon), centred on the row's text.
labelrequired- ReactNode
description- ReactNode
- One line under the label, text-3: what the setting does.
detail- ReactNode
- Wrapping text under the description (terms, a notice).
control- ReactNode
- The control on the right: a switch, a segmented control, a button, a field.
error- ReactNode
- A validation or action error under the text, in the danger ink (announced).
align- "center" | "start"Default"center"
startpins the control to the first line of a tall row.dim- booleanDefaultfalse
- Can't be used right now (not connected, a plan gate): the label drops a rank.