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:

Additional components

The following additional components can help the user to fill in the form component.

Fieldsets

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

Field messages

A field message to provide help or feedback on fields or fieldsets. See the examples.

There are three types of field messages:

  1. Normal field message
  2. Error field message
  3. Success field message

A normal field message is used to help users fill in a field or fieldset.

  • The text in the field message provides extra information to the user on how the field or fieldset should be filled in. It can also be used to tell to the user why certain information is asked.
  • Try not to specify what is already implied by the input label. Only use this kind of messages to provide extra information to the user.
  • As it is intended to provide help, a normal field message is always visible from the first page view of the form.

An error field message is used to provide feedback on a field or fieldset. It informs the user that there was an error in filling in the field or fieldset.

  • The text in the error field message tells to the user what is wrong and how to fix it.
  • As it provides feedback on user input, an error field message is not visible on the first page view of the form. It is only visible during or after filling in the field or fieldset or when triggered by form validation.

A success field message is used to inform the user that the field or fieldset is correctly filled in.

  • The text in the error field message tells the user about the success.
  • As it provides feedback on user input, a success field message is not visible on the first page view of the form. It is only visible during or after filling in the field or fieldset or when triggered by form validation.

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.

Make the label of the submit button clear so that the user is reminded what user input is collected, for what purpose and which action is taken when clicking the submit button. Examples are: “Send message”, “Subscribe”, “Next”, “Continue”, “Confirm”. The button should have the primary button style.

A form can also have a secondary form action.

The secondary action is typically a way to temporarily pause filling in the current form. In multi-step forms, this button is used to get the user to the previous step. An other use, could be a button that saves but not submits the input the user already gave so that the user can continue filling in the form at another time. Either way, make the label of the button clear so that the user understands what the button does. Examples are: “Previous”, “Save for later”. The button should have the secondary button style.

Sometimes, in more complex multi-step forms or wizards, a third form action. The third action is typically a way for the user to reset user input, go back to the beginning of the form or wizard and start over. This not a button, but a link using the standalone link style.

Layout and validation

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.

Web accessibility

Field messages

  • A field must reference the field message by use of aria-describedby, this error and success messages have priority over the normal field message whose information has already been conveyed to the user on first page view.
  • A field message must have the role=alert attribute so content updates are read automatically in case of ajax- or frontend validation.
  • Error messages should be as specific as possible, the item that is in error is identified and the error is described to the user in text. See WCAG 2.0 success criterion 3.3.1. error identification
  • The field that causes an error message has the aria-invalid=true attribute.
<!-- 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>
          <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>
              <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