Radio

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

Installation


pnpm dlx bna-ui add radio

Usage

import { RadioGroup, RadioButton } from '@/components/ui/radio';

const [value, setValue] = useState('option1');

<RadioGroup
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' },
  ]}
  value={value}
  onValueChange={setValue}
/>;

Examples

Default

Horizontal Layout

Disabled Options

Custom Styling

Form Integration

Large Size

Single Radio Button

API Reference

RadioGroup

The main container component that manages a group of radio buttons. Uses value/onValueChange (matching ToggleGroup's group-selection convention) rather than checkbox's checked/onCheckedChange or toggle's pressed/onPressedChange — each naming convention matches its own control's interaction model and is intentional, not an inconsistency.

Prop	Type	Default	Description
`haptic`	`boolean`	`true`	Whether to trigger haptic feedback when an option is selected. Forwarded to every `RadioButton` in the group.
`options`	`RadioOption[]`	-	Array of radio button options.
`value`	`string`	-	The currently selected value.
`onValueChange`	`(value: string) => void`	-	Callback fired when the selection changes.
`disabled`	`boolean`	`false`	Whether the entire group is disabled.
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout orientation of the radio buttons.
`style`	`ViewStyle`	-	Additional styles for the group container.
`optionStyle`	`ViewStyle`	-	Additional styles for each radio button.
`labelStyle`	`TextStyle`	-	Additional styles for radio button labels.

RadioButton

Individual radio button component for custom layouts.

Prop	Type	Default	Description
`haptic`	`boolean`	`true`	Whether to trigger haptic feedback when the option is selected. Re-selecting the active option stays silent.
`option`	`RadioOption`	-	The radio option data.
`selected`	`boolean`	-	Whether this radio button is selected.
`onPress`	`() => void`	-	Callback fired when the button is pressed.
`disabled`	`boolean`	`false`	Whether this radio button is disabled.
`style`	`ViewStyle`	-	Additional styles for the button container.
`labelStyle`	`TextStyle`	-	Additional styles for the button label.

RadioOption

The shape of each radio option object.

Prop	Type	Description
`label`	`string`	The display text for the radio button.
`value`	`string`	The value associated with this option.
`disabled`	`boolean`	Whether this specific option is disabled.

Accessibility

The Radio component is built with accessibility in mind:

Uses TouchableOpacity for proper touch feedback
Supports disabled states with appropriate visual feedback
Proper opacity changes for disabled options
Screen reader friendly with semantic structure
Supports keyboard navigation patterns
Clear visual indicators for selected state

Progress ScrollView