Radio

Radio button component for single selections.

Radio

Radio is a form component for capturing single selections within a group.

Import

import { Radio } from 'radix-native-ui';

Usage

import { Radio } from 'radix-native-ui';

// With label prop
<Radio value="option1" label="Option 1" />

// With children (custom content)
<Radio value="option1">
  <Text>Custom content</Text>
</Radio>

// Controlled
<Radio value="option1" selected={isSelected} onSelect={handleSelect} />

// Uncontrolled (with defaultChecked)
<Radio value="option1" defaultChecked />

Props

Haptic Feedback

Radio buttons provide haptic feedback by default when selected. You can disable this with the hapticFeedback prop:

<Radio value="1" label="No haptic" hapticFeedback={false} />
<Radio value="2" label="With haptic" />

Examples

Basic Radio

<Radio value="apple" label="Apple" />
<Radio value="banana" label="Banana" />
<Radio value="orange" label="Orange" />

Sizes

<Radio value="1" size="1" label="Small" />
<Radio value="2" size="2" label="Medium" />
<Radio value="3" size="3" label="Large" />

With Color

<Radio value="1" color="blue" label="Option 1" />
<Radio value="2" color="blue" label="Option 2" />

Disabled Option

<Radio value="1" label="Available" />
<Radio value="2" label="Unavailable" disabled />

Variants

<Radio value="1" variant="solid" label="Solid" defaultChecked />
<Radio value="2" variant="soft" label="Soft" defaultChecked />
<Radio value="3" variant="surface" label="Surface" defaultChecked />
<Radio value="4" variant="outline" label="Outline" defaultChecked />

Related

• RadioGroup - Radio button group
• RadioCards - Card-style radio selection
• Checkbox - Checkbox component