Components / data-display

Setting Row

One line of a settings page: the setting's name and what it does on the left, its control on the right (a Switch here; also a Select, Button or value).

import { SettingRow } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { SettingRow, Switch } from '@basiiik/ui';

<SettingRow label="Email notifications" control={<Switch aria-label="Email notifications" />} />

• Example values were filled in for the required props label, control: replace them with your own.
• No interactive states of its own; the control inside keeps its own. Inline wraps the control under the text when the row is narrow; stacked always puts it under.
• Compose with: switch.
• Storybook: Data display/Setting row.

Props

States. No interactive states of its own; the control inside keeps its own. Inline wraps the control under the text when the row is narrow; stacked always puts it under.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

• A settings page or panel: notifications, language, privacy, danger-zone actions
• Preferences that each have a name, a sentence of explanation and one control

Do not use it when

• A form that is submitted as a whole (use form fields with labels)
• Facts that are only displayed (use Description List)
• Rows of the same record type (use Table)

Rules for agents

• Put SettingRows next to each other inside a Card or a section so the dividers appear; do not add your own borders
• Pass the control in control; give a Switch the same text as label in its aria-label, or pass controlId and the same id on the control
• label is the setting's name in sentence case; description is one sentence about what changes
• A Switch applies at once, so do not add a Save button for a list of Switches
• Use a danger Button as the control for an irreversible action, and confirm it in a Modal

Avoid

• A hand-built flex row with the label on the left and a Switch on the right
• A description that repeats the label
• More than one control in a row
• A Switch whose accessible name is missing because the visible label is in the row

Writing the content

• Label: a noun phrase, "Email notifications", not "Turn on email notifications"
• Description: what is different when it is on, in a sentence without a full stop if it is short

Accessibility

• The label is a real <label> for the control when controlId is given; otherwise the control must carry its own accessible name (a Switch with aria-label)
• The row adds no role: its control keeps its own semantics and keyboard behaviour

Colour tokens it reads

Related

• Switch
• Select
• Card
• Description List
• Button

data-display 2 Figma variants Try it in the live demo