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

Por defecto

Descripción visual

Fieldset con borde gris claro de 1px y fondo blanco. Contiene un label en texto negro regular, seguido de un campo de entrada de texto con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.

¿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-sm 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. El aria-errormessage se asocia al fieldset, en vez de a un campo concreto, cuando el error hace referencia a los elementos en su conjunto. Debería apuntar al id de un mensaje de error que describa el problema general del fieldset.

Descripción visual

Fieldset con borde gris claro de 1px y fondo blanco. Incluye un label en texto negro regular, un sublabel en texto negro regular, un mensaje de error en texto rojo, y un campo de entrada con borde rojo de aproximadamente 2px y fondo blanco. El input mantiene dimensiones estándar de aproximadamente 100px de ancho.

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

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>Mensaje de error aqui
  </p>
  <!-- /error-message -->
  <input class="c-input block mt-sm border-alert-base ring-2 ring-alert-base rounded-sm 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-error-id-1" name="tel-error-name-1" type="text" aria-errormessage="tel-error-id-1-error" aria-invalid="true">
</div>
<!-- /input -->
{% endcall  %}

Con clases de css aplicadas

Descripción visual

Fieldset con borde gris claro de 1px, fondo gris muy claro (casi blanco), y padding interno visible. Contiene un label en texto negro regular, seguido de un segundo label en texto negro regular, y un campo de entrada con borde gris de 1px y fondo blanco. El input tiene dimensiones estándar de aproximadamente 100px de ancho.

¿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-sm 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  %}