​
Import

import RadioButton from '@/components/common/buttons/radio-button';

​
Props

​
selected
boolean
required

Whether the radio button is selected.

​
onSelect
() => void
required

Function to call when the radio button is pressed.

​
label
string
required

The main label text for the radio button.

​
value
string

Optional value text to display below the label.

​
description
string

Optional description text to display below the label/value.

​
color
string
default:
"theme.primary"

Custom color for the radio button and selection state.

​
icon
React.ReactNode

Optional icon component to display on the right side.

​
height
number

Custom height for the radio button container.

​
accessibilityLabel
string

Accessibility label for screen readers.

​
style
StyleProp<ViewStyle>

Additional styles for the container.

​
labelStyle
StyleProp<TextStyle>

Custom styles for the label text.

​
valueStyle
StyleProp<TextStyle>

Custom styles for the value text.

​
descriptionStyle
StyleProp<TextStyle>

Custom styles for the description text.

​
Additional Props

PropTypeRequiredDefaultDescription
accessibilityLabelstringNo-Accessibility label for screen readers
styleStyleProp<ViewStyle>No-Additional styles for the container
labelStyleStyleProp<TextStyle>No-Custom styles for the label text
valueStyleStyleProp<TextStyle>No-Custom styles for the value text
descriptionStyleStyleProp<TextStyle>No-Custom styles for the description text

​
Features

  • Smooth selection animation using Reanimated
  • Support for labels, values, and descriptions
  • Custom icon support
  • Theme-aware styling
  • Accessibility support
  • Customizable colors and styles

​
Additional Examples

​
Radio Group Example

function RadioGroupExample() {
  const [selected, setSelected] = useState('option1');

  return (
    <View>
      <RadioButton
        selected={selected === 'option1'}
        onSelect={() => setSelected('option1')}
        label="Option 1"
      />
      <RadioButton
        selected={selected === 'option2'}
        onSelect={() => setSelected('option2')}
        label="Option 2"
      />
    </View>
  );
}

​
Styled Example

function StyledExample() {
  const [isSelected, setIsSelected] = useState(false);
  
  return (
    <RadioButton
      selected={isSelected}
      onSelect={() => setIsSelected(!isSelected)}
      label="Custom Style"
      color="#FF0000"
      style={{ borderColor: '#FF0000' }}
      labelStyle={{ color: '#FF0000' }}
    />
  );
}

​
Notes

  • The component uses spring animations for smooth selection transitions
  • Selection state is controlled externally through the selected prop
  • The component automatically adapts to light/dark theme modes
  • Custom colors will override theme colors when provided
  • All text elements (label, value, description) are optional

Was this page helpful?

PressableOpacityRipple Button