El Text Input es un campo interactivo que le permite a los usuarios ingresar, editar o visualizar texto dentro de formularios, búsquedas o flujos de carga de datos.
Label · Placeholder · Helper Text
Importa los estilos base y el componente Input.
1import 'nave-ui-library/styles.css'2import { Input } from 'nave-ui-library/react'El input estándar incluye soporte para etiquetas (labels) y textos de ayuda (helper text) integrados.
Manejo de validación mediante la prop error y estados de lectura mediante disabled.
Disponible en tamaño mediano (por defecto) y pequeño para interfaces más densas.
Todas las props disponibles para el componente Input.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | — | Size of the input. |
error | boolean | — | Whether the input has an error. |
helperText | string | — | Helper text for the input. |
label | string | — | Label for the input. |
placeholder | string | — | Placeholder text for the input. |
disabled | boolean | — | Whether the input is disabled. |
label | string | — | Etiqueta del campo. |
helperText | string | — | Texto de ayuda debajo del campo. |
error | boolean | — | Estado de error visual. |
disabled | boolean | — | Deshabilita el campo. |
tokens | Partial<ThemeTokensBase> | — | Override local de tema/tokens. |
1{2 "name": "Input",3 "description": "Campo de entrada de texto con soporte para estados y validación.",4 "component": "Input",5 "files": [6 "components/base/data-entry/inputs/Input.tsx"7 ],8 "dependencies": [9 "react",10 "class-variance-authority"11 ],12 "void": true,13 "props": {14 "size": {15 "type": "'small' | 'medium'",16 "description": "Size of the input."17 },18 "error": {19 "type": "boolean",20 "description": "Whether the input has an error."21 },22 "helperText": {23 "type": "string",24 "description": "Helper text for the input."25 },26 "label": {27 "type": "string",28 "description": "Label for the input."29 },30 "placeholder": {31 "type": "string",32 "description": "Placeholder text for the input."33 },34 "disabled": {35 "type": "boolean",36 "description": "Whether the input is disabled."37 }38 }39}