Multi-Select Component

[JoshKesic]

What

We are looking to implement a component that is a hybrid version of: Selects, Checkboxes and Search boxes. The multi-select component provides the following functionality:

• A select like component that can store a large list of selectable items in a collapsable control
• The ability to search for items and order the most relevant items to the top of the list
• Options to select/deselect all items with one click
• Options to select/deselect one or more items in the list

Example

1. Collapsed initial state of the multi-select component with no selected items
2. Expanded state of the multi-select component with a dynamic search bar at the top of the component (default focus), select/deselect all items underneath; followed by a list of remaining items with 2 items having been selected
3. Collapsed final state of the multi-select component with 2 selected items

Why

The need for a multi-select component is required for making large lists of items (30+ items) searchable and selectable. By integrating a multi-select component within the GOV.UK Design System, we are supporting the functionality required by users to traverse and select large lists of items efficiently.

Perks

• Streamlines the selection process
• Improves similar filters such as scrollable checkboxes
• Enhances the user interface by minimising the display space through the implementation of collapsable filters

Anything else

• React Multi-Select Component Example

[CharlotteDowns]

This could be a variant of the Select component #60

[joelanman]

GOV.UK Search uses a component called Option Select for this:
https://govuk-finder-frontend.herokuapp.com/component-guide/option-select

[PraveenNagaIXD]

Any update on this component? @JoshKesic Did you manage to build the proposed component? The existing 'option select' component doesn't work visually when you have to use it as a filter on top of the page as it takes too much space.

[JoshKesic]

@PraveenNagaIXD There are no updates that I am aware of. From what I've looked into, multi-select components do not test well with users; there are also a number of accessibility issues that need to be addressed. I am not a GDS developer, so can't provide an answer as to whether this component is being developed by them or not.

I do share your pain with the existing components though; multi-select would be an ideal addition to the GDS, I just hope its something they will work on in the near future. Here are a couple of resources that may aid with your exploration, custom styling can always be applied to adhere to the GOV UK look and feel:

• https://not-gov.uk/components?name=Form%20field
• https://mdbootstrap.com/docs/standard/extended/multiselect/

Civil Service Jobs currently utilise a multi-select component; although I do believe there are a number of accessibility issues that were identified.