mi6 / mi6/ic-ui-kit

Autocomplete multi-select

Open
#226 3 comments 0 reactions 0 assignees View on GitHub
select component
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.