DESY

Sistema de Diseño del Gobierno de Aragón

Índice de páginas

Entrada de texto

Formularios

El campo de texto es un elemento básico de formulario que permite la inserción y edición de texto en una única línea. Se debe usar cuando el texto a introducir es corto, por ejemplo nombre o apellidos. Para textos largos usar áreas de texto.

Fieldset

Parámetros Nunjucks del componente: "Fieldset". Versión: 4.0.0

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

        {"val":"params:\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: errorId\n  type: string\n  required: false\n  description: One or more element IDs to add to the `aria-errormessage` attribute, used to provide additional error information for screenreader users.\n- name: legend\n  type: object\n  required: false\n  description: Options for the legend\n  params:\n  - name: text\n    type: string\n    required: true\n    description: If `html` is set, this is not required. Text to use within the legend. If `html` is provided, the `text` argument will be ignored.\n  - name: html\n    type: string\n    required: true\n    description: If `text` is set, this is not required. HTML to use within the legend. If `html` is provided, the `text` argument will be ignored.\n  - name: classes\n    type: string\n    required: false\n    description: Classes to add to the legend.\n  - name: isPageHeading\n    type: boolean\n    required: false\n    description: Whether the legend also acts as the heading for the page.\n- name: headingLevel\n  type: number\n  required: false\n  description: If headingLevel is 1, the parent heading tag needed inside this component will be a h1, if 2 will be a h2, and so on.\n- name: classes\n  type: string\n  required: false\n  description: Classes to add to the fieldset container.\n- name: role\n  type: string\n  required: false\n  description: Optional ARIA role attribute.\n- name: attributes\n  type: object\n  required: false\n  description: HTML attributes (for example data attributes) to add to the fieldset container.\n- name: caller\n  type: nunjucks-block\n  required: false\n  description: Not strictly a parameter but [Nunjucks code convention](https://mozilla.github.io/nunjucks/templating.html#call). Using a `call` block enables you to call a macro with all the text inside the tag. This is helpful if you want to pass a lot of content into a macro. To use it, you will need to wrap the entire fielset component in a `call` block.","length":2100}

Por defecto

Ejemplo: "Por defecto", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.0, 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>.

<!-- fieldset -->
<fieldset>
  <legend class="mb-sm">
    ¿Cuál es tu número de teléfono?
  </legend>
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="tel-id-1">Número de teléfono</label>
    <!-- /label -->
    <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-1" name="tel-name-1" type="text">
  </div>
  <!-- /input -->
</fieldset>
<!-- /fieldset -->

Ejemplo: "Por defecto", de código Nunjucks, para maquetar el componente: "Fieldset", versión: 4.0.0, 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/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset ("{\"legend\":{\"text\":\"¿Cuál es tu número de teléfono?\",\"classes\":\"mb-sm\"}}") %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-1">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-1" name="tel-name-1" type="text">
</div>
<!-- /input -->


{% endcall  %}
¿Cuál es tu número de teléfono?
Mostrar códigodel ejemplo: Por defecto

Contenido

Nunjucks macro

{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "¿Cuál es tu número de teléfono?",
    "classes": "mb-sm"
  }
}) %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-1">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-1" name="tel-name-1" type="text">
</div>
<!-- /input -->
{% endcall  %}

Con error

Mostrar código para visualizar el aria-describedby, el aria-errormessage y aria-invalid='true' aplicado en el HTML.

Ejemplo: "Con error", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.0, 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>.

<!-- fieldset -->
<fieldset aria-errormessage="error-id">
  <legend class="mb-sm">
    ¿Cuál es tu número de teléfono?
  </legend>
  <!-- input -->
  <div class="c-form-group c-form-group--error">
    <!-- label -->
    <label class="block" for="tel-error-id-1">Número de teléfono</label>
    <!-- /label -->
    <!-- error-message -->
    <p id="tel-error-id-1-error" class="block font-semibold text-alert-base">
      <span class="sr-only">Error:</span>Error: Mensaje de error aqui
    </p>
    <!-- /error-message -->
    <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-error-id-1" name="tel-error-name-1" type="text" aria-describedby="tel-error-id-1-error" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
  </div>
  <!-- /input -->
</fieldset>
<!-- /fieldset -->

Ejemplo: "Con error", de código Nunjucks, para maquetar el componente: "Fieldset", versión: 4.0.0, 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/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset ("{\"legend\":{\"text\":\"¿Cuál es tu número de teléfono?\",\"classes\":\"mb-sm\"},\"errorId\":\"error-id\"}") %}
<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="tel-error-id-1">Número de teléfono</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="tel-error-id-1-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: Mensaje de error aqui
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-error-id-1" name="tel-error-name-1" type="text" aria-describedby="tel-error-id-1-error" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
</div>
<!-- /input -->


{% endcall  %}
¿Cuál es tu número de teléfono?

Error:Error: Mensaje de error aqui

Mostrar códigodel ejemplo: Con error

Contenido

Nunjucks macro

{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "¿Cuál es tu número de teléfono?",
    "classes": "mb-sm"
  },
  "errorId": "error-id"
}) %}
<!-- input -->
<div class="c-form-group c-form-group--error">
  <!-- label -->
  <label class="block" for="tel-error-id-1">Número de teléfono</label>
  <!-- /label -->
  <!-- error-message -->
  <p id="tel-error-id-1-error" class="block font-semibold text-alert-base">
    <span class="sr-only">Error:</span>Error: Mensaje de error aqui
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-error-id-1" name="tel-error-name-1" type="text" aria-describedby="tel-error-id-1-error" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
</div>
<!-- /input -->
{% endcall  %}

Con label como encabezado

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>. Si no se establece un 'headingLevel', por defecto usará un <h1>.

Ejemplo: "Con label como encabezado", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.0, 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>.

<!-- fieldset -->
<fieldset>
  <legend class="c-h1 mb-sm">
    <h1>
      ¿Cuál es tu número de teléfono?
    </h1>
  </legend>
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="tel-id-2">Número de teléfono</label>
    <!-- /label -->
    <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-2" name="tel-name-2" type="text">
  </div>
  <!-- /input -->
</fieldset>
<!-- /fieldset -->

Ejemplo: "Con label como encabezado", de código Nunjucks, para maquetar el componente: "Fieldset", versión: 4.0.0, 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/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset ("{\"legend\":{\"text\":\"¿Cuál es tu número de teléfono?\",\"classes\":\"c-h1 mb-sm\",\"isPageHeading\":true}}") %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-2">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-2" name="tel-name-2" type="text">
</div>
<!-- /input -->


{% endcall  %}

¿Cuál es tu número de teléfono?

Mostrar códigodel ejemplo: Con label como encabezado

Contenido

Nunjucks macro

{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "¿Cuál es tu número de teléfono?",
    "classes": "c-h1 mb-sm",
    "isPageHeading": true
  }
}) %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-2">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-2" name="tel-name-2" type="text">
</div>
<!-- /input -->
{% endcall  %}

Con label como encabezado con h3

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 con h3", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.0, 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>.

<!-- fieldset -->
<fieldset>
  <legend class="c-h3 mb-sm">
    <h3>
      ¿Cuál es tu número de teléfono?
    </h3>
  </legend>
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="tel-id-3">Número de teléfono</label>
    <!-- /label -->
    <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-3" name="tel-name-3" type="text">
  </div>
  <!-- /input -->
</fieldset>
<!-- /fieldset -->

Ejemplo: "Con label como encabezado con h3", de código Nunjucks, para maquetar el componente: "Fieldset", versión: 4.0.0, 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/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset ("{\"legend\":{\"text\":\"¿Cuál es tu número de teléfono?\",\"classes\":\"c-h3 mb-sm\",\"isPageHeading\":true},\"headingLevel\":3}") %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-3">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-3" name="tel-name-3" type="text">
</div>
<!-- /input -->


{% endcall  %}

¿Cuál es tu número de teléfono?

Mostrar códigodel ejemplo: Con label como encabezado con h3

Contenido

Nunjucks macro

{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "¿Cuál es tu número de teléfono?",
    "classes": "c-h3 mb-sm",
    "isPageHeading": true
  },
  "headingLevel": 3
}) %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-3">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-3" name="tel-name-3" type="text">
</div>
<!-- /input -->
{% endcall  %}

Con clases de css aplicadas

Ejemplo: "Con clases de css aplicadas", de código HTML, para maquetar el componente: "Fieldset", versión: 4.0.0, 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>.

<!-- fieldset -->
<fieldset class="p-lg border border-neutral-base">
  <legend class="mb-sm -ml-base px-base bg-white">
    ¿Cuál es tu número de teléfono?
  </legend>
  <!-- input -->
  <div class="c-form-group">
    <!-- label -->
    <label class="block" for="tel-id-4">Número de teléfono</label>
    <!-- /label -->
    <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-4" name="tel-name-4" type="text">
  </div>
  <!-- /input -->
</fieldset>
<!-- /fieldset -->

Ejemplo: "Con clases de css aplicadas", de código Nunjucks, para maquetar el componente: "Fieldset", versión: 4.0.0, 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/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset ("{\"legend\":{\"text\":\"¿Cuál es tu número de teléfono?\",\"classes\":\"mb-sm -ml-base px-base bg-white\"},\"classes\":\"p-lg border border-neutral-base\"}") %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-4">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-4" name="tel-name-4" type="text">
</div>
<!-- /input -->


{% endcall  %}
¿Cuál es tu número de teléfono?
Mostrar códigodel ejemplo: Con clases de css aplicadas

Contenido

Nunjucks macro

{% from "components/fieldset/_macro.fieldset.njk" import componentFieldset %}
{% call componentFieldset({
  "legend": {
    "text": "¿Cuál es tu número de teléfono?",
    "classes": "mb-sm -ml-base px-base bg-white"
  },
  "classes": "p-lg border border-neutral-base"
}) %}
<!-- input -->
<div class="c-form-group">
  <!-- label -->
  <label class="block" for="tel-id-4">Número de teléfono</label>
  <!-- /label -->
  <input class="c-input block mt-sm border-black rounded font-semibold 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="tel-id-4" name="tel-name-4" type="text">
</div>
<!-- /input -->
{% endcall  %}