Un control interactivo que permite al usuario alternar entre dos estados: activado o desactivado.
On · Off · Disabled
Importa los estilos base y el componente Switch.
1import 'nave-ui-library/styles.css'2import { Switch } from 'nave-ui-library/react'El Switch puede utilizarse solo o acompañado de etiquetas y descripciones.
Soporta estados deshabilitados tanto para la variante activa como inactiva.
La variante principal del Switch se expresa por tamaño: regular y small.
Todas las props disponibles para el componente Switch.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'regular' | 'small' | 'extraSmall' | — | Controls the size of the switch track and thumb. |
label | string | — | Primary label displayed next to the switch. |
description | string | — | Optional helper text displayed below the label. |
checked | boolean | false | Controls the checked state of the switch. |
disabled | boolean | — | Disables the switch and prevents user interaction. |
defaultChecked | boolean | false | Initial checked state in uncontrolled mode. |
onCheckedChange | (checked: boolean) => void | — | Callback fired when checked state changes. |
label | string | — | Etiqueta del switch. |
description | string | — | Descripción debajo de la etiqueta. |
disabled | boolean | — | Deshabilita el control. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Switch",3 "description": "Switch toggle para activar/desactivar opciones.",4 "component": "Switch",5 "files": [6 "components/base/data-entry/selection-controls/Switch.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-switch",11 "class-variance-authority"12 ],13 "void": true,14 "props": {15 "size": {16 "type": "'regular' | 'small' | 'extraSmall'",17 "description": "Controls the size of the switch track and thumb."18 },19 "label": {20 "type": "string",21 "description": "Primary label displayed next to the switch."22 },23 "description": {24 "type": "string",25 "description": "Optional helper text displayed below the label."26 },27 "checked": {28 "type": "boolean",29 "default": false,30 "description": "Controls the checked state of the switch."31 },32 "disabled": {33 "type": "boolean",34 "description": "Disables the switch and prevents user interaction."35 },36 "defaultChecked": {37 "type": "boolean",38 "default": false,39 "description": "Initial checked state in uncontrolled mode."40 },41 "onCheckedChange": {42 "type": "(checked: boolean) => void",43 "description": "Callback fired when checked state changes."44 }45 },46 "states": {47 "unchecked": {},48 "checked": {},49 "disabled": {}50 }51}