Área de texto

Formularios

El área de texto es un elemento de formulario que permite la inserción de texto en varias líneas y puede contener, por defecto, un número de caracteres ilimitado.

Textarea

Mostrar parámetros

Parámetros Nunjucks del componente: "Textarea"

              params:
- name: id
  type: string
  required: true
  description: The id of the textarea.
- name: name
  type: string
  required: true
  description: The name of the textarea, which is submitted with the form data.
- name: rows
  type: string
  required: false
  description: Optional number of textarea rows (default is 5 rows).
- name: value
  type: string
  required: false
  description: Optional initial value of the textarea.
- name: describedBy
  type: string
  required: false
  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.
- name: label
  type: object
  required: true
  description: Options for the label component.
  isComponent: true
- name: hint
  type: object
  required: false
  description: Options for the hint component.
  isComponent: true
- name: errorMessage
  type: object
  required: false
  description: Options for the error message component. The error message component will not display if you use a falsy value for `errorMessage`, for example `false` or `null`.
  isComponent: true
- name: formGroup
  type: object
  required: false
  description: Options for the form-group wrapper
  params:
  - name: classes
    type: string
    required: false
    description: Classes to add to the form group (e.g. to show error state for the whole group)
- name: classes
  type: string
  required: false
  description: Classes to add to the textarea.
- name: autocomplete
  type: string
  required: false
  description: Attribute to [identify input purpose](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html), for instance "postal-code" or "username". See [autofill](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill) for full list of attributes that can be used.
- name: placeholder
  type: string
  required: false
  description: Placeholder text
- name: disabled
  type: boolean
  required: false
  description: If true, textarea will be disabled.
- name: attributes
  type: object
  required: false
  description: HTML attributes (for example data attributes) to add to the textarea.

Por defecto #

Esto es un label

Esto es una pista o texto descriptivo.

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "more-detail-a",
  "id": "more-detail-a",
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-a">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-a-hint" class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-a" name="more-detail-a" rows="5" aria-describedby="more-detail-a-hint"></textarea>
</div>
<!-- /textarea -->

Deshabilitado #

Esto es un label

Esto es una pista o texto descriptivo.

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "more-detail-b",
  "id": "more-detail-b",
  "disabled": true,
  "label": {
    "text": "Esto es un label"
  },
  "hint": {
    "text": "Esto es una pista o texto descriptivo."
  }
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="more-detail-b">Esto es un label</label>
  <!-- /label -->
  <!-- hint -->
  <p id="more-detail-b-hint" class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p>
  <!-- /hint -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="more-detail-b" name="more-detail-b" rows="5" aria-describedby="more-detail-b-hint" disabled></textarea>
</div>
<!-- /textarea -->

Con mensaje de error #

Por accesibilidad, los mensajes de error deben incluir la palabra "error", para que no recaiga tan sólo en el color el hecho de que es un mensaje de error.

Esto es un label

Error:Esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "name": "no-ni-reason",
  "id": "no-ni-reason",
  "label": {
    "text": "Esto es un label"
  },
  "errorMessage": {
    "text": "Esto es un mensaje de error"
  }
}) }}

HTML

<!-- textarea -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="no-ni-reason">Esto es un label</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="no-ni-reason-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-alert-base ring-2 ring-alert-base rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="no-ni-reason" name="no-ni-reason" rows="5" aria-errormessage="no-ni-reason-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Con valor por defecto #

Dirección completa

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "full-address-a",
  "name": "address-a",
  "value": "Calle Rosales 25. 2 izda",
  "label": {
    "text": "Dirección completa"
  }
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-a">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-a" name="address-a" rows="5">Calle Rosales 25. 2 izda</textarea>
</div>
<!-- /textarea -->

Con número de filas (rows) personalizada #

Dirección completa

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "full-address-b",
  "name": "address-b",
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="full-address-b">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="full-address-b" name="address-b" rows="8"></textarea>
</div>
<!-- /textarea -->

Con clases de form-group opcionales #

Dirección completa

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "textarea-with-page-heading-b",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "formGroup": {
    "classes": "p-base bg-primary-light"
  }
}) }}

HTML

<!-- textarea -->
<div class="c-form-group p-base bg-primary-light">
  <!-- label -->
  <label class="block" for="textarea-with-page-heading-b">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-page-heading-b" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->

Con valores de autocompletado #

Dirección completa

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "autocomplete": "street-address"
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="textarea-with-autocomplete-attribute">Dirección completa</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="textarea-with-autocomplete-attribute" name="address" rows="5" autocomplete="street-address"></textarea>
</div>
<!-- /textarea -->

Placeholder #

Valor

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "id": "con-placeholder",
  "name": "placeholder",
  "label": {
    "text": "Valor"
  },
  "placeholder": "Esto es un placeholder"
}) }}

HTML

<!-- textarea -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="con-placeholder">Valor</label>
  <!-- /label -->
  <textarea class="block mt-sm px-base py-sm border-black rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base" id="con-placeholder" name="placeholder" rows="5" placeholder="Esto es un placeholder"></textarea>
</div>
<!-- /textarea -->

Con clases de css aplicadas #

Label inline + Textarea flexible y Mensaje de error

Label inline:

Error:Esto es un mensaje de error

Mostrar código

Contenido

Nunjucks macro

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}
{{ componentTextarea({
  "formGroup": {
    "classes": "lg:flex lg:flex-wrap lg:items-start lg:gap-x-base"
  },
  "label": {
    "text": "Label inline:",
    "classes": "lg:py-sm lg:mt-sm"
  },
  "id": "classes-applied-b",
  "name": "classes-applied-b",
  "errorMessage": {
    "text": "Esto es un mensaje de error",
    "classes": "order-1 w-full pt-sm"
  },
  "classes": "lg:flex-1"
}) }}

HTML

<!-- textarea -->
<div class="c-form-group c-form-group--error lg:flex lg:flex-wrap lg:items-start lg:gap-x-base">
  <!-- label -->
  <label class="block lg:py-sm lg:mt-sm" for="classes-applied-b">Label inline:</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="classes-applied-b-error" class="block font-semibold text-alert-base order-1 w-full pt-sm">
    <span class="sr-only">Error:</span>Esto es un mensaje de error
  </p>
  <!-- /error-message -->
  <textarea class="block mt-sm px-base py-sm border-alert-base ring-2 ring-alert-base rounded-sm font-semibold leading-normal placeholder-neutral-dark focus:border-black focus:shadow-outline-focus-input focus:ring-4 focus:ring-warning-base disabled:bg-neutral-light disabled:border-neutral-base lg:flex-1" id="classes-applied-b" name="classes-applied-b" rows="5" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Componentes Índice de páginas

Área de texto

Textarea

Por defecto #

Descripción visual

Contenido

Nunjucks macro

HTML

Deshabilitado #

Descripción visual

Contenido

Nunjucks macro

HTML

Con mensaje de error #

Descripción visual

Contenido

Nunjucks macro

HTML

Con valor por defecto #

Descripción visual

Contenido

Nunjucks macro

HTML

Con número de filas (rows) personalizada #

Descripción visual

Contenido

Nunjucks macro

HTML

Con clases de form-group opcionales #

Descripción visual

Contenido

Nunjucks macro

HTML

Con valores de autocompletado #

Descripción visual

Contenido

Nunjucks macro

HTML

Placeholder #

Descripción visual

Contenido

Nunjucks macro

HTML

Con clases de css aplicadas #

Descripción visual

Contenido

Nunjucks macro

HTML