RadioGroup

RadioGroup presenta opciones excluyentes, como pagar mensual o anual. Cada opción es un ControlField, así toda la fila es tocable.

Seguro automotriz · JTRX-12

Elige cómo pagar

Anatomía

RadioGroup agrupa los RadioGroupItem y controla cuál está elegido. Cada ítem va en un ControlField con su etiqueta, y puede sumar una descripción o un precio al final.

  1. Radio
  2. Etiqueta
  3. Descripción opcional
  4. Contenido final opcional

Variantes

Usa la lista para elecciones rápidas. Agrúpalas en un ControlGroup cuando las opciones tienen más contenido o son parte de un checkout.

ListaOpciones inline, una bajo la otra.
ControlGroupFilas separadas con el radio al borde derecho.
Con precioCuando cada opción tiene un valor distinto.

Tamaños

El radio tiene un solo tamaño. La etiqueta del ControlField viene en default y lg.

defaultFormularios y listas compactas.
lgDecisiones principales del flujo, como el medio de pago.

Estados

Sin seleccionarLa opción está disponible.
SeleccionadoLa opción elegida del grupo.
DeshabilitadoLa opción existe, pero no aplica a este auto.

Uso

Sí
Preselecciona la opción más común para ahorrar un paso.
No
Listas largas. Sobre cinco opciones, usa Select.
Sí
Para un sí o un no explícito, nombra ambas opciones.
No
Un radio suelto no se puede desmarcar. Usa Checkbox.

Código

import { ControlField } from '@carvuk/design-system/components/control-field';
import { RadioGroup, RadioGroupItem } from '@carvuk/design-system/components/radio-group';

<RadioGroup defaultValue='monthly'>
  <ControlField label='Pago mensual'>
    <RadioGroupItem value='monthly' />
  </ControlField>
  <ControlField label='Pago anual'>
    <RadioGroupItem value='yearly' />
  </ControlField>
</RadioGroup>