Grupo de radios

Los radios sirven para elegir exactamente una opción de un conjunto pequeño y visible. radio() dibuja uno; choiceGroup() construye el conjunto entero a partir de un array y le da la leyenda y el role="radiogroup" que lo convierten en un grupo y no en un montón de inputs.

Comparten un name, así que el navegador se ocupa de la exclusividad mutua y de moverse entre ellos con las flechas. Aquí no se envía ningún script.

Grupo básico

Plan
choiceGroup({
  legend: 'Plan',
  name: 'plan',
  value: 'pro',
  options: [
    { value: 'free', label: 'Gratis' },
    { value: 'pro', label: 'Pro' },
    { value: 'team', label: 'Equipo' },
  ],
})

En fila

Las etiquetas cortas se leen mejor en una sola línea. Las largas deberían quedarse apiladas, que es lo que hacen por defecto.

Formato
choiceGroup({
  legend: 'Formato',
  name: 'form-factor',
  direction: 'row',
  value: 'desktop',
  options: ['desktop', 'mobile'],
})

Cadenas simples

Cuando el valor y la etiqueta coinciden, pasa cadenas.

Nivel de registro
choiceGroup({
  legend: 'Nivel de registro',
  name: 'log-level',
  direction: 'row',
  value: 'warn',
  options: ['info', 'warn', 'error', 'silent'],
})

Opciones deshabilitadas

Renderizado
El SSR completo necesita un servidor Node, que este proyecto no tiene.
choiceGroup({
  legend: 'Renderizado',
  name: 'renderer',
  value: 'static',
  options: [
    { value: 'static', label: 'Estático' },
    { value: 'islands', label: 'Islas de servidor' },
    { value: 'ssr', label: 'SSR completo', disabled: true },
  ],
  help: 'El SSR completo necesita un servidor Node, que este proyecto no tiene.',
})

Uno a uno

Usa radio() directamente cuando las opciones no sean lo bastante uniformes como para venir de un array — por ejemplo, cuando cada una lleva su propia descripción.

stack({ gap: 'md' },
  radio({ name: 'deploy', value: 'push', label: 'En cada push', checked: true }),
  radio({ name: 'deploy', value: 'tag', label: 'Solo en versiones etiquetadas' }),
  radio({ name: 'deploy', value: 'manual', label: 'A mano' }),
)

Colores

stack({ direction: 'row', gap: 'lg', wrap: true },
  radio({ label: 'Primary', name: 'c1', checked: true, color: 'primary' }),
  radio({ label: 'Neutral', name: 'c2', checked: true, color: 'neutral' }),
  radio({ label: 'Success', name: 'c3', checked: true, color: 'success' }),
  radio({ label: 'Warning', name: 'c4', checked: true, color: 'warning' }),
  radio({ label: 'Danger', name: 'c5', checked: true, color: 'danger' }),
)

En una tarjeta

Ajustes de compilación

Se aplican en el siguiente despliegue

URLs limpias
Imágenes
card(
  cardHeader({ title: 'Ajustes de compilación', subtitle: 'Se aplican en el siguiente despliegue' }),
  cardBody(
    stack({ gap: 'lg' },
      choiceGroup({
        legend: 'URLs limpias',
        name: 'clean-urls',
        direction: 'row',
        value: 'on',
        options: [
          { value: 'on', label: 'Sí' },
          { value: 'off', label: 'No' },
        ],
      }),
      choiceGroup({
        legend: 'Imágenes',
        name: 'images',
        value: 'optimise',
        options: [
          { value: 'optimise', label: 'Redimensionar y convertir' },
          { value: 'copy', label: 'Copiar tal cual' },
        ],
      }),
    ),
  ),
  cardFooter({ divided: true, style: 'justify-content: flex-end' },
    button({ type: 'submit' }, 'Guardar'),
  ),
)

Props

choiceGroup():

PropTipoPor defectoDescripción
legendChild—Etiqueta del grupo entero.
namestring—Nombre de formulario compartido: lo que hace exclusivos a los radios.
optionsArray[]Cadenas, u objetos { value, label, disabled }.
valuestring | number | Array—Qué opción está marcada. Un array para casillas.
type'radio' | 'checkbox''radio'Qué control se construye. También elige el rol del grupo.
direction'row' | 'column''column'Cómo se colocan las opciones.
helpChild—Pista bajo el grupo.

radio() admite las mismas props que checkbox(): label, color, checked, name, value y disabled.