desy-html

Textarea

Parámetros Nunjucks del componente: "Textarea". Versión: 13.0.2

Los parámetros de Nunjucks para este componente están dentro de la siguiente etiqueta code en formato yaml.

        {"val":"params:\n- name: id\n  type: string\n  required: true\n  description: The id of the textarea.\n- name: name\n  type: string\n  required: true\n  description: The name of the textarea, which is submitted with the form data.\n- name: rows\n  type: string\n  required: false\n  description: Optional number of textarea rows (default is 5 rows).\n- name: value\n  type: string\n  required: false\n  description: Optional initial value of the textarea.\n- name: describedBy\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-describedby` attribute, used to provide additional descriptive information for screenreader users.\n- name: label\n  type: object\n  required: true\n  description: Options for the label component.\n  isComponent: true\n- name: hint\n  type: object\n  required: false\n  description: Options for the hint component.\n  isComponent: true\n- name: errorMessage\n  type: object\n  required: false\n  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`.\n  isComponent: true\n- name: formGroup\n  type: object\n  required: false\n  description: Options for the form-group wrapper\n  params:\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the form group (e.g. to show error state for the whole group)\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the textarea.\n- name: autocomplete\n  type: string\n  required: false\n  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.\n- name: placeholder\n  type: string\n  required: false\n  description: Placeholder text\n- name: disabled\n  type: boolean\n  required: false\n  description: If true, textarea will be disabled.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the textarea.","length":2169}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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."
  }
}) }}

Esto es una pista o texto descriptivo.

Mostrar códigodel ejemplo: Por defecto

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."
  }
}) }}

Deshabilitado

Ejemplo: "Deshabilitado", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Deshabilitado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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."
  }
}) }}

Esto es una pista o texto descriptivo.

Mostrar códigodel ejemplo: Deshabilitado

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."
  }
}) }}

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.

Ejemplo: "Con mensaje de error", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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-black rounded 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 border-alert-base ring-2 ring-alert-base " id="no-ni-reason" name="no-ni-reason" rows="5" aria-errormessage="no-ni-reason-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
  }
}) }}

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con mensaje de error

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"
  }
}) }}

Con valor por defecto

Ejemplo: "Con valor por defecto", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Con valor por defecto", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
  }
}) }}
Mostrar códigodel ejemplo: Con valor por defecto

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"
  }
}) }}

Con número de filas (rows) personalizada

Ejemplo: "Con número de filas (rows) personalizada", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Con número de filas (rows) personalizada", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "full-address-b",
  "name": "address-b",
  "label": {
    "text": "Dirección completa"
  },
  "rows": 8
}) }}
Mostrar códigodel ejemplo: Con número de filas (rows) personalizada

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
}) }}

Con clases de form-group opcionales

Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
  }
}) }}
Mostrar códigodel ejemplo: Con clases de form-group opcionales

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"
  }
}) }}

Con valores de autocompletado

Ejemplo: "Con valores de autocompletado", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Con valores de autocompletado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "textarea-with-autocomplete-attribute",
  "name": "address",
  "label": {
    "text": "Dirección completa"
  },
  "autocomplete": "street-address"
}) }}
Mostrar códigodel ejemplo: Con valores de autocompletado

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"
}) }}

Placeholder

Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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 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 -->

Ejemplo: "Placeholder", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% from "components/textarea/_macro.textarea.njk" import componentTextarea %}

{{ componentTextarea({
  "id": "con-placeholder",
  "name": "placeholder",
  "label": {
    "text": "Valor"
  },
  "placeholder": "Esto es un placeholder"
}) }}
Mostrar códigodel ejemplo: Placeholder

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"
}) }}

Con clases de css aplicadas

Label inline + Textarea flexible y Mensaje de error

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Para compilar el css del siguiente código deberás instalar Tailwind CSS y usar el archivo tailwind.config.js del proyecto: https://bitbucket.org/sdaragon/desy-html/

Para que funcione el comportamiento del siguiente código deberás importar el archivo index.js y todos los archivos javascript de la carpeta /src/js y /src/js/aria del proyecto: https://bitbucket.org/sdaragon/desy-html/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

<!-- 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-black rounded 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 border-alert-base ring-2 ring-alert-base " id="classes-applied-b" name="classes-applied-b" rows="5" aria-errormessage="classes-applied-b-error" aria-invalid="true"></textarea>
</div>
<!-- /textarea -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Textarea", versión: 13.0.2, del sistema de diseño DESY

Pegar en la página: pagina-prueba-EDITA-PARA-EMPEZAR.html del proyecto: https://bitbucket.org/sdaragon/desy-html-starter/

Usar sólo el código que está dentro de la siguiente etiqueta <code>.

{% 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"
}) }}

Error:Esto es un mensaje de error

Mostrar códigodel ejemplo: Con clases de css aplicadas

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"
}) }}