Components
Toggle
A themed Switch — the on-state track picks up the primary colour.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { Toggle } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
value | boolean | true | Whether the switch is on. Always controlled — pair it with onValueChange or it will not move. |
onValueChange | — | — | Fired with the next value when the user flips the switch. |
disabled | boolean | false | Blocks interaction. The platform dims the control; there is no separate style hook. |
Examples
States
<View className="gap-4">
<View className="flex-row items-center gap-3">
<Toggle value={false} />
<Text>Off</Text>
</View>
<View className="flex-row items-center gap-3">
<Toggle value />
<Text>On</Text>
</View>
<View className="flex-row items-center gap-3">
<Toggle value disabled />
<Text color="tertiary">Disabled</Text>
</View>
</View>In A Settings Row
{
function Row() {
const [enabled, setEnabled] = React.useState(true);
return (
<View className="w-80 flex-row items-center justify-between">
<View className="flex-1 pr-4">
<Text>Option label</Text>
<Text variant="footnote" color="tertiary">
Supporting description text under the toggle label.
</Text>
</View>
<Toggle value={enabled} onValueChange={setEnabled} />
</View>
);
}
return <Row />;
}