componente · @solu30/ui-kit/input

OptionCardItem

A single option within an <OptionCardGroup>. Must be a direct/indirect child of it.

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…

export function OptionCardMatrix() {
  return (
    <Stage label="OptionCardGroup + OptionCardItem · selección exclusiva, y OptionCard suelta" tall wide>
      <div className="flex w-full max-w-[560px] flex-col gap-4">
        <OptionCardGrupo />
        <OptionCardSuelta />
      </div>
    </Stage>
  )
}

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

OptionCardItem 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 { OptionCardItem } from '@solu30/ui-kit/input'

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
value	sí	`string`	The value this item represents. Required.
title	sí	`string`	—
description	opcional	`ReactNode`	Ver ADR-338: acepta nodos para descripciones de más de una línea.
icon	opcional	`ReactNode`	—

Ejemplo del paquete

// La versión de radio: va adentro de un OptionCardGroup y el grupo lleva el estado.
<OptionCardGroup value={plan} onValueChange={setPlan}>
  <OptionCardItem value="mensual" title="Mensual" description="Se renueva cada 30 días" />
</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.