import { Story, Canvas, Preview, ArgsTable } from '@storybook/addon-docs';
import image1 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/01_Texto_CampoTexto.png';
import image2 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/02_Texto_TextArea.png';
import image3 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/03_Texto_Password.png';
import image4 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/04_Texto_CampoTexto_32px.png';
import image5 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/05_Texto_CampoTexto_40px.png';
import image6 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/06_Texto_CampoTexto_48px.png';
import image7 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/07_Texto_CampoTexto_Normal.png';
import image8 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/08_Texto_CampoTexto_Light.png';
import image9 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/09_Texto_Anatomia_CampoTexto.png';
import image10 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/10_Texto_Anatomia_TextArea.png';
import image11 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/11_Texto_Anatomia_Altura.png';
import image12 from '../../stories/assets/Docum_SDSS_Componentes/03_Campo_de_texto/12_Texto_Estados.png';
# Campo de texto / Text input
El campo de texto permite al usuario **introducir la información** que el sistema requiera. El campo se presenta en la longitud más adecuada para la introducción de datos, y su tamaño se adapta para la cantidad de información esperada.
El campo de texto no se debe usar cuando se requiera un dato de formato cifra, dado que para ello existe el campo de tipo numérico, o cuando se conocen las posibles respuestas, dado que para ello se debe usar otros componentes como los botones de radio, selector desplegable…
### Variaciones
Las principales variaciones son el campo de texto básico y el área de texto, dependiendo esencialmente de la longitud del texto introducido.
| Campo de texto | Área de texto |
|-------------------------|------------------------|
| | |
El **campo de texto** básico (text input o text field) se usa cuando la información esperada ocupa una línea simple de texto, mientras que el **área de texto** (text area) se emplea cuando el texto esperado ocupa un párrafo y muestra varias líneas para la introducción del texto.
El área de texto puede llevar asociado un **contador** de palabras que indican la longitud del contenido. Es bastante excepcional usar un elemento similar en el campo de texto.
Además, existen variaciones de **altura** del componente. El campo de texto normal es de altura media, el campo de texto alto es de altura mayor y el estrecho tiene una altura menor.
| **Campo de texto** **estrecho** | **Campo de texto** **normal** (por defecto) | **Campo de texto** **alto** |
|-------------------------|------------------------|------------------------|
| | | |
Por último, hay una variación con respecto al **color del fondo** que permite integrar el componente en bloques con un color de fondo blanco y que el campo de texto no destaque, o gris (o similares) y queramos que el contraste sea equivalente al campo de texto normal sobre fondo blanco.
| **Campo de texto normal** (por defecto) | **Campo de texto claro** (light) |
|-------------------------|------------------------|
| | |
### Contenido
Cuando sea posible, se recomienda **prerellenar** el campo de texto con el valor esperado que sirva de asistencia al usuario, ahorrar tiempo y reducir errores Si no se conoce se recomienda utilizar autocompletado del texto que se va introduciendo.
La **validación** de tiempo real ayuda a aligerar el proceso y mantener los datos limpios cuando el usuario completa formularios.
Los campos de texto pueden a veces tener un límite de número de caracteres. En estos casos se recomienda usar el **contador** de caracteres para indicar al usuario el límite y los caracteres introducidos mientras rellena el campo correspondiente.
Adicionalmente, los campos de texto pueden tener un **texto de ayuda** con información de valor para completar el campo. Este texto de ayuda debe ser visible cuando se está escribiendo en el campo y habitualmente se posiciona debajo del mismo.
### Anatomía
El campo de texto se fundamenta en una **caja** preparada para que el usuario introduzca el texto.
Las dimensiones de la caja están definidas para contener un **texto** con un tipo de letra por defecto, esto es Lato 16px regular. El padding de la caja respecto al texto sigue los principios de espaciado definidos.
| Campo de texto | Área de texto |
|-------------------------|------------------------|
| | |
Adicionalmente utilizaremos una **etiqueta** como guía al usuario de la información requerida. Las etiquetas deben ser claramente visibles cuando el usuario vaya a introducir la información.
Como método alternativo a las etiquetas, y para ahorrar espacio, se puede presentar un **texto de ejemplo** (placeholder) dentro del campo, con pistas o ejemplos de la información esperada. Este texto desaparece cuando el usuario comienza a escribir los datos. Esta práctica no es muy recomendada dado que oculta el contexto y presenta problemas de accesibilidad.
Los campos de texto se pueden presentar en 3 formatos según su **altura**. El campo de texto por defecto tiene un alto de 40px, el mas alto de 48px y el más estrecho de 32px.
### Comportamiento
Al clicar en la caja de texto se permite la entrada de información mediante el teclado.
El campo de texto puede tener los **estados** enabled, hover, focus, active, filled, disabled, error y skeleton.
### Código
```