Tally UI

SettingsGroup

Groups related settings rows under a titled section

Import

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

Usage

<SettingsGroup title="Appearance" description="Customize how the app looks">
  <SettingsRow label="Dark Mode" action={<Switch />} />
  <SettingsRow label="Font Size" action={<Text>Medium</Text>} />
</SettingsGroup>

Wraps a set of SettingsRow children in a bordered card with a section title and optional description. Use multiple groups on a settings screen to organize options into logical categories.

Props

PropTypeDefaultDescription
titlestringrequiredSection heading text
descriptionstring---Secondary description below the title
childrenReactNoderequiredSettingsRow items or other content
classNamestring---Override container styles

Live demo

On this page