has been released! Read the upgrade guide


The documentation on this page is considered legacy.

We will be updating this content to our new principle-based format in the near future.


A form component used to allow the user to pick a value from a list.


The Select input is useful when the user needs to select an option from a long list, typically more than seven options. Users can click on a control to let the list drop down and the user can then scroll through and pick the desired option. Alternatively the control lets a user select the field and start typing and the list of options will appear and is filtered by the value the user has typed.


  1. Container. The Container wraps the entire component. When the Select is focused, the sheet expands from the bottom of the Select, covering any content immediately below the Select component.

  2. Label. The label provides context to the options available in the Select.

  3. Value. The Value is the currently selected Item from the Sheet.

  4. Sheet. By default, the Sheet is hidden. When the Select is in a focused state, the Sheet will appear with the list of Select items available. It can only display a maximum of five items before it scrolls.

  5. Item. An Item in the Sheet can be selected by the user. When the user clicks on the item, the sheet collapses and changes the Value to the selected Item.

  6. Item Active. When the user opens the Sheet again, the last selected Item will be highlighted.


The Select component and the Select Item sub component both have two states - Default and Active.

The MOD.UK Design System provides guidance and tools for building high–quality Services within the UK Ministry of Defence. This project is open source and its source code is available on GitHub.

All content is available under the Apache 2.0 licence, except where otherwise stated.

© Crown copyright