Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Select

Ingress.

Guidelines

Short description

The select component allows users to choose one option for a list of values. With the select component a user can give an input based on a list of options. Selects are often used in form when choosing one out of many values.

When and how to use it

Dos

  • Use the select in forms when users are selecting from a list of values and submitting that data.

Don’ts

  • Don't use the select component if there are fewer than three values. Then it’s prefered to use radio buttons

 

Select versus Dropdown

The Select and Dropdown components can look similar, but they have different functionality and use cases:

  • A Select presents a list of values where users can select one option. It’s preferred to be used in forms that will be submitted.
  • A Dropdown presents a list of values where users can select one or more options. Dropdowns can be used outside of forms to take an action or sort content.
  • A Dropdown’s list-box items have custom styling and can contain custom content such as icons or badges.

A key difference between the components is the underlying code for the components. The Select component is based on the native select HTML Element thus making the appearance of the component being determinated by the browser, the dropdown component can be styled as needed.

Behaviour

If the text inside the select is longer than the element the text will get truncated with three dots (…)

Select in Chrome MacOS

Select in Chrome MacOS

Select in Firefox MacOS

Select in Firefox MacOS

 

Writing

-

Accessibility

Result from the latest accessibility review of the component (React): 2023-02-28

  • Contrast: good
  • Colour-blindness: good
  • Code + aria: ok
  • Touch + keyboard: ok - a bit unlogical with space/enter
  • Dark-mode: bad - no dark
  • Focus: ok - need new style
  • Reader: ok

 

Specification

-

Page last updated

Feedback

Was this helpful?