Radio Button

Import

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

Props

boolean

required

Whether the radio button is selected.

() => void

required

Function to call when the radio button is pressed.

string

required

The main label text for the radio button.

string

Optional value text to display below the label.

string

Optional description text to display below the label/value.

string

default:"theme.primary"

Custom color for the radio button and selection state.

React.ReactNode

Optional icon component to display on the right side.

number

Custom height for the radio button container.

string

Accessibility label for screen readers.

StyleProp<ViewStyle>

Additional styles for the container.

StyleProp<TextStyle>

Custom styles for the label text.

StyleProp<TextStyle>

Custom styles for the value text.

StyleProp<TextStyle>

Custom styles for the description text.

Additional Props

Prop	Type	Required	Default	Description
`accessibilityLabel`	`string`	No	-	Accessibility label for screen readers
`style`	`StyleProp<ViewStyle>`	No	-	Additional styles for the container
`labelStyle`	`StyleProp<TextStyle>`	No	-	Custom styles for the label text
`valueStyle`	`StyleProp<TextStyle>`	No	-	Custom styles for the value text
`descriptionStyle`	`StyleProp<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

Get Started

AI Wrapper

Authentication

Monetization

Core Features

Analytics & Monitoring

Prebuilt Screens

UI Components

Troubleshooting

Import

Props

Additional Props

Features

Additional Examples

Radio Group Example

Styled Example

Notes

​Import

​Props

​Additional Props

​Features

​Additional Examples

​Radio Group Example

​Styled Example

​Notes

Import

Props

Additional Props

Features

Additional Examples

Radio Group Example

Styled Example

Notes