Skip to content

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

Notifications You must be signed in to change notification settings

Antreesy/multi-select

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Максим Сухарев
Oct 10, 2022
cdd6696 · Oct 10, 2022

History

5 Commits
Oct 10, 2022
Oct 10, 2022
Aug 24, 2022
Oct 10, 2022
Aug 24, 2022
Aug 24, 2022
Aug 24, 2022
Oct 10, 2022
Aug 24, 2022
Aug 24, 2022
Aug 24, 2022
Aug 24, 2022
Aug 24, 2022
Oct 10, 2022

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published