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
Parámetros Nunjucks del componente: "Textarea". Versión: 4.0.1
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}
Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: 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: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: 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."
}
}) }}
HTML
<!-- textarea --><divclass="c-form-group"><!-- label --><labelclass="block"for="more-detail-a">Esto es un label</label><!-- /label --><!-- hint --><pid="more-detail-a-hint"class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p><!-- /hint --><textareaclass="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: "Deshabilitado", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: 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: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: 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."
}
}) }}
HTML
<!-- textarea --><divclass="c-form-group"><!-- label --><labelclass="block"for="more-detail-b">Esto es un label</label><!-- /label --><!-- hint --><pid="more-detail-b-hint"class="block text-neutral-dark">Esto es una pista o texto descriptivo.</p><!-- /hint --><textareaclass="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: "Con mensaje de error", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con mensaje de error", de código Nunjucks, para maquetar el componente: "Textarea", versión: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: 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": "Error: esto es un mensaje de error"
}
}) }}
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": "Error: esto es un mensaje de error"
}
}) }}
HTML
<!-- textarea --><divclass="c-form-group c-form-group--error"><!-- label --><labelclass="block"for="no-ni-reason">Esto es un label</label><!-- /label --><!-- error-message --><pid="no-ni-reason-error"class="block font-semibold text-alert-base"><spanclass="sr-only">Error:</span>Error: esto es un mensaje de error
</p><!-- /error-message --><textareaclass="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-describedby="no-ni-reason-error"aria-errormessage="no-ni-reason-error"aria-invalid="true"></textarea></div><!-- /textarea -->
Ejemplo: "Con valor por defecto", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con número de filas (rows) personalizada", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con número de filas (rows) personalizada", de código Nunjucks, para maquetar el componente: "Textarea", versión: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Utiliza el parámetro 'isPageheading': true para que el label esté dentro de un encabezado. Usa el parámetro 'headingLevel' para establecer el nivel del encabezado. Por ejemplo: 'headingLevel': 3 creará un encabezado <h3>.
Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
<!-- textarea -->
<div class="c-form-group">
<!-- label -->
<h1 class="block ">
<label class="block" for="textarea-with-page-heading-a">Esto es un label dentro de un encabezado <h1></label>
</h1>
<!-- /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-a" name="address" rows="5"></textarea>
</div>
<!-- /textarea -->
Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "Textarea", versión: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: 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-a",
"name": "address",
"label": {
"text": "Esto es un label dentro de un encabezado <h1>",
"isPageHeading": true
}
}) }}
Mostrar códigodel ejemplo: Con label como encabezado
Contenido
Nunjucks macro
{%from"components/textarea/_macro.textarea.njk" import componentTextarea %}{{ componentTextarea({
"id": "textarea-with-page-heading-a",
"name": "address",
"label": {
"text": "Esto es un label dentro de un encabezado <h1>",
"isPageHeading": true
}
}) }}
HTML
<!-- textarea --><divclass="c-form-group"><!-- label --><h1class="block "><labelclass="block"for="textarea-with-page-heading-a">Esto es un label dentro de un encabezado <h1></label></h1><!-- /label --><textareaclass="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-a"name="address"rows="5"></textarea></div><!-- /textarea -->
Ejemplo: "Con clases de form-group opcionales", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con clases de form-group opcionales", de código Nunjucks, para maquetar el componente: "Textarea", versión: 4.0.1, del sistema de diseño DESY
Pegar en la página: pagina-prueba.html del proyecto: desy-html-starter.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Con valores de autocompletado", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
Ejemplo: "Placeholder", de código HTML, para maquetar el componente: "Textarea", versión: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.
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: 4.0.1, 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: 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: desy-html.
Usar sólo el código que está dentro de la siguiente etiqueta <code>.