Un campo de entrada optimizado para búsquedas, con iconos integrados y funcionalidad de limpieza rápida.
Search icon · Clear button · Sizes
Importa los estilos base y el componente SearchBar.
1import 'nave-ui-library/styles.css'2import { SearchBar } from 'nave-ui-library/react'La SearchBar incluye un icono de búsqueda a la izquierda y un botón para limpiar el texto que aparece automáticamente al escribir.
Disponible en tamaños small (36px) y medium (44px) para adaptarse a cabeceras o filtros.
El estado deshabilitado bloquea tanto el input como el botón de limpieza.
Todas las props disponibles para SearchBar.
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Texto del placeholder. |
size | "small" | "medium" | "medium" | Tamaño del campo de búsqueda. |
label | string | — | Etiqueta superior del campo. |
disabled | boolean | false | Deshabilita el input y el botón de limpieza. |
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}