Form

Form

When to use this component

Use the form component to collect user input.

How it works

Form elements

A form component contains form elements. Form elements are different types of input elements.

The following form elements can be used in the form component:

Fieldsets

In a form component, form elements can be grouped into one or more fieldsets.

A fieldset is used to group related form elements. Fieldsets have a visual indication of where the fieldset starts and where it ends. Fieldsets can also be nested. See the examples.

Form actions

Every form requires at least one form action. Form actions should be placed inside the form component.

The primary form action is the first action of the form and is typically the submit button of the form. A submit button is required for every form.

For more information, see the form actions component.

Layout

The container is divided in two virtual sides that each get 50% of the width of the container.

Form elements are shown at the left-hand side and are aligned to the left of the container. The width of form elements is 50% of the container.

The right-hand side is the space where error field messages (also see above) are shown on validation. Error field messages appear at the right of each form element and are aligned to the top of the form element.

On mobile or when the container is too small, the right-hand side is not used. In this case, there is only one virtual column. Form elements get 100% of the width of the container. Error field messages appear directly below each form element instead of at the right and are aligned to the top of the form element.

Help texts (normal field messages) are always shown inline with the form elements. They are aligned to the left of the container. The width of the messages is the same as the width of the form elements. They are shown between the label of the form element and the form element itself, in other words directly below the label of the form element and directly above the form element itself.

Fieldsets always get a width of 100% of the container.

Validation

The following principles and documentation about form validation is based on the book Inclusive Design Patterns by Heydon Pickering.

When the form is validated and one or more errors are found, there should appear 1 general error message and specific error message per field where an error was found.

The intention is to convey 2 important messages to the user during validation of the form. These should be separate messages.

The first message is that something is broken. This is purely about the fact that errors were found in the form. This message is conveyed by using 1 general error message.

The second message is what needs fixing. This is about wat will make the form valid. This message is conveyed by using a specific error message per field where an error was found.

General error message

When the user clicks the submit button of the form to try to submit the form, we need to check if there are any errors. If there are, we need to surpress form submission temporarily. At this point, all we want to communicate is the prsesence of errors and that they need attention.

  • The text of the general error message is fixed and should say something like: “Errors were found. Correct them to continue.”.
  • The general error message should appear right after checking if there are errors in the form after the user tried to submit the form.
  • The general error message should be placed as close as possible and just below the submit button.
  • For the general error message, the error status message is used.

Specific error message per field

Now that the user knows something is broken, we need to help the user with what needs fixing (what will make the form valid). We can savely move on to handling the invalid fields.

  • The text of the specific error message is composed out of the two pieces of information that are necessary (also see below), for example: “This is not a valid email address. Please enter an email address that meets the format example@gmail.com.”.
  • The specific error messages should appear at the same moment as the general error message, right after checking if there are errors in the form after the user tried to submit the form.
  • The specific error message should be placed as close as possible and directly at the right next to the fields.
    • In the responsive layout, when there is too little horizontal space, the specific error message move to directy below the fields.
  • For the specific error messages, the error field message is used.

What text to use for the specific error message per field?

For each invalid field in the form the following two pieces of information should be present in the specific error message:

  1. That the field is invalid.
  2. What would make the field valid.

Tips to write the tekst of the specific error message

  • Be clear. Error message are a conversation, with people. Use simple language, not ambiguous. Give the reason why something has gone wrong, say what has happened and why.
  • Be gentile and humble. Don’t blame the user. Remember that “the user is always right”. Imagine a situation where you would talk to the user in person.
  • Be useful. Help the user move forward. Tell the user what to do. Give the solution or a clue. Link the error message to the corresponding next action or step.
  • Avoid technical jargon.
  • Avoid negative words.
<!-- Default -->
{% block content %}
  <form action="#" method="#">

    {% include '@paragraph' with {
      'text': 'All fields are required, unless they are marked as optional.',
      'modifier': 'form-disclaimer'
    } %}

    <fieldset>
      <legend>Contact details</legend>
      {% include '@form-item' with {
        "label": "Name",
        "id": _self.name ~ "-name_id",
        "input_component": "input",
        "type": "text",
        "name": _self.name ~ "-name_name",
        "field_description": null
      } %}
      {% include '@form-item' with {
        "label": "First name",
        "input_component": "input",
        "type": "text",
        "id": _self.name ~ "-firstname_id",
        "name": _self.name ~ "-firstname_name",
        "field_description": null
      } %}
      {% include '@form-item' with {
        "label": "E-mail address",
        "for": "email_id",
        "input_component": "input",
        "type": "email",
        "id": _self.name ~ "-email_id",
        "name": _self.name ~ "-email_name",
        "field_description": null
      } %}
      {% include '@form-item' with {
        "label": "Phone number",
        "for": "tel_id",
        "input_component": "input",
        "type": "tel",
        "id": _self.name ~ "-tel_id",
        "name": _self.name ~ "-tel_name",
        "field_description": null
      } %}
    </fieldset>

    {% include '@radios--with-error' with {
      "input_component": "input",
      "type": "radio",
      "label": "Date",
      "field_description": null,
      "options": [
        {
          "label": "Wednesday 6 june 2018",
          "name": _self.name ~ "-radiogroup",
          "id": _self.name ~ "-radio-1"
        },
        {
          "label": "Thursday 7 june 2018",
          "name": _self.name ~ "-radiogroup",
          "id": _self.name ~ "-radio-2"
        },
        {
          "label": "Friday 8 june 2018",
          "name": _self.name ~ "-radiogroup",
          "id": _self.name ~ "-radio-3"
        }
      ]
    } %}

    <fieldset>
      <legend>Form row</legend>
      {% include '@form-row' with {
        id: _self.name
      }%}
    </fieldset>

    <fieldset>
      <legend>Another fieldset</legend>
      {% include '@form-item' with {
        "label": "Label textfield",
        "for": "textfield_id",
        "label_optional": "Optional",
        "input_component": "input",
        "type": "text",
        "field_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.",
        "field_error": "",
        "description": "Description textfield.",
        "id": _self.name ~ "-textfield_id",
        "name": _self.name ~ "-textfield_name",
        "modifier": "error",
        "field_message": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam."
      } %}
      {% include '@form-item' with {
        "label": "Label textfield",
        "for": "textfield_id--1",
        "input_component": "input",
        "type": "text",
        "id": _self.name ~ "-textfield_id--1",
        "name": _self.name ~ "-textfield_name--1",
        "field_description": null
      } %}

      <fieldset>
        <legend>Nested fieldset</legend>
        {% include '@form-item' with {
          "label": "Label textfield",
          "for": "textfield_id--2",
          "input_component": "input",
          "type": "text",
          "id": _self.name ~ "-textfield_id--2",
          "name": _self.name ~ "-textfield_name--2",
          "field_description": null
        } %}
        {% include '@form-item' with {
          "label": "Label textfield",
          "for": "textfield_id--3",
          "input_component": "input",
          "type": "text",
          "id": _self.name ~ "-textfield_id--3",
          "name": _self.name ~ "-textfield_name--3",
          "field_description": null
        } %}
      </fieldset>
    </fieldset>

    {% include '@checkboxes' with {
      "input_component": "input",
      "type": "checkbox",
      "label": "Newsletter",
      "id": _self.name ~ "-newsletter_id",
      "options": [
        {
          "label": "Subscribe to the newsletter",
          "name": _self.name ~ "-checkboxgroup",
          "id": _self.name ~ "-checkbox-1"
        }
      ]
    } %}

    {% include '@form-actions' %}

  </form>
{% endblock %}

<!-- Wizard -->
{% extends '@form' %}

{% block content %}
  {% render '@form-steps' %}

  <h2>Active step</h2>
  {{ parent() }}
{% endblock %}

<!-- Multistep -->
{% extends '@form' %}

{% block content %}
  <div class="form--multistep">
    {% render '@form-steps--vertical' %}

    <div class="form-content">
      <h2>Active step</h2>
      {{ parent() }}
    </div>
  </div>
{% endblock %}
<!-- Default -->
<form action="#" method="#">

      <p class="form-disclaimer">All fields are required, unless they are marked as optional.</p>

      <fieldset>
          <legend>Contact details</legend>
          <div class="form-item ">
              <label for="default-name_id">Name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-name_id" name="default-name_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-firstname_id">First name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-firstname_id" name="default-firstname_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-email_id">E-mail address
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="email" id="default-email_id" name="default-email_name" class="email" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-tel_id">Phone number
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="tel" id="default-tel_id" name="default-tel_name" class="tel" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Date
          </legend>
          <div class="form-columns">
              <div class="form-item-column">
                  <div class="radio">

                      <input type="radio" id="input---default-radio-1" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-1">Wednesday 6 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---default-radio-2" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-2">Thursday 7 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---default-radio-3" name="default-radiogroup" class="radio" />
                      <label for="input---default-radio-3">Friday 8 june 2018</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Form row</legend>
          <div class='form-row'>
              <div class="form-item  error stacked">
                  <label for="default-postal-code_id">Postal code
                  </label>
                  <div class="field-message " id="default-postal-code_id-description">
                      Wrap form items in a .form-row element.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-postal-code_id" aria-describedby="default-postal-code_id-message" name="default-postal-code_name" class="text error" aria-invalid="true" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message error" role="alert" id="default-postal-code_id-message">
                              Almost there!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="form-item  success stacked">
                  <label for="default-municipality_id">Municipality
                  </label>
                  <div class="field-message " id="default-municipality_id-description">
                      Place modifier .stacked on the form-items.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-municipality_id" aria-describedby="default-municipality_id-message" name="default-municipality_name" class="text success" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message success" role="alert" id="default-municipality_id-message">
                              Very good!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Another fieldset</legend>
          <div class="form-item  error">
              <label for="default-textfield_id">Label textfield
                  <span class="label-optional">
                      (Optional)
                  </span>
              </label>
              <div class="field-message " id="default-textfield_id-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.
                  <div class="accolade "></div>
              </div>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-textfield_id" aria-describedby="default-textfield_id-message" name="default-textfield_name" class="text error" aria-invalid="true" />
                  </div>
                  <div class="form-item-column">
                      <div class="field-message error" role="alert" id="default-textfield_id-message">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
                          <div class="accolade "></div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="default-textfield_id--1">Label textfield
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="default-textfield_id--1" name="default-textfield_name--1" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>

          <fieldset>
              <legend>Nested fieldset</legend>
              <div class="form-item ">
                  <label for="default-textfield_id--2">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-textfield_id--2" name="default-textfield_name--2" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
              <div class="form-item ">
                  <label for="default-textfield_id--3">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="default-textfield_id--3" name="default-textfield_name--3" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
          </fieldset>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Newsletter
          </legend>

          <div class="form-columns">
              <div class="form-item-column">
                  <div class="checkbox">

                      <input type="checkbox" id="input-default-newsletter_id--default-checkbox-1" name="default-checkboxgroup" class="checkbox" />
                      <label for="input-default-newsletter_id--default-checkbox-1">Subscribe to the newsletter</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <div class="form-actions">
          <input type="submit" value="Submit" class="" />
          <a href='#'>
              Cancel</a>
      </div>

  </form>

<!-- Wizard -->
<nav class="form-steps" aria-labelledby="form-steps-73">
      <h2 id="form-steps-73" class="visually-hidden">Steps in this wizard</h2>
      <ol class="form-steps-list">
          <li class="completed"><a href="#"><span>first step</span></a></li>
          <li class="completed"><a href="#"><span>second step</span></a></li>
          <li class="active"><span><span>active step</span></span></li>
          <li class=""><a href="#"><span>Step with a long name</span></a></li>
          <li class=""><span><span>inactive fifth step</span></span></li>
          <li class=""><span><span>inactive sixth step</span></span></li>
          <li class=""><span><span>inactive seventh step</span></span></li>
      </ol>
  </nav>

  <h2>Active step</h2>
  <form action="#" method="#">

      <p class="form-disclaimer">All fields are required, unless they are marked as optional.</p>

      <fieldset>
          <legend>Contact details</legend>
          <div class="form-item ">
              <label for="wizard-name_id">Name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="wizard-name_id" name="wizard-name_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="wizard-firstname_id">First name
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="wizard-firstname_id" name="wizard-firstname_name" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="wizard-email_id">E-mail address
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="email" id="wizard-email_id" name="wizard-email_name" class="email" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="wizard-tel_id">Phone number
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="tel" id="wizard-tel_id" name="wizard-tel_name" class="tel" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Date
          </legend>
          <div class="form-columns">
              <div class="form-item-column">
                  <div class="radio">

                      <input type="radio" id="input---wizard-radio-1" name="wizard-radiogroup" class="radio" />
                      <label for="input---wizard-radio-1">Wednesday 6 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---wizard-radio-2" name="wizard-radiogroup" class="radio" />
                      <label for="input---wizard-radio-2">Thursday 7 june 2018</label>
                  </div>
                  <div class="radio">

                      <input type="radio" id="input---wizard-radio-3" name="wizard-radiogroup" class="radio" />
                      <label for="input---wizard-radio-3">Friday 8 june 2018</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Form row</legend>
          <div class='form-row'>
              <div class="form-item  error stacked">
                  <label for="wizard-postal-code_id">Postal code
                  </label>
                  <div class="field-message " id="wizard-postal-code_id-description">
                      Wrap form items in a .form-row element.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="wizard-postal-code_id" aria-describedby="wizard-postal-code_id-message" name="wizard-postal-code_name" class="text error" aria-invalid="true" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message error" role="alert" id="wizard-postal-code_id-message">
                              Almost there!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
              <div class="form-item  success stacked">
                  <label for="wizard-municipality_id">Municipality
                  </label>
                  <div class="field-message " id="wizard-municipality_id-description">
                      Place modifier .stacked on the form-items.
                      <div class="accolade "></div>
                  </div>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="wizard-municipality_id" aria-describedby="wizard-municipality_id-message" name="wizard-municipality_name" class="text success" />
                      </div>
                      <div class="form-item-column">
                          <div class="field-message success" role="alert" id="wizard-municipality_id-message">
                              Very good!
                              <div class="accolade "></div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </fieldset>

      <fieldset>
          <legend>Another fieldset</legend>
          <div class="form-item  error">
              <label for="wizard-textfield_id">Label textfield
                  <span class="label-optional">
                      (Optional)
                  </span>
              </label>
              <div class="field-message " id="wizard-textfield_id-description">
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.
                  <div class="accolade "></div>
              </div>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="wizard-textfield_id" aria-describedby="wizard-textfield_id-message" name="wizard-textfield_name" class="text error" aria-invalid="true" />
                  </div>
                  <div class="form-item-column">
                      <div class="field-message error" role="alert" id="wizard-textfield_id-message">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
                          <div class="accolade "></div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="form-item ">
              <label for="wizard-textfield_id--1">Label textfield
              </label>
              <div class="form-columns">
                  <div class="form-item-column">

                      <input type="text" id="wizard-textfield_id--1" name="wizard-textfield_name--1" class="text" />
                  </div>
                  <div class="form-item-column">
                  </div>
              </div>
          </div>

          <fieldset>
              <legend>Nested fieldset</legend>
              <div class="form-item ">
                  <label for="wizard-textfield_id--2">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="wizard-textfield_id--2" name="wizard-textfield_name--2" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
              <div class="form-item ">
                  <label for="wizard-textfield_id--3">Label textfield
                  </label>
                  <div class="form-columns">
                      <div class="form-item-column">

                          <input type="text" id="wizard-textfield_id--3" name="wizard-textfield_name--3" class="text" />
                      </div>
                      <div class="form-item-column">
                      </div>
                  </div>
              </div>
          </fieldset>
      </fieldset>

      <fieldset class="form-item ">
          <legend>
              Newsletter
          </legend>

          <div class="form-columns">
              <div class="form-item-column">
                  <div class="checkbox">

                      <input type="checkbox" id="input-wizard-newsletter_id--wizard-checkbox-1" name="wizard-checkboxgroup" class="checkbox" />
                      <label for="input-wizard-newsletter_id--wizard-checkbox-1">Subscribe to the newsletter</label>
                  </div>
              </div>
              <div class="form-item-column">

              </div>
          </div>
      </fieldset>

      <div class="form-actions">
          <input type="submit" value="Submit" class="" />
          <a href='#'>
              Cancel</a>
      </div>

  </form>

<!-- Multistep -->
<div class="form--multistep">
      <nav class="form-steps vertical" aria-labelledby="form-steps-73-vertical">
          <h2 id="form-steps-73-vertical" class="visually-hidden">Steps in this wizard</h2>
          <ol class="form-steps-list">
              <li class="completed"><a href="#"><span>first step</span></a></li>
              <li class="completed"><a href="#"><span>second step</span></a></li>
              <li class="active"><span><span>active step</span></span></li>
              <li class=""><a href="#"><span>Step with a long name</span></a></li>
              <li class=""><span><span>inactive fifth step</span></span></li>
              <li class=""><span><span>inactive sixth step</span></span></li>
              <li class=""><span><span>inactive seventh step</span></span></li>
          </ol>
      </nav>

      <div class="form-content">
          <h2>Active step</h2>
          <form action="#" method="#">

              <p class="form-disclaimer">All fields are required, unless they are marked as optional.</p>

              <fieldset>
                  <legend>Contact details</legend>
                  <div class="form-item ">
                      <label for="multistep-name_id">Name
                      </label>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="text" id="multistep-name_id" name="multistep-name_name" class="text" />
                          </div>
                          <div class="form-item-column">
                          </div>
                      </div>
                  </div>
                  <div class="form-item ">
                      <label for="multistep-firstname_id">First name
                      </label>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="text" id="multistep-firstname_id" name="multistep-firstname_name" class="text" />
                          </div>
                          <div class="form-item-column">
                          </div>
                      </div>
                  </div>
                  <div class="form-item ">
                      <label for="multistep-email_id">E-mail address
                      </label>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="email" id="multistep-email_id" name="multistep-email_name" class="email" />
                          </div>
                          <div class="form-item-column">
                          </div>
                      </div>
                  </div>
                  <div class="form-item ">
                      <label for="multistep-tel_id">Phone number
                      </label>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="tel" id="multistep-tel_id" name="multistep-tel_name" class="tel" />
                          </div>
                          <div class="form-item-column">
                          </div>
                      </div>
                  </div>
              </fieldset>

              <fieldset class="form-item ">
                  <legend>
                      Date
                  </legend>
                  <div class="form-columns">
                      <div class="form-item-column">
                          <div class="radio">

                              <input type="radio" id="input---multistep-radio-1" name="multistep-radiogroup" class="radio" />
                              <label for="input---multistep-radio-1">Wednesday 6 june 2018</label>
                          </div>
                          <div class="radio">

                              <input type="radio" id="input---multistep-radio-2" name="multistep-radiogroup" class="radio" />
                              <label for="input---multistep-radio-2">Thursday 7 june 2018</label>
                          </div>
                          <div class="radio">

                              <input type="radio" id="input---multistep-radio-3" name="multistep-radiogroup" class="radio" />
                              <label for="input---multistep-radio-3">Friday 8 june 2018</label>
                          </div>
                      </div>
                      <div class="form-item-column">

                      </div>
                  </div>
              </fieldset>

              <fieldset>
                  <legend>Form row</legend>
                  <div class='form-row'>
                      <div class="form-item  error stacked">
                          <label for="multistep-postal-code_id">Postal code
                          </label>
                          <div class="field-message " id="multistep-postal-code_id-description">
                              Wrap form items in a .form-row element.
                              <div class="accolade "></div>
                          </div>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="multistep-postal-code_id" aria-describedby="multistep-postal-code_id-message" name="multistep-postal-code_name" class="text error" aria-invalid="true" />
                              </div>
                              <div class="form-item-column">
                                  <div class="field-message error" role="alert" id="multistep-postal-code_id-message">
                                      Almost there!
                                      <div class="accolade "></div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="form-item  success stacked">
                          <label for="multistep-municipality_id">Municipality
                          </label>
                          <div class="field-message " id="multistep-municipality_id-description">
                              Place modifier .stacked on the form-items.
                              <div class="accolade "></div>
                          </div>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="multistep-municipality_id" aria-describedby="multistep-municipality_id-message" name="multistep-municipality_name" class="text success" />
                              </div>
                              <div class="form-item-column">
                                  <div class="field-message success" role="alert" id="multistep-municipality_id-message">
                                      Very good!
                                      <div class="accolade "></div>
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </fieldset>

              <fieldset>
                  <legend>Another fieldset</legend>
                  <div class="form-item  error">
                      <label for="multistep-textfield_id">Label textfield
                          <span class="label-optional">
                              (Optional)
                          </span>
                      </label>
                      <div class="field-message " id="multistep-textfield_id-description">
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam. Nam pellentesque velit pharetra, accumsan ante at, gravida turpis. Cras venenatis velit ut ipsum molestie pretium.
                          <div class="accolade "></div>
                      </div>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="text" id="multistep-textfield_id" aria-describedby="multistep-textfield_id-message" name="multistep-textfield_name" class="text error" aria-invalid="true" />
                          </div>
                          <div class="form-item-column">
                              <div class="field-message error" role="alert" id="multistep-textfield_id-message">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec laoreet, urna sit amet convallis rhoncus, felis ex pellentesque neque, nec ultrices dui enim ut diam.
                                  <div class="accolade "></div>
                              </div>
                          </div>
                      </div>
                  </div>
                  <div class="form-item ">
                      <label for="multistep-textfield_id--1">Label textfield
                      </label>
                      <div class="form-columns">
                          <div class="form-item-column">

                              <input type="text" id="multistep-textfield_id--1" name="multistep-textfield_name--1" class="text" />
                          </div>
                          <div class="form-item-column">
                          </div>
                      </div>
                  </div>

                  <fieldset>
                      <legend>Nested fieldset</legend>
                      <div class="form-item ">
                          <label for="multistep-textfield_id--2">Label textfield
                          </label>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="multistep-textfield_id--2" name="multistep-textfield_name--2" class="text" />
                              </div>
                              <div class="form-item-column">
                              </div>
                          </div>
                      </div>
                      <div class="form-item ">
                          <label for="multistep-textfield_id--3">Label textfield
                          </label>
                          <div class="form-columns">
                              <div class="form-item-column">

                                  <input type="text" id="multistep-textfield_id--3" name="multistep-textfield_name--3" class="text" />
                              </div>
                              <div class="form-item-column">
                              </div>
                          </div>
                      </div>
                  </fieldset>
              </fieldset>

              <fieldset class="form-item ">
                  <legend>
                      Newsletter
                  </legend>

                  <div class="form-columns">
                      <div class="form-item-column">
                          <div class="checkbox">

                              <input type="checkbox" id="input-multistep-newsletter_id--multistep-checkbox-1" name="multistep-checkboxgroup" class="checkbox" />
                              <label for="input-multistep-newsletter_id--multistep-checkbox-1">Subscribe to the newsletter</label>
                          </div>
                      </div>
                      <div class="form-item-column">

                      </div>
                  </div>
              </fieldset>

              <div class="form-actions">
                  <input type="submit" value="Submit" class="" />
                  <a href='#'>
                      Cancel</a>
              </div>

          </form>

      </div>
  </div>

/* Default: No context defined */

/* Wizard: No context defined */

/* Multistep: No context defined */

  • Content:
    .form--multistep {
      @include desktop {
        display: flex;
    
        > .form-content {
          @include set-layout('width-9');
        }
    
        > .form-steps {
          @include set-layout('width-3');
          margin-right: gutter();
        }
      }
    }
    
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: components/41-organisms/form/_form.scss
  • Size: 227 Bytes