desy-html

Fieldset

Por defecto

¿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.

¿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-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 border-alert-base ring-2 ring-alert-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

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