Radio

Radio button for exclusive selections

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

Usage

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

// Radio with Radio.Group
<Radio.Group value={value} onChange={setValue}>
  <Radio label="React" value="react" />
  <Radio label="Vue" value="vue" />
  <Radio label="Angular" value="angular" />
</Radio.Group>

// Group with custom size and color
<Radio.Group
  value={value}
  onChange={setValue}
  size="lg"
  color="green"
  spacing={16}
>
  <Radio label="Option 1" value="1" />
  <Radio label="Option 2" value="2" />
</Radio.Group>

// Standalone radio
<Radio
  label="Accept terms"
  value="terms"
  checked={accepted}
  onChange={handleChange}
/>

Props

Prop	Type	Default	Description
`value`	`string`		Currently selected radio value (controlled component)
`onChange`	`(value: string) => void`		Callback fired when any radio in the group is selected
`children` (required)	`React.ReactNode`		Radio components to be rendered within the group
`name`	`string`		Radio group name for accessibility purposes
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`		Radio size applied to all children radios in the group
`color`	`MantineColor`		Radio color applied to all children radios in the group
`style`	`ViewStyle`		Additional styles applied to the group wrapper container
`spacing`	`number`	`12`	Spacing between radio buttons in the group

Source on GitHub · npm