componente · @solu30/ui-kit/feedback
DropdownMenuCheckboxItem
A toggleable menu item that keeps the menu open on selection (multi-select).
Seguir leyendo — 2 párrafos más
Built on RadixDropdownMenu.CheckboxItem — Radix sets role="menuitemcheckbox" and aria-checked automatically; do not override those attributes.
The checked indicator renders as a switch-style track+thumb (visual only). Layout: [icon?] [label flex-1] [switch-indicator]
2 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.
- cmp-packages
- gestorsalon
La parte, adentro de su padre
Cargando el espécimen…
export function DropdownMenuMatrix() {
return (
<Stage label="DropdownMenu · acciones vs. checkboxes" tall wide>
<div className="flex flex-col items-center gap-3">
<Row>
<DropdownMenuAcciones />
<DropdownMenuCheckboxes />
</Row>
</div>
</Stage>
)
}De specimens/feedback.tsx · DropdownMenuMatrix: 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.
DropdownMenuCheckboxItem es una parte de DropdownMenu: 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 { DropdownMenuCheckboxItem } from '@solu30/ui-kit/feedback'Props
| Prop | Requerida | Tipo | Qué hace |
|---|---|---|---|
| checked | sí | boolean | — |
| onCheckedChange | sí | (checked: boolean) => void | — |
| children | sí | ReactNode | — |
| icon | opcional | ReactNode | — |
| disabled | opcional | boolean | — |
| closeOnSelect | opcional | boolean | When true the menu closes after toggling (default Radix behaviour). Default: false — keeps the menu open for multi-select workflows. |
| className | opcional | string | — |
Ejemplo del paquete
const [showStock, setShowStock] = useState(false)
<DropdownMenuCheckboxItem
checked={showStock}
onCheckedChange={setShowStock}
icon={<PackageIcon size={14} />}
>
Mostrar stock
</DropdownMenuCheckboxItem>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.