Componente fundamental para la identificación de campos. Implementa gestión inteligente de estados y tipografía mediante el sistema de tokens dinámicos.
Standalone · Form integration · Auto-disabled
Importa los estilos base y el componente Label.
1import 'nave-ui-library/styles.css'2import { Label } from 'nave-ui-library/react'Por defecto, el Label hereda la semántica de la marca, aplicando font-weight y letter-spacing desde los tokens.
Al usar htmlFor, el Label actúa como disparador de foco, optimizando la superficie de interacción.
El Label reacciona al contexto: detecta si sus componentes hermanos (peer) o su contenedor padre (group) están deshabilitados.
Props disponibles para el componente Label.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenreq | ReactNode | — | Texto del label. |
htmlFor | string | — | ID del input asociado para vincular foco. |
className | string | — | Clases CSS adicionales. |
1{2 "name": "Label",3 "description": "Label para inputs y formularios.",4 "component": "Label",5 "files": [6 "components/base/data-entry/inputs/Label.tsx"7 ],8 "dependencies": [9 "react",10 "@radix-ui/react-label"11 ],12 "props": {13 "htmlFor": {14 "type": "string",15 "description": "ID of the input element."16 }17 }18}