Switch

Toggle switch with labels

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

Usage

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

// Basic switch
<Switch
  label="Enable notifications"
  checked={enabled}
  onChange={setEnabled}
/>

// With label on left
<Switch
  label="Dark mode"
  labelPosition="left"
  checked={darkMode}
  onChange={setDarkMode}
/>

// Disabled switch
<Switch
  label="Cannot toggle"
  checked={true}
  disabled
/>

Props

Prop	Type	Default	Description
`label`	`React.ReactNode`		Switch label displayed next to the switch toggle
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Switch size that controls the scale of the switch toggle
`color`	`MantineColor`	`'blue'`	Switch color from theme when enabled (e.g., "blue", "red", "green", "orange", "grape")
`labelPosition`	`'left' \| 'right'`	`'right'`	Position of the label relative to the switch toggle
`checked`	`boolean`		Controlled checked state of the switch (controlled component)
`onChange`	`(value: boolean) => void`		Callback fired when switch state changes, receives new checked state
`disabled`	`boolean`	`false`	Disabled state - prevents interaction
`style`	`ViewStyle`		Additional styles applied to the switch component itself
`wrapperStyle`	`ViewStyle`		Additional styles applied to the wrapper container (switch + label)

Source on GitHub · npm