• Accordion
• Breadcrumb
• Buttons
• Content card
• File Download
• Form elements
• Hub header
• Inset text
• Links
• Loader
• Page header
• Phase indicator
• Warning text

Form elements

Label

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

Question

<h3 class="wmre-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.

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

<div class="wmre-fe-group">
  <div class="wmre-fe-dropdown">
    <label class="wmre-fe-label" for="dropdown">Dropdown label</label>
    <select class="wmre-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.

<div class="wmre-fe-group">
  <label class="wmre-fe-label" for="input">Input label</label>
  <input class="wmre-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

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

Textarea

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

Handling errors

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