Un control que permite al usuario seleccionar una o más opciones de un conjunto.
Checked · Indeterminate · Disabled
Importa los estilos base y el componente Checkbox.
1import 'nave-ui-library/styles.css'2import { Checkbox } from 'nave-ui-library/react'Checkboxes simples para selección individual, con soporte para etiquetas y descripciones.
Soporta estados deshabilitados e indeterminados para selecciones parciales.
La variante principal del componente se expresa por tamaño: regular (24px) y small (24px).
Todas las props disponibles para el componente Checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Main label text displayed next to the checkbox. |
description | string | — | Optional helper text displayed below the label. |
size | 'regular' | 'small' | 'extraSmall' | regular | Controls the checkbox size and text scale. |
checked | boolean | 'indeterminate' | false | Controls the checked state of the checkbox. |
disabled | boolean | false | Disables the checkbox interaction. |
defaultChecked | boolean | false | Initial checked state in uncontrolled mode. |
onCheckedChange | (checked: boolean | 'indeterminate') => void | — | Callback fired when checked state changes. |
label | string | — | Etiqueta del checkbox. |
description | string | — | Descripción debajo de la etiqueta. |
checked | boolean | "indeterminate" | — | Estado de selección. |
disabled | boolean | — | Deshabilita el checkbox. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Checkbox",3 "description": "Checkbox para selección múltiple con soporte para estados indeterminado.",4 "component": "Checkbox",5 "files": [6 "components/base/data-entry/selection-controls/Checkbox.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-checkbox",11 "class-variance-authority",12 "lucide-react"13 ],14 "void": true,15 "props": {16 "label": {17 "type": "string",18 "description": "Main label text displayed next to the checkbox."19 },20 "description": {21 "type": "string",22 "description": "Optional helper text displayed below the label."23 },24 "size": {25 "type": "'regular' | 'small' | 'extraSmall'",26 "default": "regular",27 "description": "Controls the checkbox size and text scale."28 },29 "checked": {30 "type": "boolean | 'indeterminate'",31 "default": false,32 "description": "Controls the checked state of the checkbox."33 },34 "disabled": {35 "type": "boolean",36 "default": false,37 "description": "Disables the checkbox interaction."38 },39 "defaultChecked": {40 "type": "boolean",41 "default": false,42 "description": "Initial checked state in uncontrolled mode."43 },44 "onCheckedChange": {45 "type": "(checked: boolean | 'indeterminate') => void",46 "description": "Callback fired when checked state changes."47 }48 },49 "states": {50 "unchecked": {},51 "checked": {},52 "indeterminate": {},53 "disabled": {}54 }55}