Components · Form Controls
Checkbox
StableSince v0.0.1
Binary checkbox input built on Radix UI.
import { Checkbox } from '@nexub/react';Examples
Default
With label
States
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | The controlled checked state. |
| defaultChecked | boolean | — | The initial checked state when uncontrolled. |
| disabled | boolean | — | Disables the checkbox when true. |
| required | boolean | — | Marks the checkbox as required in a form. |
| onCheckedChange | (checked: boolean) => void | — | Callback fired when the checked state changes. |
On iOS & Android: Checkbox
@nexub/react-nativeAlpha
import { Checkbox } from '@nexub/react-native';
<Checkbox label="Remember this device" defaultChecked />Web vs mobile
Same tokens and prop names. Where the platforms differ:
| Web | iOS & Android | |
|---|---|---|
| Label | Compose Label + control + HelperText (or FormField). | One component: label, helperText and error are props. |
| In lists | Checkbox + label. | Prefer ListItem variant="checkbox": one row, one target. |
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.
Checkbox props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | — | — |
| checked | boolean | — | — |
| defaultChecked | boolean | false | — |
| onCheckedChange | (checked: boolean) => void | — | — |
| description | string | — | — |
| disabled | boolean | — | — |
| style | StyleProp<ViewStyle> | — | — |