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.

Prop	Type	Default	Description
`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
`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.

Property	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

On This Page

Installation Usage Examples Default Horizontal Layout Disabled Options Custom Styling Form Integration Large Size Single Radio Button API Reference RadioGroup RadioButton RadioOption Accessibility