# RadioGroup

> Una opción de pocas, todas visibles.

```tsx
import { RadioGroup, RadioGroupItem } from "sebs7n-ui/radio-group"
```

## Ejemplos

### Una de pocas, todas visibles

```tsx
import { Label } from "sebs7n-ui/label"
import { RadioGroup, RadioGroupItem } from "sebs7n-ui/radio-group"
import { useId } from "react"

function Basico() {
  const titulo = useId()
  const a = useId()
  const b = useId()
  const c = useId()
  return (
    <div className="flex flex-col gap-3">
      <div className="text-label-14 text-gray-1000" id={titulo}>
        Forma de pago
      </div>
      <RadioGroup aria-labelledby={titulo} className="flex flex-col gap-3" defaultValue="transferencia">
        <div className="flex items-center gap-2">
          <RadioGroupItem id={a} value="transferencia" />
          <Label htmlFor={a}>Transferencia</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem id={b} value="tarjeta" />
          <Label htmlFor={b}>Tarjeta</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem disabled id={c} value="efectivo" />
          <Label htmlFor={c}>Efectivo (no disponible)</Label>
        </div>
      </RadioGroup>
    </div>
  )
}
```

## Props

### RadioGroup

Hereda las props de `RadioGroup`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

### RadioGroupItem

Hereda las props de `Radio.Root`.

| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
| `className` | `string` | — | — |

## Teclado

| Tecla | Qué hace |
|---|---|
| ↑ ↓ ← → | Se mueve entre opciones y elige al pasar. |
| Tab | Entra al grupo por la opción elegida y sale del grupo entero. |

## Accesibilidad

- El grupo necesita nombre: `aria-labelledby` apuntando al título de la sección, o `aria-label`.
- Base UI maneja el foco como un grupo: una sola parada de tabulación para todo.

## Reglas de uso

- De 2 a 5 opciones. Más, `Select`.
- Siempre con una opción elegida por defecto, salvo que «ninguna» sea una respuesta válida y explícita.

## Relacionados

[checkbox](/docs/components/checkbox.md) · [select](/docs/components/select.md) · [toggle-group](/docs/components/toggle-group.md)