View on GitHub

Select input

Customize the native <select>s with custom CSS that changes the element’s initial appearance.

On this page

Component design version:

  • Select input v1.2.0

Info

You can find here the OUDS select input design guidelines.

Overview

Use a .select-input wrapper to create a select form field with OUDS styles, then wrap a pair of <select class="select-input-field"></select> and <label> elements in .select-input-container. Note that the <label> must come before the <select>.

An empty placeholder <option> with an empty value is required on each <select> as our CSS-only floating label implementation relies on it to detect when the select is empty. This one should be disabled so users won't be able to select it.

<div class="select-input">
  <div class="select-input-container">
    <label for="exampleSelect">Default select example</label>
    <select class="select-input-field" id="exampleSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
html

When there’s a value already defined, <label>s will automatically adjust to their floated position.

<div class="select-input">
  <div class="select-input-container">
    <label for="exampleSelectChecked">Selected select example</label>
    <select class="select-input-field" id="exampleSelectChecked">
      <option value="" disabled></option>
      <option value="1">One</option>
      <option value="2" selected>Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
html

Variants

Outlined

Add .select-input-container-outlined for a minimalist input with a transparent background and a visible stroke outlining the field. This style may be interesting for contexts other than form pages:

  • When selects need to feel lightweight and unobtrusive
  • In a selection/filtering feature in a product catalog
<div class="select-input">
  <div class="select-input-container select-input-container-outlined">
    <label for="exampleOutlinedSelect">Outlined select example</label>
    <select class="select-input-field" id="exampleOutlinedSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
html

Rounded

Rounded corners inputs is a project-wide option therefore all your inputs should either be rounded or not. Add .use-rounded-corner-inputs on a top container (for example <body>) to use rounded corners.

Info

We use a <div> as a parent container because we cannot use <body> in an example

<div class="use-rounded-corner-inputs">
  <div class="select-input mb-medium">
    <div class="select-input-container">
      <label for="exampleRoundedSelect">Rounded select example</label>
      <select class="select-input-field" id="exampleRoundedSelect">
        <option value="" disabled selected></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
  <div class="select-input">
    <div class="select-input-container select-input-container-outlined">
      <label for="exampleRoundedOutlinedSelect">Rounded outlined select example</label>
      <select class="select-input-field" id="exampleRoundedOutlinedSelect">
        <option value="" disabled selected></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
  </div>
</div>
html

Leading icon

Add an icon to help indicate the purpose of the input by placing an <svg> or <img> element inside the .select-input-container. The icon is automatically positioned at the left side of the select field.

Info

The recommended way to use icons is to fill an SVG sprite file, and use currentColor for styling. If really necessary, for example when you have a lot of icons, you can use an icon font. Find out more about using icons.


<div class="select-input mb-medium">
  <div class="select-input-container">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <label for="exampleLeadingSelect">Select example with leading icon</label>
    <select class="select-input-field" id="exampleLeadingSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
<div class="select-input">
  <div class="select-input-container select-input-container-outlined">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <label for="exampleLeadingOutlinedSelect">Outlined select example with leading icon</label>
    <select class="select-input-field" id="exampleLeadingOutlinedSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
html

Helper text

To display a helper text below inputs, add a .helper-text as a sibling of a .select-input-container.

Warning

Helper text should be explicitly associated with the select input it relates to using the aria-describedby attribute. This will ensure that assistive technologies—such as screen readers—will announce this helper text when the user focuses or enters the input.

Helper text. 

<div class="select-input">
  <div class="select-input-container">
    <label for="exampleSelectWithHelper">Select example with helper text</label>
    <select class="select-input-field" id="exampleSelectWithHelper" aria-describedby="selectTextHelper">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="selectTextHelper" class="helper-text">
    Helper text.
  </p>
</div>
html

If the helper text is not sufficient, it’s possible to offer the user an additional help link. The helper link can also be displayed on its own without helper text. To display a helper link below selects, use a standard small link with .link and .link-small classes as a sibling of a .select-input-container.

Warning

Helper link should be explicitly labelled using the aria-labelledby attribute in which you must combine the helper link id and the related select input label id. This will ensure that assistive technologies—such as screen readers—will announce this helper link in relation with the select input. We also recommend adding a .visually-hidden span inside the link to coordinate the link content and the label.

Choose a number.

More information
More information 
<div class="select-input mb-medium">
  <div class="select-input-container">
    <label id="labelSelectWithHelperAndLink" for="exampleSelectWithHelperAndLink">Select example with helper and link texts</label>
    <select class="select-input-field" id="exampleSelectWithHelperAndLink" aria-describedby="selectTextHelpBlock">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="selectTextHelpBlock" class="helper-text">
    Choose a number.
  </p>
  <a href="#" id="selectTextLinkBlock" aria-labelledby="selectTextLinkBlock labelSelectWithHelperAndLink" class="link link-small">
    More information <span class="visually-hidden">about the</span>
  </a>
</div>
<div class="select-input">
  <div class="select-input-container">
    <label id="labelSelectWithLink" for="exampleSelectWithLink">Select example with link text</label>
    <select class="select-input-field" id="exampleSelectWithLink">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <a href="#" id="selectTextLink" aria-labelledby="selectTextLink labelSelectWithLink" class="link link-small">
    More information <span class="visually-hidden">about the</span>
  </a>
</div>
html

Layout

Max width

By default select inputs will span the whole width of their parent container, to limit the width of the select input on wider parent container, add a .component-max-width to the .select-input container.

Helper text. 

<div class="select-input component-max-width">
  <div class="select-input-container">
    <label for="exampleSelectMaxWidth">Select example max width</label>
    <select class="select-input-field" id="exampleSelectMaxWidth" aria-describedby="selectMaxWidthHelper">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="selectMaxWidthHelper" class="helper-text">
    Helper text.
  </p>
</div>
html

States

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance, remove pointer events, and prevent focusing.

<div class="select-input mb-medium">
  <div class="select-input-container">
    <label for="exampleDisabledSelect">Disabled select example</label>
    <select disabled class="select-input-field" id="exampleDisabledSelect">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
<div class="select-input">
  <div class="select-input-container select-input-container-outlined">
    <label for="exampleOutlinedDisabledSelect">Disabled outlined select example</label>
    <select disabled class="select-input-field" id="exampleOutlinedDisabledSelect">
      <option value="" disabled></option>
      <option value="1">One</option>
      <option value="2" selected>Two</option>
      <option value="3">Three</option>
    </select>
  </div>
</div>
html

Invalid

Info

The invalid state is the equivalent of the ‘Error’ state that you can find in the design specification.

To display an invalid select, add .is-invalid to a .select-input-field within the .select-input-container. Please take a look at our Validation page to learn more.

Warning

For accessibility purposes, the invalid state should be associated with a .error-text as a sibling of a .select-input-container and related to it with an aria-describedby attribute when displayed. Note that the .error-text will replace the helper text, so it should be descriptive enough to convey the error note that the .error-text will replace the helper text, so it should be descriptive enough to convey the error and you must dynamically replace the aria-describedby attribute when the select input becomes invalid.

Choose a number.

A number is required.

More information

Choose a number.

A number is required.

More information

Choose a number.

A number is required.

Choose a number.

A number is required. 

<div class="select-input mb-medium">
  <div class="select-input-container">
    <label id="labelErrorSelect" for="exampleErrorSelect">Select example with error</label>
    <select class="select-input-field is-invalid" id="exampleErrorSelect" aria-describedby="numberFeedback">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="numberHelpText" class="helper-text">
    Choose a number.
  </p>
  <p id="numberFeedback" class="error-text">
    A number is required.
  </p>
  <a href="#" id="numberLink" aria-labelledby="numberLink labelErrorSelect" class="link link-small">
    More information <span class="visually-hidden">about the</span>
  </a>
</div>
<div class="was-validated">
  <div class="select-input mb-medium">
    <div class="select-input-container">
      <label id="labelErrorValidatedSelect" for="exampleErrorValidatedSelect">Select example with validated error</label>
      <select class="select-input-field is-invalid" id="exampleErrorValidatedSelect" aria-describedby="validatedNumberFeedback">
        <option value="" disabled selected></option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <p id="validatedNumberHelpText" class="helper-text">
      Choose a number.
    </p>
    <p id="validatedNumberFeedback" class="error-text">
      A number is required.
    </p>
    <a href="#" id="validatedNumberLink" aria-labelledby="validatedNumberLink labelErrorValidatedSelect" class="link link-small">
      More information <span class="visually-hidden">about the</span>
    </a>
  </div>
</div>
<div class="select-input mb-medium">
  <div class="select-input-container select-input-container-outlined">
    <label id="labelErrorSelect2" for="exampleErrorSelect2">Outlined select example with error</label>
    <select class="select-input-field is-invalid" id="exampleErrorSelect2" aria-describedby="numberFeedback2">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="numberHelpText2" class="helper-text">
    Choose a number.
  </p>
  <p id="numberFeedback2" class="error-text">
    A number is required.
  </p>
</div>
<div class="select-input mb-medium">
  <div class="select-input-container">
    <svg aria-hidden="true">
      <use xlink:href="/orange/docs/1.0/assets/img/ouds-web-sprite.svg#heart-empty"/>
    </svg>
    <label id="labelErrorSelect3" for="exampleErrorSelect3">Select example with error and icon</label>
    <select class="select-input-field is-invalid" id="exampleErrorSelect3" aria-describedby="numberFeedback3">
      <option value="" disabled selected></option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
  </div>
  <p id="numberHelpText3" class="helper-text">
    Choose a number.
  </p>
  <p id="numberFeedback3" class="error-text">
    A number is required.
  </p>
</div>
html

Optgroup

Group options with <optgroup>:

<div class="select-input">
  <div class="select-input-container">
    <label for="exampleGroupSelect">Grouped select example</label>
    <select class="select-input-field" id="exampleGroupSelect">
      <option value="" disabled selected></option>
      <optgroup label="First category">
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </optgroup>
      <optgroup label="Second category">
        <option value="4">Four</option>
        <option value="5">Five</option>
        <option value="6">Six</option>
      </optgroup>
    </select>
  </div>
</div>
html