## Input
Ingresa datos usando el ratón o teclado.
### Uso básico
:::demo
```html
```
:::
### Disabled
:::demo Deshabilite el Input con el atributo `disabled`.
```html
```
:::
### Input con icono
Añada un icono para indicar el tipo de Input.
:::demo Para añadir iconos en el Input, puede utilizar los atributos `prefix-icon` y `suffix-icon` . Además, los slots con nombre `prefix` y `suffix` también funcionan.
```html
Using attributes
Using slots
```
:::
### Textarea
Redimensiona para introducir varias líneas de información de texto. Agrege el atributo `type="textarea"` para cambiar el `input` al tipo nativo `textarea`.
:::demo Controle la altura ajustando el prop `rows`.
```html
```
:::
### Textarea tamaño automatico
El ajuste del prop `autosize` en el tipo de Input textarea hace que la altura se ajuste automáticamente en función del contenido. Se puede proporcionar opciones en un objeto para autodimensionar y especificar el número mínimo y máximo de líneas que el textarea puede ajustar automáticamente.
:::demo
```html
```
:::
### Mezclando elementos con input
Añade un elemento antes o después del input, generalmente una etiqueta o un botón.
:::demo Utilice el `slot` para seleccionar si el elemento se colocara antes (prepend) o después (append) del Input.
```html
Http://
.com
```
:::
### Tamaño
:::demo Añada el atributo `size` para cambiar el tamaño del Input. Además del tamaño predeterminado, hay otras tres opciones: `large`, `small` y `mini`.
```html
```
:::
### Autocompletado
Puede obtener algunas sugerencias basadas en la entrada actual.
:::demo El componente Autocomplete proporciona sugerencias de entrada. El atributo `fetch-suggestions` es un método que devuelve la entrada sugerida. En este ejemplo, `querySearch(queryString, cb)` devuelve las sugerencias al componente mediante `cb(data)` cuando están listas.
```html
list suggestions when activated
list suggestions on input
```
:::
### Template personalizado
Personalice cómo se muestran las sugerencias.
:::demo Utilice `scoped slot` para personalizar los elementos de sugerencias. En el scope, puede acceder al objeto de sugerencia mediante la clave `item`.
```html
{{ item.value }}
{{ item.link }}
```
:::
### Búsqueda remota
Búsqueda de datos desde el servidor.
:::demo
```html
```
:::
### Input atributos
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
| type | tipo de input | string | text, textarea y otros [tipos de entrada nativos](https://developer.mozilla.org/es/docs/Web/HTML/Elemento/input#Form_%3Cinput%3E_types) | text |
| value | valor enlazado | string / number | — | — |
| maxlength | igual que `maxlength` en el input nativo | number | — | — |
| minlength | igual que `minlength` en el input nativo | number | — | — |
| placeholder | placeholder del Input | string | — | — |
| disabled | si esta deshabilitado | boolean | — | false |
| size | tamaño del input, esto no funciona cuando `type` no es textarea | string | medium / small / mini | — |
| prefix-icon | clase del icono de prefijo | string | — | — |
| suffix-icon | clase del icono de sufijo | string | — | — |
| rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 |
| autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false |
| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off |
| auto-complete | @DEPRECATED en el proximo cambio mayor de version | string | on/off | off |
| name | igual que `name` en el input nativo | string | — | — |
| readonly | igual que `readonly` en el input nativo | boolean | — | false |
| max | igual que `max` en el input nativo | — | — | — |
| min | igual que `min` en el input nativo | — | — | — |
| step | igual que `step` en el input nativo | — | — | — |
| resize | control para el dimensionamiento | string | none, both, horizontal, vertical | — |
| autofocus | igual que `autofocus` en el input nativo | boolean | — | false |
| form | igual que `form` en el input nativo | string | — | — |
| label | texto de la etiqueta | string | — | — |
| tabindex | orden de tabulacion para el Input | string | - | - |
### Input slots
| Nombre | Descripción |
| ------- | ------------------------------------ |
| prefix | contenido como prefijo del input |
| suffix | contenido como sufijo del input |
| prepend | contenido antes del input |
| append | contenido a añadir después del input |
### Input eventos
| Nombre | Descripción | Parametros |
| ------ | ------------------------------------------------------------------------------------------ | ------------------------- |
| blur | Se dispara cuando se pierde el foco | (event: Event) |
| focus | Se dispara cuando se obtiene el foco | (event: Event) |
| change | se activa cuando cambia el valor de entrada | (value: string \| number) |
| clear | se dispara cuando la entrada es borrada por el botón generado por el atributo "clearable". | — |
### Input Metodo
| Metodo | Descripción | Parametros |
| ------ | ----------------------------- | ---------- |
| focus | coloca el foco en el elemento | — |
| blur | quita el foco del elemento | — |
| select | selecciona el texto del input | — |
### Autocomplete Atributos
| Atributo | Descripción | Tipo | Opciones | Por defecto |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | -------------------------------------------------------------- | ------------ |
| placeholder | el placeholder del Autocomplete | string | — | — |
| disabled | si el Autocompete esta deshabilitado | boolean | — | false |
| value-key | nombre del campo del objeto de sugerencia del input para la visualización | string | — | value |
| icon | nombre del icono | string | — | — |
| value | valor enlazado | string | — | — |
| debounce | retardo al escribir, en milisegundos | number | — | 300 |
| placement | ubicación del menú emergente | string | top / top-start / top-end / bottom / bottom-start / bottom-end | bottom-start |
| fetch-suggestions | un método para obtener las sugerencias del input. Cuando las sugerencias estén listas, invocar `callback(data:[])` para devolverlas a Autocomplete | Function(queryString, callback) | — | — |
| popper-class | nombre personalizado de clase para el dropdown de autocomplete | string | — | — |
| trigger-on-focus | si se deben mostrar sugerencias cuando el input obtiene el foco | boolean | — | true |
| name | igual que `name` en el input nativo | string | — | — |
| select-when-unmatched | si se emite un evento `select` al pulsar enter cuando no hay coincidencia de Autocomplete | boolean | — | false |
| label | texto de la etiqueta | string | — | — |
| prefix-icon | prefix icon class | string | — | — |
| suffix-icon | suffix icon class | string | — | — |
| hide-loading | si se debe ocultar el icono de loading en la búsqueda remota | boolean | — | false |
| popper-append-to-body | si añadir el desplegable al cuerpo. Si la posición del menú desplegable es incorrecta, puede intentar establecer este prop a false | boolean | - | true |
| validate-event | si se debe lanzar la validación de formulario | boolean | - | - |
### Autocomplete Slots
| Nombre | Descripción |
| ------- | ------------------------------------ |
| prefix | contenido como prefijo del input |
| suffix | contenido como sufijo del input |
| prepend | contenido antes del input |
| append | contenido a añadir después del input |
### Autocomplete Scoped Slot
| Name | Description |
| ---- | ---------------------------------------------------------------------------------------- |
| — | Contenido personalizado para el input de sugerencias. El parametro del scope es { item } |
### Autocomplete Eventos
| Nombre | Descripción | Parametros |
| ------ | ------------------------------------------------ | ------------------------------------------- |
| select | se dispara cuando se hace click a una sugerencia | sugerencia en la que se está haciendo click |
### Autocomplete Metodo
| Metodo | Descripción | Parametros |
| ------ | ----------------------------- | ---------- |
| focus | coloca el foco en el elemento | — |