Molecules

Radio Button

Permite selección única y exclusiva de una opción en un grupo. Solo puede haber una opción seleccionada a la vez dentro del mismo grupo. 12 variantes en Figma (node 40000831:22323).

Extraído12 variantes — Figma: ⏺ Radio button (node 40000831:22323)

Preview

Grupo seleccionable

Opción A — visita domiciliaria

Opción B — visita telefónica

Opción C — visita digital

Estados especiales

Disabled unselected

Disabled selected

Error state

Estados

Unselected

Borde gris, sin punto interior

Selected

Borde verde brand-primary + punto interior verde

Disabled

Opacidad 40%, no interactuable

Error

Borde rojo semantic.feedback.error

Reglas de uso

✓ Do

Usa para selección única y exclusiva (una sola respuesta posible)

Muestra todas las opciones visibles — no en dropdown si son 6 o menos

Agrupa con fieldset + legend descriptivo

Ordena las opciones de más a menos probable, o alfabéticamente

✗ Don't

No uses para selección múltiple — usa Checkbox

No dejes ninguna opción preseleccionada si el usuario debe elegir conscientemente

No uses si hay más de 6 opciones — usa un Select/Dropdown

No mezcles radio buttons de diferentes grupos visualmente

Props API

interface RadioGroupProps {
  name: string                // Agrupa los radios del mismo set
  value: string               // Valor actualmente seleccionado
  options: { value: string; label: string; disabled?: boolean }[]
  onChange: (value: string) => void
  error?: string              // Mensaje de error del grupo
}

/* HTML semántico */
<fieldset>
  <legend>Tipo de visita</legend>
  {options.map(opt => (
    <label key={opt.value}>
      <input
        type="radio"
        name={name}
        value={opt.value}
        checked={value === opt.value}
        disabled={opt.disabled}
        onChange={() => onChange(opt.value)}
      />
      {opt.label}
    </label>
  ))}
</fieldset>