Índice de Kit UI

Grupo de radio.

Patrón canónico de grupo de radio para cuenta, admin, usaia, firmas y documentos.

Verlo por niveles

Primero el componente, después la variación de marca y finalmente su uso dentro de una página.

Ver y copiar el código de este render

HTML del nivel canónico

<fieldset class="ui-sample ui-form ui-radio-group"><legend>Formato de descarga</legend><div><label><input type="radio" name="format-0" checked="" value="csv"/><span>CSV</span></label><label><input type="radio" name="format-0" value="json"/><span>JSON</span></label><label><input type="radio" name="format-0" value="xlsx"/><span>XLSX</span></label></div></fieldset>

Variaciones por marca y sitio

Cada cambio visible declara su autoridad; lo que permanece canónico no se vuelve a inventar en el producto.

innovacionsantiago.cl

Compañía de Innovación de Santiago

Autoridad: CONSTITUTION.md + LOGOS-CANONICOS.md

Formato de descarga

CSVJSONXLSX

Cambia en esta marca

Navegación y contenido propios del servicio
Acento reservado para acciones y datos

Permanece canónico

Mark CIS y namebrand de tres líneas
IBM Plex Sans, foco, espaciado y anatomía

circulodesantiago.cl

Círculo de Santiago

Autoridad: core-style/DECISIONES.md M10 y LOGOS-CANONICOS.md

Formato de descarga

CSVJSONXLSX

Cambia en esta marca

Mark circular y namebrand Círculo de Santiago en caja normal
Contenido societario y navegación propia

Permanece canónico

Misma estructura, orden de cuenta y footer
Tipografía, foco y comportamiento canónicos

Comparación histórica recuperable

Compara la propuesta con cortes reales del repositorio. La ausencia de una muestra se declara y nunca se reconstruye de memoria.

Preparando comparación histórica…

Antes / r19

La comparación convierte una regla abstracta en una diferencia visible y verificable.

r19 · correctoContrato canónico renderizado

Formato de descarga

CSVJSONXLSX

Usa HTML semántico, foco visible y estados explícitos.
Conserva contenido útil a 320 px y sin JavaScript.

Antes · problema observadoAnti-ejemplo no interactivo

correo@ejemplo.cl!Algo salió mal

No agregues sombras, radios ni franjas laterales decorativas.
No uses color, placeholder o icono como única explicación.

Responsive

La misma anatomía debe conservar lectura, foco y acciones sin cortar contenido ni crear scroll horizontal en la página.

Cobertura

Dimensión	Contrato
Propietario canónico	Sistema de diseño CIS y cis-auth · core/core-style
Consumidores	Cuenta, Admin, usaia, Firmas y Documentos
Dependencias	HTML nativo, validación de servidor
Estado	candidato

Evidencia de adopción

Patrón propuesto. 0 implementaciones observadas en 0 repositorios.

La observación demuestra uso existente; la aceptación canónica sigue dependiendo de esta ficha y de su propietario.

Dato	Resultado
Clasificación	Patrón propuesto
Implementaciones	0 implementaciones observadas
Repositorios	Ningún repositorio observado
Snapshot	kit/componentes/componentes-observados.json

Consumidores observados

El inventario conserva repositorio, archivo fuente y criterio de asociación. Observar una implementación no la convierte automáticamente en canónica.

Ver implementaciones asociadas a Grupo de radio

Estados

Estado requerido
vacío
completo
inválido
disabled

Accesibilidad

Conserva nombre accesible, orden de lectura y foco visible.
Funciona a 320 px, con zoom de 200% y texto largo.
El color nunca es la única señal de estado o acción.
El contenido esencial permanece disponible sin JavaScript.

Código HTML

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<fieldset class="ui-sample ui-form ui-radio-group"><legend>Formato de descarga</legend><div><label><input type="radio" name="format-0" checked="" value="csv"/><span>CSV</span></label><label><input type="radio" name="format-0" value="json"/><span>JSON</span></label><label><input type="radio" name="format-0" value="xlsx"/><span>XLSX</span></label></div></fieldset>

Código TAILWIND

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

<fieldset class="ui-sample ui-form ui-radio-group border border-slate-300 bg-white p-4 text-slate-950 grid gap-3"><legend>Formato de descarga</legend><div><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="radio" name="format-0" checked="" value="csv"/><span>CSV</span></label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="radio" name="format-0" value="json"/><span>JSON</span></label><label><input class="border border-slate-400 bg-white px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2" type="radio" name="format-0" value="xlsx"/><span>XLSX</span></label></div></fieldset>

Código REACT

Copia el bloque completo; después cambia contenido y destinos, no su anatomía.

Código de referencia

import type { ChangeEventHandler } from "react";

export interface RadioGroupOption {
  /** Texto visible de la opción. */
  label: string;
  /** Valor enviado con el formulario. */
  value: string;
  disabled?: boolean;
}

export interface RadioGroupProps {
  /** Título del grupo. */
  legend?: string;
  /** Nombre compartido por los radios del grupo. Usa uno distinto por grupo en la página. */
  name?: string;
  options?: RadioGroupOption[];
  /** Valor marcado al inicio en un grupo no controlado. */
  defaultValue?: string;
  /** Valor marcado en un grupo controlado; va junto con `onChange`. */
  value?: string;
  onChange?: ChangeEventHandler<HTMLInputElement>;
  className?: string;
}

/**
 * Grupo de radios con título, para elegir una sola opción entre pocas visibles a la vez.
 *
 * @example <RadioGroup name="formato" legend="Formato de descarga" options={[{ label: "CSV", value: "csv" }, { label: "JSON", value: "json" }]} defaultValue="csv" />
 * @example <RadioGroup name="formato" value={formato} onChange={(e) => elegir(e.target.value)} />
 */
export function RadioGroup({
  legend = "Formato de descarga",
  name = "format-0",
  options = [
    { label: "CSV", value: "csv" },
    { label: "JSON", value: "json" },
    { label: "XLSX", value: "xlsx" },
  ],
  defaultValue = "csv",
  value,
  onChange,
  className,
}: RadioGroupProps) {
  const controlado = value !== undefined && onChange !== undefined;
  const marcado = value ?? defaultValue;
  return (
    <fieldset className={["ui-form ui-radio-group", className].filter(Boolean).join(" ")}>
      <legend>{legend}</legend>
      {options.length ? (
        <div>
          {options.map((opcion) => (
            <label key={opcion.value}>
              <input
                name={name}
                type="radio"
                value={opcion.value}
                disabled={opcion.disabled}
                onChange={onChange}
                {...(controlado ? { checked: opcion.value === value } : { defaultChecked: opcion.value === marcado })}
              />
              <span>{opcion.label}</span>
            </label>
          ))}
        </div>
      ) : null}
    </fieldset>
  );
}