Code Challenge - Create a multi-select input

Goal of this challenge is to implement a reusable multi-select input component with React and Tailwind CSS.

Requirements

• Selected items should be displayed as dismissable badges
• Component must be styled with Tailwind CSS
• Selectable options should be passed as prop
• Selected items should be passed as prop (Controlled)
• Changes should be returned as event (Controlled)
• Installed npm packages should be used only
• (Optional) Input should be keyboard accessible
• (Optional) Input should be dark mode compatible

Results

• Сomponent that meets the task requirements has been created
• The changes did not affect props and returning changes
• Options were extended to pass "disabled" attribute
• Text input added with the ability to enter and search for options
• Component is accessible for native HTML keyboard events (Tab, Enter, Space)
• Styles worked out according to the screenshot for use with light and dark theme