> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipmobilefast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Radio Button

> React Native Reanimated Radio button component with label and description support

## Import

```typescript theme={null}
import RadioButton from '@/components/common/buttons/radio-button';
```

## Props

<ResponseField name="selected" type="boolean" required>
  Whether the radio button is selected.
</ResponseField>

<ResponseField name="onSelect" type="() => void" required>
  Function to call when the radio button is pressed.
</ResponseField>

<ResponseField name="label" type="string" required>
  The main label text for the radio button.
</ResponseField>

<ResponseField name="value" type="string">
  Optional value text to display below the label.
</ResponseField>

<ResponseField name="description" type="string">
  Optional description text to display below the label/value.
</ResponseField>

<ResponseField name="color" type="string" default="theme.primary">
  Custom color for the radio button and selection state.
</ResponseField>

<ResponseField name="icon" type="React.ReactNode">
  Optional icon component to display on the right side.
</ResponseField>

<ResponseField name="height" type="number">
  Custom height for the radio button container.
</ResponseField>

<ResponseField name="accessibilityLabel" type="string">
  Accessibility label for screen readers.
</ResponseField>

<ResponseField name="style" type="StyleProp<ViewStyle>">
  Additional styles for the container.
</ResponseField>

<ResponseField name="labelStyle" type="StyleProp<TextStyle>">
  Custom styles for the label text.
</ResponseField>

<ResponseField name="valueStyle" type="StyleProp<TextStyle>">
  Custom styles for the value text.
</ResponseField>

<ResponseField name="descriptionStyle" type="StyleProp<TextStyle>">
  Custom styles for the description text.
</ResponseField>

## 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

```typescript theme={null}
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

```typescript theme={null}
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