Skip to main content

This is a new service - your feedback will help us to improve it.

Form elements


Label

Component example

HTML Markup

<label class="wmcads-fe-label" for="genericInput">Form label</label>



Question

Component example

How would you...?

HTML Markup

<h3 class="wmcads-fe-question">
  How would you...?
</h3>



Checkboxes

What does it do?

Allows users select one or more options by clicking the box.

When to use it?

  • When user can select multiple options from the list
  • When user wants to toggle option on or off

When not to use it?

  • When user needs to add a lot of text that might go over multiple lines
  • Use fixed width inputs for content that has known length, e.g. postcode.

Component example

How would you...?

Select all options that apply

HTML Markup

<div class="wmcads-fe-group">
  <fieldset class="wmcads-fe-fieldset">
    <legend class="wmcads-fe-fieldset__legend">
      <h3 class="wmcads-fe-question">
        How would you...?
      </h3>
    </legend>
    <div class="wmcads-fe-checkboxes">
      <span class="wmcads-fe-checkboxes__desc">
        Select all options that apply
      </span>
      <label class="wmcads-fe-checkboxes__container">
        Option 1
        <input class="wmcads-fe-checkboxes__input" value="Option 1" checked="checked" type="checkbox"/>
        <span class="wmcads-fe-checkboxes__checkmark">
          <svg class="wmcads-fe-checkboxes__icon">
          <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
        </svg>
        </span>
      </label>
      <label class="wmcads-fe-checkboxes__container">
        Option 2
        <input class="wmcads-fe-checkboxes__input" value="Option 2" type="checkbox"/>
        <span class="wmcads-fe-checkboxes__checkmark">
          <svg class="wmcads-fe-checkboxes__icon">
          <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
        </svg>
        </span>
      </label>
      <label class="wmcads-fe-checkboxes__container">
        Option 3
        <input class="wmcads-fe-checkboxes__input" value="Option 3" type="checkbox"/>
        <span class="wmcads-fe-checkboxes__checkmark">
          <svg class="wmcads-fe-checkboxes__icon">
          <use xlink:href="#wmcads-general-checkmark" href="#wmcads-general-checkmark"></use>
        </svg>
        </span>
      </label>
    </div>
  </fieldset>
</div>



Dropdown

What does it do?

Navigation expands when user hovers or clicks on it revealing options to select.

When to use it?

  • When there is limited space and you need to reduce the space taken on the page
  • When an input is nonessential, e.g. sorting list
  • When you need flexibility because you do not know how many options there will be. All options are contained within the drop down component.

When not to use it?

  • Drop down creates more work for your user because it is a multi-step process, they hide available options and they slow users down by defaults therefore if possible use another component to display options e.g. radio buttons, text field, input selector
  • Do not use when drop down option has more than 36 characters because users will not be able to read them on some mobile devices

Component example

HTML Markup

<div class="wmcads-fe-group">
  <div class="wmcads-fe-dropdown">
    <label class="wmcads-fe-label" for="dropdown">Dropdown label</label>
    <select class="wmcads-fe-dropdown__select" id="dropdown" name="dropdown">
      <option value="" selected="selected">Choose from list</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
      <option value="4">Option 4</option>
      <option value="5">Option 5</option>
    </select>
  </div>
</div>



Input

What does it do?

Allows users to enter text.

When to use it?

  • When user needs to enter short amount of text, e.g. name, email.

When not to use it?

  • When user needs to add a lot of text that might go over multiple lines
  • Use fixed width inputs for content that has known length, e.g. postcode.

Component example

HTML Markup

<div class="wmcads-fe-group">
  <label class="wmcads-fe-label" for="input">Input label</label>
  <input class="wmcads-fe-input" id="input" name="input" type="text"/>
</div>



Radios

What does it do?

Allows users select one option from multipled fixed options

When to use it?

  • When the user can select just one open from multiple options

When not to use it?

  • When the user may need to select more than one option
  • When the user may need to enter their own 'other' option

Component example

How would you...?

Select one option

HTML Markup

<div class="wmcads-fe-group">
  <fieldset class="wmcads-fe-fieldset">
    <legend class="wmcads-fe-fieldset__legend">
      <h3 class="wmcads-fe-question">
        How would you...?
      </h3>
    </legend>
    <div class="wmcads-fe-radios">
      <span class="wmcads-fe-radios__desc">
        Select one option
      </span>
      <label class="wmcads-fe-radios__container">
        Option 1
        <input class="wmcads-fe-radios__input" value="Option 1" checked="checked" name="radio-example" type="radio"/>
        <span class="wmcads-fe-radios__checkmark">
        </span>
      </label>
      <label class="wmcads-fe-radios__container">
        Option 2
        <input class="wmcads-fe-radios__input" value="Option 2" name="radio-example" type="radio"/>
        <span class="wmcads-fe-radios__checkmark">
        </span>
      </label>
      <label class="wmcads-fe-radios__container">
        Option 3
        <input class="wmcads-fe-radios__input" value="Option 3" name="radio-example" type="radio"/>
        <span class="wmcads-fe-radios__checkmark">
        </span>
      </label>
    </div>
  </fieldset>
</div>



Textarea

Component example

HTML Markup

<div class="wmcads-fe-group">
  <label class="wmcads-fe-label" for="textarea">Textarea label</label>
  <textarea  class="wmcads-fe-textarea" id="textarea" name="textarea" rows="3"></textarea>
</div>



Handling errors

Component example

This is an example error message

HTML Markup

<div class="wmcads-fe-group wmcads-fe-group--error">
  <label class="wmcads-fe-label" for="errorExample">Input label</label>
  <span class="wmcads-fe-error-message">This is an example error message</span>
  <input class="wmcads-fe-input wmcads-fe-input--error" id="errorExample" name="errorExample" type="text"/>
</div>