Components
ToggleRow
A settings row: label and optional description on the left, switch pinned right.
Web-only — toggle-row.web.tsx has no native counterpart.
The whole row is the hit target, not just the switch, which is why the description is part of the component rather than something a caller stacks above it.
function Controlled({ initial = true, ...props }: { initial?: boolean } & Omit<React.ComponentProps<typeof ToggleRow>, 'value' | 'onValueChange'>) {
const [on, setOn] = React.useState(initial);
return <ToggleRow {...props} value={on} onValueChange={setOn} />;
}
<View style={{ maxWidth: 520 }}>
<Controlled {...args} />
</View>Import
import { ToggleRow } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
label | — | "Two-factor authentication" | The setting being toggled. Written as a noun, not a question. |
description | — | "Required for everyone with billing access." | One line explaining the consequence of turning it on. Omit it when the label is already unambiguous. |
disabled | boolean | false | Blocks interaction and dims the row. The switch keeps showing its real value. |
soon | boolean | false | Renders a SOON badge beside the label. For settings that exist in the UI before they exist in the product. |
value | — | true | Controlled. Pair with onValueChange or the switch will not move. |
onValueChange | — | — | Required. Receives the next boolean. |
Examples
Stacked
Several rows stacked is the real usage — a settings card, not a lone switch.
function Controlled({ initial = true, ...props }: { initial?: boolean } & Omit<React.ComponentProps<typeof ToggleRow>, 'value' | 'onValueChange'>) {
const [on, setOn] = React.useState(initial);
return <ToggleRow {...props} value={on} onValueChange={setOn} />;
}
<View style={{ maxWidth: 520 }}>
<Controlled label="Two-factor authentication" description="Required for everyone with billing access." />
<Controlled label="Email receipts" description="Send a copy of every invoice to the billing contact." initial={false} />
<Controlled label="Weekly digest" description="A summary of activity every Monday morning." />
</View>Without Description
A row with no description collapses to a single line.
function Controlled({ initial = true, ...props }: { initial?: boolean } & Omit<React.ComponentProps<typeof ToggleRow>, 'value' | 'onValueChange'>) {
const [on, setOn] = React.useState(initial);
return <ToggleRow {...props} value={on} onValueChange={setOn} />;
}
<View style={{ maxWidth: 520 }}>
<Controlled label="Dark mode" />
<Controlled label="Compact tables" initial={false} />
</View>States
function Controlled({ initial = true, ...props }: { initial?: boolean } & Omit<React.ComponentProps<typeof ToggleRow>, 'value' | 'onValueChange'>) {
const [on, setOn] = React.useState(initial);
return <ToggleRow {...props} value={on} onValueChange={setOn} />;
}
<View style={{ maxWidth: 520 }}>
<Controlled label="On" description="The switch is engaged." />
<Controlled label="Off" description="The switch is not engaged." initial={false} />
<Controlled label="Disabled" description="Cannot be changed here." disabled />
<Controlled label="Not shipped yet" description="Visible, but not wired up." soon initial={false} />
</View>