componente · @solu30/ui-kit/input

RadioGroup

Grupo de opciones excluyentes con navegación por flechas, construido sobre Radix.

2 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

carlosmartinpavon
cmp-packages

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { RadioGroup } from '@solu30/ui-kit/input'

<RadioGroup value={muelle} onValueChange={setMuelle}>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="norte" id="norte" />
    <Label htmlFor="norte">Muelle Norte</Label>
  </div>
</RadioGroup>

Escrito en el Muestrario, pendiente de mudar al @example del paquete.

Props

El catálogo no extrajo props para este símbolo, y eso admite dos lecturas: que el tipo no declare ninguna propia —heredarlas de un elemento HTML es lo normal en las piezas de composición— o que su interfaz se llame distinto y el extractor no la siga. Los filtros de columna son el segundo caso: declaran cuatro props requeridas en SelectFilterProps.

Con etiqueta asociada

Cuando cada opción del grupo necesita su propio texto clickeable — el grupo no dibuja el rótulo solo, así que el «Label» con «htmlFor» va al lado de cada ítem.

Cargando el espécimen…

export function RadioGroupPuntoEmbarque() {
  const [dock, setDock] = useState('muelle-norte')

  return (
    <div className="flex flex-col gap-1.5">
      <Label>Punto de embarque</Label>
      <RadioGroupRoot value={dock} onValueChange={setDock} className="flex flex-col gap-2">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="muelle-norte" id="muelle-norte" />
          <Label htmlFor="muelle-norte">Muelle Norte</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="muelle-sur" id="muelle-sur" />
          <Label htmlFor="muelle-sur">Muelle Sur</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="muelle-privado" id="muelle-privado" disabled />
          <Label htmlFor="muelle-privado" className="text-content/50">
            Muelle privado (requiere autorización)
          </Label>
        </div>
      </RadioGroupRoot>
      <span className="text-xs text-content/50">
        RadioGroupRoot no expone error: no hay forma de marcar el grupo inválido — KIT-023.
      </span>
    </div>
  )
}

De specimens/input.tsx · RadioGroupPuntoEmbarque: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.