componente · @solu30/ui-kit/input

OptionCardGroup

Radiogroup wrapper for <OptionCardItem> — exclusive selection among rich option cards (icon + title + description), fully keyboard-accessible.

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

cmp-packages
gestorsalon
luigi
raquetea

La parte, adentro de su padre

Cargando el espécimen…

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

OptionCardGroup es una parte de OptionCard: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

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

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	opcional	`string`	Controlled selected value.
defaultValue	opcional	`string`	Initial value for uncontrolled mode.
onValueChange	opcional	`(value: string) => void`	Called when the selected option changes.
disabled	opcional	`boolean`	Disables all items in the group.

Selección única

Cuando las tarjetas son mutuamente excluyentes y necesitan navegación con flechas entre ellas — un radiogroup real armado con tarjetas ricas en vez de círculos, para cuando el usuario tiene que elegir exactamente una opción con contexto visual.

Cargando el espécimen…

export function OptionCardGrupo() {
  const [modo, setModo] = useState('guest')

  return (
    <div className="flex flex-col gap-1.5">
      <span className="text-xs text-content/50">
        OptionCardGroup — un radiogroup de verdad: flechas para moverse, una sola opción activa
      </span>
      <OptionCardGroup
        value={modo}
        onValueChange={setModo}
        className="grid gap-2 sm:grid-cols-3"
        aria-label="Modo de asignación del menú"
      >
        {OPCIONES_MENU.map((o) => (
          <OptionCardItem
            key={o.value}
            value={o.value}
            title={o.title}
            description={o.description}
            icon={o.icon}
          />
        ))}
      </OptionCardGroup>
      <span className="font-mono text-[11px] text-content/40">value = {modo}</span>
    </div>
  )
}

De specimens/input.tsx · OptionCardGrupo: 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.

Ejemplo del paquete

<OptionCardGroup value={mode} onValueChange={setMode} className="grid gap-2 sm:grid-cols-3" aria-label="Modo de asignación">
  <OptionCardItem value="admin" title="Menú único" description="Vos asignás el mismo menú a todos." />
  <OptionCardItem value="guest" title="Cada invitado elige" description="Vía portal." />
</OptionCardGroup>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.