Components · Form Controls
Switch
StableSince v0.0.1
Toggle control for binary on/off settings. Built on Radix UI Switch.
import { Switch } from '@nexub/react';Examples
Default
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| onCheckedChange | (checked: boolean) => void | — | Callback when checked state changes. |
| disabled | boolean | false | Disables interaction. |
| size | 'sm' | 'md' | 'lg' | 'md' | Switch size. |
On iOS & Android: Switch
@nexub/react-nativeAlpha
import { Switch } from '@nexub/react-native';
<Switch label="Face ID" checked={on} onCheckedChange={setOn} />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Look | Nexub switch. | The platform switch (UISwitch / Material) in Nexub colours. |
| Label | Compose Label + control + HelperText (or FormField). | One component: label, helperText and error are props. |
Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.
On device
iPhone (iOS simulator)
Pixel (Android emulator)
Screenshots from the latest CI run of the showcase app; the live frame renders the same code for the web.
Switch props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | Accessible name (visible label lives in the ListItem / row next to it). |
| checked | boolean | — | — |
| defaultChecked | boolean | false | — |
| onCheckedChange | (checked: boolean) => void | — | — |
| disabled | boolean | — | — |