Autocomplete multi-select
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
## Summary
Autocomplete fields act like a combination of a text field and a droplist. A user can open the drop list to view the options, but can also type into the field to filter the option list to more easily find the desired option.
high complexity
## 💬 Description
Additions to the select to allow for an autocomplete variant which also allows multiple options to be selected from the dropdown.
## 💰 Use value
Foundational component required to provide ICDS users the tools to build rich applications. Autocomplete fields allow users to more easily find a desired option out of a large list of options. The dual navigation of browse and type allows easier location of the correct option. Multi-select allows users to select multiple options where this should be desired/required.
## Additional info
📚 User Story 📚
**As an** ICDS user
**I need** to have a multi-select options
**So that** I can use the Autocomplete pattern in multi-select dropdowns
**As an** ICDS user
**I need** the autocomplete field to display the following selection states
Unselected
Selected
**So that** they can see the selected option when the list is closed.
**As an** ICDS user
**I need** to see an option list when focussed on the field
**So that** I can see the available options.
**As an** ICDS user
**I need** to see the following option list variants
Simple ordered
Sectioned
Recommendations
Selection bar (with chips?)
**So that** I can display larger options lists more clearly.
**As an** ICDS user
**I need** each option in an option list to have the following states
Unselected: Default
Unselected: Hover
Unselected: Pressed
Unselected: Disabled
Unselected: Focussed
Selected: Default
Selected: Hover
Selected: Pressed
Selected: Disabled
Selected: Focussed
**So that** they get visual feedback about what items they are interacting with.
**As an** ICDS user
**I need to** be able to clear my selection from the input field
**So that** i can quickly clear my selection and pick another one.
**As an** ICDS user
**I need** to have a dense option
**So that** I can align autocomplete fields to other dense UI elements
Accessibility research -
https://alphagov.github.io/accessible-autocomplete/examples/
Contributor guide
Research direction
Start by reviewing the existing select component and the accessible-autocomplete research link in the issue. Define how autocomplete multi-select should support selected and unselected values, option-list variants, interaction states, clearing, and dense layout. Done means these behaviors and states are implemented and verified across the stated use cases.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100