OptionItem
Selectable row built on Item.
Installation
npx axiom add option-itempnpm dlx axiom add option-itemyarn dlx axiom add option-itembun x axiom add option-itemAlso copies: item, radio, checkbox.
Requires the check and chevron-right icons in your icon registry. The radio and checkbox indicators are RadioIndicator and CheckboxIndicator, so they match the standalone controls.
Usage
import { OptionItem } from "@/components/ui/option-item";
<OptionItem
label="English"
selected={lang === "en"}
onPress={() => setLang("en")}
/>;Props
OptionItem is an Item with a preset layout, so it also accepts size, divider, disabled and style.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Main text of the row. |
description | string | — | Secondary text under the label. |
icon | IconName | — | Leading icon on a colored tile, like iOS settings. For an avatar or custom media, compose an Item. |
iconColor | PaletteHue | 'gray' | Tile color from the palette: blue, green, orange… |
selected | boolean | false | Shows the selection indicator and sets accessibilityState.selected. |
indicator | 'check' | 'radio' | 'checkbox' | 'none' | 'check' | How selected is drawn: a trailing check (iOS), a leading radio, a leading checkbox. |
value | ReactNode | — | Current value shown on the right in content.muted, for rows that open a picker. |
trailing | ReactNode | — | Replaces the indicator: a Switch, a Badge… |
chevron | boolean | false | Adds a chevron, for rows that navigate. |
destructive | boolean | false | Label in feedback.error, for “Sign out” or “Delete account”. |
onPress | () => void | — | Called when the row is pressed. |
Use cases
Single choice list
The iOS pattern: the checkmark moves to the row the user pressed.
{
sorts.map((s) => (
<OptionItem
key={s.value}
label={s.label}
selected={sort === s.value}
onPress={() => setSort(s.value)}
/>
));
}Settings screen
Icon tiles, values, switches and a destructive row on the same screen, all with one component.
<OptionItem icon="bolt" iconColor="orange" label="Low power mode" trailing={<Switch value={low} onValueChange={setLow} />} />
<OptionItem icon="globe" iconColor="blue" label="Language" value="English" chevron onPress={openLanguage} />
<OptionItem label="Sign out" destructive onPress={confirmSignOut} />Multiple selection
indicator="checkbox" for lists where several rows can be on.
<OptionItem
indicator="checkbox"
icon={<Avatar size="sm" source={c.photo} fallback={c.initials} />}
label={c.name}
selected={recipients.has(c.id)}
onPress={() => toggleRecipient(c.id)}
/>