ToggleRow

A labeled Switch row for inline preference controls — simpler than SettingsRow (no icon, no accessory modes). Use inside cards, forms, or any context where a preference doesn’t need left-icon treatment or the full settings semantics.

When to use: Inline preferences inside a feature card, quick-toggle panels, compact boolean options in a form section.

When not to use: Settings screens with grouped rows — use SettingsRow + SettingsGroup. When you need a left icon — use SettingsRow with rightAccessory="switch".

Import

import { ToggleRow } from '@/components';

Usage

<ToggleRow
  label="Show completed tasks"
  description="Completed items appear dimmed at the bottom"
  value={showCompleted}
  onValueChange={setShowCompleted}
/>

Props

Prop	Type	Default	Description
label	string	—	Primary label (required)
description	string	—	Secondary line below label
value	boolean	—	Switch state (required)
onValueChange	(value: boolean) => void	—	Change handler (required)
isDisabled	boolean	false	Prevents interaction
testID	string	—

In a Card

<Card padding="md" border>
  <Heading level={3}>Display Options</Heading>
  <ToggleRow
    label="Compact view"
    description="Show more items per screen"
    value={compact}
    onValueChange={setCompact}
  />
  <ToggleRow
    label="Show avatars"
    value={avatars}
    onValueChange={setAvatars}
  />
</Card>

Related

• SettingsRow — settings row with left icon and multiple accessory modes
• Switch — bare switch atom