Help and critique wanted: Type-ahead with checkboxes and radio

[jamesmckechnie]

Help and critique wanted: Type-ahead with checkboxes and radio

I’m looking for feedback, examples of guidance on how to do accessible type-ahead in conjunction with radios and check boxes.

I’m designing some forms for a charity which have questions with long lists of options (20+ options. I want to know how others could solve this problem.

Background

The form is going to be used by an internal team not the public.

There are 5 users who will fill in this form 5-10 times a day.

The form requires this component (or something like it) for around 15 different fields. Although the form is broken into steps.

Functionality intention

User focuses on text field,
List expands,

If user searches
List will reduce to match input,
User selects correct item,
If no match, user will see “no match” or an option to add new item

If user scrolls
User can scroll to find the option(s) the want,
User selects correct item,

User navigates away from the list,
List collapses and checked radio/checkboxes are shown.

[IxDbloke]

Hi, I've used a imilar pattern in Unadjusted. It's useful for selecting multiple items in a long list. I can't see anything wrong with the way you've done it here.
You could show a summary of how many items you've selected, for accessibility. Something like:
Select ice cream flavours
[dropdown with typeahead]
3 selected:

• vanilla
• chocolate
• strawberry
  ...
  I don't think you'd need it for radio buttons, though? I can't think of a piece of software where you'd have lots of options which are all mutuallly-exclusive.