Text area
Los text areas permiten ingresar múltiples líneas de texto. Dependiendo del texto que ingrese el usuario, y si no está delimitado por un número de palabras, los text areas se pueden dimensionar.
Recomendaciones de uso
¿Qué hacer?
- Usar cuando la información que solicitamos del usuario es larga.
- Incluir un label para informar al usuario sobre qué tipo de información estamos buscando.
- Los textos deben ser oraciones completas.
¿Qué no hacer?
- No utilizar para textos cortos, en ese caso usar un input.
Estados
- Stanby: es el text area en su estado normal o reposo.
- Hover: al pasar por encima del text area esté se activará mostrandonos un cursor.
- Focus: es el estado que nos marca con qué elemento estamos interactuando.
- Active:: nos marca cuando estamos completando el text area.
- Filled: es es estado del text area cuando está completado por el usuario.
- Required: nos marca cuando un campo es obligatorio.
- Disabled: es el estado desactivado del text area.
- Error: nos marca cuando hemos introducido mal algun dato en el campo. Nos informa del error y contiene un texto de ayuda.
Si se van a colocar sobre un fondo oscuro, se utilizarán en el color inverso; si van sobre un fondo claro utilizarán en el color default del theme.
- Modo Default
- Modo Inverse
Estilos
Color
- Modo Default
| Nombre | Propiedad | Color token |
|---|---|---|
| Text area | Background | $transparent |
| Text area:label | text color | $text-01 |
| Text area: placehoder | text color | $text-04 |
| Text area:strokes | Stroke | $UI-06 |
Interactive Color
| Nombre | Propiedad | Color token |
|---|---|---|
| Focus | Stroke | $focus-01 |
| Active:placeholder | text color | $text-01 |
| Error | color | $support-01 |
| Disabled | color | $disabled-04 |
- Modo Inverse
| Nombre | Propiedad | Color token |
|---|---|---|
| Text area | Background | $transparent |
| Text area:label | text color | $inverse-01 |
| Text area: placehoder | text color | $inverse-01 |
| Text area: strokes | Stroke | $inverse-01 |
- Interactive Color
| Nombre | Propiedad | Color token |
|---|---|---|
| Focus | Stroke | $focus-01 |
| Error | color | $support-01 |
| Disabled | color | $disabled-03 |
Tipografía
| Nombre | Tamaño fuente | Font weight | Estilo |
|---|---|---|---|
| Text area:label L | 13/0.813 | Regular/400 | $tiny-M |
| Text area: label M | 13/0.813 | Regular/400 | $tiny-M |
| Text area: label S | 13/0.813 | Regular/400 | $tiny-M |
| Text area: placeholder L | 15/0.938 | Regular/400 | $body-inline |
| Text area: placeholder M | 13/0.813 | Regular/400 | $body-inline |
| Text area: placeholder S | 13/0.813 | Regular/400 | $body-inline |
| Text area: help-text L | 13/0.813 | Regular/400 | $tiny-M |
| Text area: help-text M | 13/0.813 | Regular/400 | $tiny-M |
| Text area: help-text S | 13/0.813 | Regular/400 | $tiny-M |
Estructura
