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.

[GrahamHNHSBSA]

Hi folks, I'm part of a crew at NHS BSA. I would be keen to share with you what we're doing on a multi-select component and where we landed with a fall back non-javascript solution.

We have a service where a super user (internal staff) are using a form which asks about a patients nationality. Of course, someone could have multi nationalities.

A simple question to ask, Nationality (optional).

When the user adds a few nationalities, those are displayed under the dry down.
There could be an issue of the nationalities not being seen as they appear under the select input but this will never appear on a smaller mobile screen and our users are trained.

I'm open to any questions or feedback, assumptions, that you might have on my approach.

Have a grand day

[joelanman]

@GrahamHNHSBSA this is the pattern we used on Register to vote, Nationality > Other (page 2)

https://www.registertovote.service.gov.uk

[GrahamHNHSBSA]

@joelanman thanks for sharing. I did explore multiple selects appearing after a 'Add' button click. I hesitated after a designer raised a risk with duplicate selects might confuse users.

Might you have discovered this, thought of this?

[joelanman]

@GrahamHNHSBSA no that wasn't an issue, though I think either of our approaches are probably fine! We do add some text for screen reader users to differentiate between them