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

# Radio

> Radio button controls for single selection from groups

# HuxRadio

Radio button controls for single selection from groups with consistent sizing and theme adaptation.

## Overview

The `HuxRadio` component provides radio button controls that allow users to select a single option from a group of related choices. It features consistent 18x18 pixel sizing for optimal UX and automatic light/dark theme adaptation.

## Properties

* `value` - The value represented by this radio button
* `groupValue` - The currently selected value for the group
* `onChanged` - Callback when the radio button is selected
* `label` - Optional text label for the radio button
* `size` - Size variant (small, medium, large)
* `isDisabled` - Whether the radio button is disabled

## States

### Unchecked State

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/radio/radio-unchecked.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=222fe9a1f6fd8c252980aaeba1da9e55" alt="Unchecked radio button" width="1000" height="300" data-path="images/radio/radio-unchecked.png" />

```dart theme={null}
HuxRadio<String>(
  value: 'option1',
  groupValue: null, // No selection yet
  onChanged: (value) => setState(() => selectedValue = value),
  label: 'Option 1',
)
```

* Empty radio button with border
* Ready for user interaction
* Part of a radio group

### Checked State

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/radio/radio-checked.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=f1717510e573694fcadfa2612282fb0a" alt="Checked radio button" width="1000" height="300" data-path="images/radio/radio-checked.png" />

```dart theme={null}
HuxRadio<String>(
  value: 'option1',
  groupValue: 'option1', // This option is selected
  onChanged: (value) => setState(() => selectedValue = value),
  label: 'Option 1',
)
```

* Filled radio button with dot
* Visual confirmation of selection
* Only one radio button can be selected per group

### Disabled State

```dart theme={null}
HuxRadio<String>(
  value: 'disabled',
  groupValue: selectedValue,
  onChanged: null, // This makes it disabled
  label: 'Disabled Option',
  isDisabled: true,
)
```

* Reduced opacity and non-interactive
* Maintains visual consistency
* Cannot be selected even if clicked

## Examples

### Basic Radio Group

<img src="https://mintcdn.com/thehuxdesign/ZdTBXsPpp1-7xmRJ/images/radio/radio.png?fit=max&auto=format&n=ZdTBXsPpp1-7xmRJ&q=85&s=c18d5b4d2513ff10dc30db97ce023702" alt="Disabled radio button" width="1000" height="300" data-path="images/radio/radio.png" />

```dart theme={null}
String selectedValue = 'option1';

Column(
  children: [
    HuxRadio<String>(
      value: 'option1',
      groupValue: selectedValue,
      onChanged: (value) => setState(() => selectedValue = value!),
      label: 'Option 1',
    ),
    HuxRadio<String>(
      value: 'option2',
      groupValue: selectedValue,
      onChanged: (value) => setState(() => selectedValue = value!),
      label: 'Option 2',
    ),
  ],
)
```

## Related Components

* [HuxCheckbox](/components/checkbox) - For multiple selection
* [HuxSwitch](/components/switch) - For toggle states
* [HuxButton](/components/buttons) - For action buttons