Foehn Design System

Fieldset 

<fieldset class="form-group">
    <legend>Legend</legend>

    <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleOption1" name="example" checked>
        <label class="form-check-label" for="exampleOption1">
            Cras sed ligula eu est cursus eleifend ut id turpis
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleOption2" name="example">
        <label class="form-check-label" for="exampleOption2">
            Fusce feugiat quam vel tellus malesuada, sit amet maximus justo hendrerit
        </label>
    </div>

    <div class="form-check">
        <input class="form-check-input" type="radio" id="exampleOption3" name="example">
        <label class="form-check-label" for="exampleOption3">
            Aenean id est non dui porttitor euismod
        </label>
    </div>

    <div class="form-check disabled">
        <input class="form-check-input" type="radio" id="exampleOption4" name="example" disabled>
        <label class="form-check-label" for="exampleOption4">
            Phasellus dignissim metus quis blandit varius
        </label>
    </div>

</fieldset>
 
{%- 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": "Legend",
  "items": [
    {
      "label": "Cras sed ligula eu est cursus eleifend ut id turpis",
      "name": "example",
      "id": "exampleOption1",
      "checked": true
    },
    {
      "label": "Fusce feugiat quam vel tellus malesuada, sit amet maximus justo hendrerit",
      "name": "example",
      "id": "exampleOption2"
    },
    {
      "label": "Aenean id est non dui porttitor euismod",
      "name": "example",
      "id": "exampleOption3"
    },
    {
      "label": "Phasellus dignissim metus quis blandit varius",
      "name": "example",
      "id": "exampleOption4",
      "disabled": true
    }
  ]
}

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