Skip to main content

Updated multi-selects documentation to use live search on all examples for keyboard accessibility

What components does this change affect?

This change affects all implementations of the multi select component not currently using the live-search option.

Single select lists are not affected by this change.

What changed

Multi-select lists must now have live search enabled to support keyboard navigation and accessibility.

For consuming applications using the turas-select-list Tag Helper, add the live-search parameter to multi-select lists if not previously added.

 

Before:

<turas-select-list 
    asp-for="MultiSelect" 
    asp-items="MultiSelects" 
    multiple 
    placeholder="Please select">
</turas-select-list>

After:

<turas-select-list 
    asp-for="MultiSelect" 
    asp-items="MultiSelects" 
    multiple 
    live-search 
    placeholder="Please select">
</turas-select-list>

HTML structure changes:

  • Replaced turas-select2-live-search="false" with turas-select2-live-search="true"

Before

<select 
    class="form-control turas-select2"
    multiple="multiple"
    turas-select2-live-search="false"
    ...>

After

<select 
    class="form-control turas-select2"
    multiple="multiple"
    turas-select2-live-search="true"
    ...>

Why this change was made

This change addresses an accessibility issue where multi-select lists could not be fully navigated using the keyboard when live search was not enabled.

Enabling live search provides a search input within the multi-select, allowing users to interact with and navigate the available options using the keyboard.

Benefits include:

  • Improved keyboard accessibility – provides a way for keyboard users to navigate and interact with multi-select options
  • Improved accessibility – supports users who rely on keyboard interaction or assistive technologies
  • Consistent behaviour – ensures multi-selects use the same accessible interaction pattern

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing all multi-select lists in your application.

Areas worth checking:

  • all multi-select turas-select-list implementations have the live-search parameter
  • the search option is displayed when using a multi-select
  • multi-selects can be navigated and operated using the keyboard
  • users can select and remove multiple options as expected
  • existing validation continues to work as expected
  • selected values continue to post back and bind to the expected model properties
  • form submission continues to behave as expected

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

As part of your application checks, we recommend confirming that selected values continue to submit and bind correctly, particularly for multi-select fields.

Summary

This change requires live search to be enabled on multi-select lists to improve keyboard accessibility.

Consuming teams using the turas-select-list Tag Helper should add the live-search parameter to their multi-select implementations. Single-select lists are unaffected.

Internal reference

Design System internal reference: 104892

Was this page helpful?