# RadioGroup

Lets you pick a single option from a short list.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/RadioGroup.tsx)

## Overview

A radio group offers a single choice from a short list. Arrow keys move focus and selection together.

Name the group with `aria-label`, or with a `Fieldset` legend that asks one question.

## Examples

### Basic

```tsx
import { Field, RadioGroup } from '@tempoxyz/ds'

function Choice(props: { label: string; value: string }) {
  return (
    <Field.Root>
      <Field.Item>
        <RadioGroup.Item value={props.value} />
        <Field.Label>{props.label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <RadioGroup.Root aria-label="Plan" defaultValue="pro">
      <Choice label="Free" value="free" />
      <Choice label="Pro" value="pro" />
      <Choice label="Team" value="team" />
    </RadioGroup.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/RadioGroup/Basic.tsx)

### Size

Set `size` on `RadioGroup.Root` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Field, RadioGroup, style } from '@tempoxyz/ds'

function Choice(props: { label: string; value: string }) {
  return (
    <Field.Root>
      <Field.Item>
        <RadioGroup.Item value={props.value} />
        <Field.Label>{props.label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <div {...styles.row()}>
      {(['small', 'medium', 'large'] as const).map((size) => (
        <RadioGroup.Root aria-label={`Plan ${size}`} defaultValue="pro" key={size} size={size}>
          <Choice label={`Free (${size})`} value="free" />
          <Choice label={`Pro (${size})`} value="pro" />
        </RadioGroup.Root>
      ))}
    </div>
  )
}

namespace styles {
  export const row = style({ display: 'flex', flexWrap: 'wrap', gap: '12' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/RadioGroup/Size.tsx)

### Disabled

Set `disabled` on a `RadioGroup.Item` to disable one option, or on `RadioGroup.Root` to disable the group.

```tsx
import { Field, RadioGroup, style } from '@tempoxyz/ds'

function Choice(props: { disabled?: boolean; label: string; value: string }) {
  return (
    <Field.Root>
      <Field.Item>
        <RadioGroup.Item disabled={props.disabled} value={props.value} />
        <Field.Label>{props.label}</Field.Label>
      </Field.Item>
    </Field.Root>
  )
}

export function Demo() {
  return (
    <div {...styles.row()}>
      <RadioGroup.Root aria-label="Plan" defaultValue="pro">
        <Choice label="Free" value="free" />
        <Choice label="Pro" value="pro" />
        <Choice disabled label="Team" value="team" />
      </RadioGroup.Root>
      <RadioGroup.Root aria-label="Disabled plan" defaultValue="pro" disabled>
        <Choice label="Free" value="free" />
        <Choice label="Pro" value="pro" />
      </RadioGroup.Root>
    </div>
  )
}

namespace styles {
  export const row = style({ display: 'flex', flexWrap: 'wrap', gap: '12' })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/RadioGroup/Disabled.tsx)

## Guidelines

TODO: Write guidelines for RadioGroup.