Tally UI

SettingsRow

A single settings row with label, description, and an action slot

Import

import { SettingsRow } from '@tallyui/components';

Usage

<SettingsRow
  label="Dark Mode"
  description="Toggle the app's color scheme"
  action={<Switch value={darkMode} onValueChange={setDarkMode} />}
/>

Renders a horizontal row with a text label and optional description on the left, and an action widget on the right. Designed to be stacked inside a SettingsGroup.

Props

PropTypeDefaultDescription
labelstringrequiredPrimary text label
descriptionstring---Secondary description text below the label
actionReactNode---Widget rendered on the right side (switch, button, etc.)
classNamestring---Override container styles

Live demo

On this page