# Radio

A set of options where exactly one can be selected. For two to five visible options, use Radio; for longer lists, use [Dropdown](/components/dropdown.md).

```tsx
// demo.tsx
import {Fieldset, Radio, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';

const frequencies = ['Daily', 'Weekly', 'Monthly'];

export default function RadioDemo() {
  return (
    <Fieldset.Root render={<Radio.Group defaultValue="Weekly" />}>
      <Fieldset.Legend>Email digest</Fieldset.Legend>
      <Stack gap="small">
        {frequencies.map((frequency) => (
          <SelectionControlAndLabel
            key={frequency}
            control={
              <Radio.Root value={frequency}>
                <Radio.Indicator />
              </Radio.Root>
            }
          >
            {frequency}
          </SelectionControlAndLabel>
        ))}
      </Stack>
    </Fieldset.Root>
  );
}
```

## Usage

```tsx
import {Fieldset, Radio, SelectionControlAndLabel} from '@earendil-works/elanor-react';

<Fieldset.Root render={<Radio.Group />}>
  <Fieldset.Legend>Email digest</Fieldset.Legend>
  <SelectionControlAndLabel
    control={
      <Radio.Root value="daily">
        <Radio.Indicator />
      </Radio.Root>
    }
  >
    Daily
  </SelectionControlAndLabel>
</Fieldset.Root>;
```

Label the group with [Fieldset](/components/fieldset.md). Arrow keys move between options.

## Disabled

Disable a single option with `disabled` on `Radio.Root`, or the whole group on `Fieldset.Root`.

```tsx
// disabled.tsx
import {Fieldset, Radio, SelectionControlAndLabel, Stack} from '@earendil-works/elanor-react';

export default function RadioDisabled() {
  return (
    <Fieldset.Root render={<Radio.Group defaultValue="Standard" />}>
      <Fieldset.Legend>Support plan</Fieldset.Legend>
      <Stack gap="small">
        <SelectionControlAndLabel
          control={
            <Radio.Root value="Standard">
              <Radio.Indicator />
            </Radio.Root>
          }
        >
          Standard
        </SelectionControlAndLabel>
        <SelectionControlAndLabel
          control={
            <Radio.Root value="Priority" disabled>
              <Radio.Indicator />
            </Radio.Root>
          }
        >
          Priority (Enterprise only)
        </SelectionControlAndLabel>
      </Stack>
    </Fieldset.Root>
  );
}
```

## API

### `Radio.Group`

Accepts Base UI [`RadioGroup`](https://base-ui.com/react/components/radio-group.md) props.

### `Radio.Root`

Accepts Base UI [`Radio.Root`](https://base-ui.com/react/components/radio.md) props.

### `Radio.Indicator`

Accepts Base UI [`Radio.Indicator`](https://base-ui.com/react/components/radio.md) props.