Overview
Build a robust, accessible Multi-Select Input component where selected items are displayed as 'Chips' or 'Pills' within the input area. This task evaluates your ability to manage complex UI states, keyboard navigation, and synchronization between a dropdown list and an input field. It is a common pattern used in email clients and tagging systems.
What you need to do / Task
- Input & Filtering: Create an input field that filters a provided list of options as the user types.
- Selection Logic: Clicking an option or pressing 'Enter' on a highlighted item adds it as a 'Chip' inside the input.
- Chip Management: Users must be able to remove chips by clicking an 'X' icon or pressing 'Backspace' when the input is empty.
- Dropdown Toggle: The dropdown should appear when the input is focused and disappear when clicking outside.
UI/UX expectations
- Layout: Chips should wrap gracefully within the input container if they exceed the width.
- Feedback: Highlight the 'active' suggestion in the dropdown during keyboard navigation.
- Empty State: Show a 'No results found' message if the filter matches nothing.
Acceptance criteria
- [ ] Selected items must not appear in the suggestion dropdown.
- [ ] Pressing 'Backspace' when the text input is empty should remove the last added chip.
- [ ] The component must be navigable via Arrow Keys (Up/Down) and selectable via Enter.
- [ ] Clicking the 'X' on a chip removes it from the selection and returns it to the available pool.
Clarifications
- Do I need an API? No, use the provided static mock data.
- Can I use a library? No external UI libraries like Radix or HeadlessUI; build the logic from scratch.