SettingRow

One setting: a title and description with its control at the end (a Switch, a Select, a Button, a read-only value or a link to a sub-page).

Pro
Version 2.0.0-rc.1
APG pattern: Switch, select, button or link, named and described by the row

Examples

Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.

Default

Weekly summaryAn email every Monday with what changed.

Show the code

Default, code

<SettingRow
  title="Weekly summary"
  description="An email every Monday with what changed."
  control={<Switch hideLabel defaultSelected>Weekly summary</Switch>}
/>

Kinds

Weekly summaryAn email every Monday with what changed.

Summary dayWhen the weekly email arrives.

PasswordLast changed 3 months ago.

Language

English (UK)

Connected appsFigma, Slack and 2 more.

Manage

Show the code

Kinds, code

<div>
  <SettingRow title="Weekly summary" description="An email every Monday with what changed." control={<Switch hideLabel defaultSelected>Weekly summary</Switch>} />
  <SettingRow title="Summary day" description="When the weekly email arrives." control={(
    <Select label="Summary day" hideLabel defaultSelectedKey="mon" className="w-40">
      <SelectItem id="mon">Monday</SelectItem>
      <SelectItem id="fri">Friday</SelectItem>
    </Select>
  )} />
  <SettingRow title="Password" description="Last changed 3 months ago." control={<Button variant="outline" size="sm">Change</Button>} />
  <SettingRow title="Language" value="English (UK)" />
  <SettingRow title="Connected apps" description="Figma, Slack and 2 more." control={<Link href="#connected-apps" variant="standalone">Manage</Link>} />
</div>

Tokens

The 5 design tokens SettingRow reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.

Show all 5 tokens

Tokens SettingRow reads
Token	Value now	CSS variable
color.border.subtle	…	`--sd-color-border-subtle`
color.text.default	…	`--sd-color-text-default`
color.text.secondary	…	`--sd-color-text-secondary`
spacing.gap.lg	…	`--sd-spacing-gap-lg`
spacing.inset.md	…	`--sd-spacing-inset-md`

Install

Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.

Add it from the registry (Pro licence key)

npx shadcn@latest add @superduperui/setting-row

Then import it

import { SettingRow } from "@/components/ui/setting-row"

Props

SettingRow props
Prop	Type	What it does
`title`required	`string`	The setting's name. It names a Switch or Checkbox control (aria-labelledby), so the control needs no visible label of its own.
`description`	`string`	One line under the title: what the setting does. The control's description (aria-describedby).
`control`	`ReactNode`	The control at the end of the row: a Switch (with hideLabel), a Select (with label set to the title and hideLabel), a Button or a Link to a sub-page. Switches and Checkboxes are named by the title; Buttons, Links and Selects keep their own name and are described by the title and description.
`value`	`ReactNode`	A read-only value at the end instead of a control ("English (UK)").
`className`	`string`

When to use it

Use it for

Settings pages and preference panels
Settings that apply straight away (a Switch) or open a sub-page

Use something else for

Form fields that are submitted together: use the fields in a Form
App navigation: use NavItem or Sidebar

Screen readers announce "Weekly summary, switch, on, An email every Monday with what changed.".

WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.4.13, 2.5.5.

Rows stay at least 64px tall: density changes spacing only.

What your product still has to do

Give a Switch or Checkbox hideLabel and the same text as the title; give a Select the title as its label, with hideLabel
Keep Button and Link text short and specific ("Change", "Manage")

This release’s test results

Test results for SettingRow in this release
axe-core (WCAG A, AA, AAA and best practice)	60 runs across every story, theme, density and width: 0 violations
Rendered text contrast	275 text runs: 0 below 7:1, lowest 8.42:1
Target size	30 targets: 0 under 44px in Comfortable
Focus appearance (2.4.13)	72 focus stops in 3 browser engines: all pass
Keyboard script	Chromium 5 of 5, Firefox 5 of 5, WebKit 5 of 5

Manual passes with VoiceOver and NVDA haven’t been done yet.

Keyboard

Each step is scripted and run in Chromium, Firefox and WebKit.

SettingRow keyboard steps
Key	What happens
`Tab`	Tab reaches the switch, named by the row title (on)
`Space`	Space turns the setting off
`Tab`	Tab moves to the next row's control
`Tab`	Tab reaches the Change button, which keeps its own name
`Tab`	Tab skips the read-only value and reaches the link

In Figma

The Figma component is SettingRow, with Control (Switch, Select, Button, Value, Link). The Figma library isn’t published yet.

Figma to code: Control (Switch = control (a Switch with hideLabel, named by the title), Select = control (a Select with the title as its hidden label), Button = control (a Button, described by the title), Value = value, Link = control (a Link to the sub-page, described by the title)); Title → title; Description → description when Show description; nested Switch → control.