/multi-select

Custom Multi-Select. React.js, Next.js, Tailwind

Primary LanguageJavaScript

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.

alt text

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