Compositions
Settings Item
Settings row with an icon, a label, a value and a chevron or a switch, built from Item.
Installation
npx axiom add settings-itempnpm dlx axiom add settings-itemyarn dlx axiom add settings-itembun x axiom add settings-itemAlso copies: item, icon, switch, text, the use-controllable-state hook and their dependencies. The file lands in components/compositions/settings-item.tsx.
Requires the chevron-right icon in your icon registry. Settings Item brings no tokens of its own: colors come from Item and Switch.
Usage
import { SettingsItem } from "@/components/compositions/settings-item";
<SettingsItem
icon="bell"
title="Notifications"
trailing="switch"
checked={notifications}
onCheckedChange={setNotifications}
/>
<SettingsItem
icon="globe"
title="Language"
value="English"
onPress={() => router.push("/settings/language")}
/>Group rows with the Settings Section block, which adds a title, a footer and the separators between rows.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Label of the setting. |
description | string | — | Second line under the title, up to two lines. Read with the title by screen readers. |
icon | IconName | — | Leading Icon, in the muted color. |
value | string | — | Current value in muted text, before the chevron or the switch: "English", "On". |
trailing | 'chevron' | 'switch' | 'chevron' | chevron for a row that opens a screen. switch for a setting toggled in place. |
checked | boolean | — | State of the switch. Without it, the switch manages its own state. |
onCheckedChange | (checked: boolean) => void | — | Called when the switch changes. |
onPress | () => void | — | Called when the row is pressed. With trailing="switch" and no onPress, pressing anywhere on the row toggles the switch, with a light haptic. |
disabled | boolean | false | Blocks presses and uses the disabled color for the icon, the value and the switch. |
divider | boolean | 'inset' | false | Hairline under the row, from Item. Set it on every row of a section but the last. |
Accessibility
A switch row is announced as a switch with its checked state: the row carries the role, and the switch inside is hidden from screen readers so it isn’t read twice. A chevron row is a regular pressable row.
Built with
- Item: the pressable row, its leading, content and trailing slots.
- Icon: the leading icon and the chevron.
- Switch: the trailing toggle.
- Text: the value.
- useControllableState: controlled or uncontrolled switch state.
Used in
- Settings Section: rows grouped under a title, with a footer.
Related
- Compositions
- OptionItem: a row for picking one value in a list.