Skip to main content

Select

Information: Documentation incomplete

This component still requires documentation.

Use the select component as a last resort to allow users to choose a single option from a long list of options.

Examples

Default

Open example in a new window
View HTML 
<div class="uhb-c-form-group">
  <label class="uhb-c-label" for="site-select">
    Which site did you visit?
  </label>
  <div class="uhb-c-select">
    <select class="uhb-c-select__input" id="site-select" name="site-select">
      <option value="ghh">Good Hope Hospital</option>
      <option value="bhh">Heartlands Hospital</option>
      <option value="sh">Solihull Hospital</option>
      <option value="qehb">Queen Elizabeth Hospital Birmingham</option>
      <option value="bcc">Birmingham Chest Clinic</option>
      <option value="npc">Norman Power Centre</option>
    </select>
  </div>
</div>

Inverse

Open example in a new window
View HTML 
<div class="uhb-c-form-group">
  <label class="uhb-c-label" for="site-select">
    Which site did you visit?
  </label>
  <div class="uhb-c-select uhb-c-select--inverse">
    <select class="uhb-c-select__input" id="site-select" name="site-select">
      <option value="ghh">Good Hope Hospital</option>
      <option value="bhh">Heartlands Hospital</option>
      <option value="sh">Solihull Hospital</option>
      <option value="qehb">Queen Elizabeth Hospital Birmingham</option>
      <option value="bcc">Birmingham Chest Clinic</option>
      <option value="npc">Norman Power Centre</option>
    </select>
  </div>
</div>