Foehn Design System

Fieldset: Checkbox Error 

<div class="vd-form-group-danger">
    <fieldset class="form-group" aria-describedby="fieldsetHelp fieldsetErrorMessage">
        <legend>Quelle est votre nationalité ?</legend>
        <div id="fieldsetErrorMessage" class="form-control-feedback text-danger"><span class="sr-only">Erreur: </span>Sélectionnez si vous êtes Suisse, Français ou citoyen d&#39;un autre pays</div>
        <small id="fieldsetHelp" class="form-text text-secondary">Si vous avez la double nationalité, sélectionnez toutes les options qui vous concernent.</small>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="swiss" name="nationalite">
            <label class="form-check-label" for="swiss">
                Suisse
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="french" name="nationalite">
            <label class="form-check-label" for="french">
                Français
            </label>
        </div>

        <div class="form-check">
            <input class="form-check-input" type="checkbox" value="" id="other" name="nationalite">
            <label class="form-check-label" for="other">
                Citoyen d&#39;un autre pays
            </label>
        </div>

    </fieldset>
</div>
 
{%- if validation.class === 'danger' %}<div class="vd-form-group-{{ validation.class }}">{% endif %}
  <fieldset class="form-group{% if styleModifier %} {{ styleModifier }}{% endif %}"
    {% if helpText or validation.text -%}
              aria-describedby="
                                {%- if helpText %}{{ id }}Help{% endif %}
                                {%- if validation.text %} {{id}}ErrorMessage{% endif -%}
                                "
    {%- endif -%}>
  <legend{% if legendModifier %} class="{{ legendModifier }}"{% endif %}>{{ legend }}</legend>
  {%- if validation.text %}<div id="{{ id }}ErrorMessage"class="form-control-feedback text-{{ validation.class }}"><span class="sr-only">Erreur: </span>{{ validation.text }}</div>{% endif %}
  {% if helpText -%}
  <small
      id="{{ id }}Help"
      class="form-text text-secondary">{{ helpText }}</small>
  {% endif %}
  {% for item in items -%}
    {% if not type or type === 'radio' %}
      {% render '@radio', item %}
    {% else %}
      {% render '@checkbox', item %}
    {% endif %}
  {% endfor -%}
</fieldset>
{% if error %}</div>{% endif -%}
 
{
  "id": "fieldset",
  "legend": "Quelle est votre nationalité ?",
  "items": [
    {
      "label": "Suisse",
      "name": "nationalite",
      "id": "swiss",
      "checked": false
    },
    {
      "label": "Français",
      "name": "nationalite",
      "id": "french",
      "checked": false
    },
    {
      "label": "Citoyen d'un autre pays",
      "name": "nationalite",
      "id": "other",
      "checked": false
    }
  ],
  "type": "checkbox",
  "helpText": "Si vous avez la double nationalité, sélectionnez toutes les options qui vous concernent.",
  "error": true,
  "validation": {
    "class": "danger",
    "text": "Sélectionnez si vous êtes Suisse, Français ou citoyen d'un autre pays"
  }
}

When using a <fieldset>

Bearing in mind that <fieldset>s are pointless without <legend>s, you can use the following three rules of thumb to decide if a <fieldset> is appropriate.

  1. Is there more than one distinct set of fields in total, in the same form or context? Yes? Use <fieldset>s. No? Don’t use <fieldset>s.
  2. Does a set actually only have one field in it? Yes? You don’t need a <fieldset>. No? Use a <fieldset> if (1) applies.
  3. Can you think of a <legend> that would make sense or aid comprehension if used with each of the <fieldset>’s field labels? Yes? Use a <fieldset>. No? Don’t use a <fieldset>.

How screen readers read <legend>

<form role="form" class="sorter" method="get">
  
  <fieldset class="form-group"
    >
  <legend>Sort by</legend>
  
  
      <div class="form-check">
  <input class="form-check-input"
         type="radio" value="most-recent" name="sort-method" checked >
  <label class="form-check-label" for="">
    most
  recent
  </label>
</div>

    
  
      <div class="form-check">
  <input class="form-check-input"
         type="radio" value="popularity" name="sort-method" >
  <label class="form-check-label" for="">
    popularity
  </label>
</div>

    
  </fieldset>

  <submit class="btn btn-success">Transmettre</submit>

</form>

The <form> contains a single <fieldset> which is used to group the radio options under the label “Sort by”, followed by a submit button. When a radio <input> is focused, the <legend> content is announced followed by the <input>’s <label>. To begin with, the first option (“most recent”) is checked. Standard behavior is that only this checked <input> is focusable by Tab. Focusing it would trigger the announcement of “Sort by most recent, selected, radio button, one of four.” “Sort by” is the group label; “most recent” is the element label; “selected” is the element state; “radio button” is the element role. The number four is the total number of radio buttons which share a common name="sort-method“.