Checkbox

Checkbox with indeterminate state

Import: import { Checkbox } from 'react-native-mantine';

Usage

import { Checkbox } from 'react-native-mantine';

// Basic checkbox
<Checkbox
  label="Accept terms and conditions"
  checked={accepted}
  onChange={setAccepted}
/>

// Indeterminate state
<Checkbox
  label="Select all"
  checked={allSelected}
  indeterminate={someSelected}
  onChange={toggleAll}
/>

// Disabled checkbox
<Checkbox
  label="Cannot change this"
  checked={true}
  disabled
/>

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`		Checkbox label displayed next to the checkbox
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Checkbox size that controls the dimensions of the checkbox box
`color`	`MantineColor`	`'blue'`	Checkbox color from theme (e.g., "blue", "red", "green", "orange", "grape")
`checked`	`boolean`	`false`	Controlled checked state of the checkbox
`onChange`	`(checked: boolean) => void`		Callback fired when checkbox state changes, receives new checked state
`indeterminate`	`boolean`	`false`	If true, checkbox displays in indeterminate state (dash instead of checkmark)
`disabled`	`boolean`	`false`	Disabled state - prevents interaction and reduces opacity
`style`	`ViewStyle`		Additional styles applied to the checkbox box itself
`wrapperStyle`	`ViewStyle`		Additional styles applied to the wrapper container (checkbox + label)

Source on GitHub · npm