Sobeys Logo

Select Component

This is a fully customizable and accessible Select (Dropdown) component built with React and styled using Tailwind CSS. It is designed to replicate the native select element’s behavior while providing enhanced styling and interaction flexibility suitable for modern UIs.

Features Implemented

  • Keyboard navigation (Enter, Space, Arrow keys, Tab)
  • Aria attributes for accessibility
  • Custom icon support
  • Click outside to close
  • Highlight selected option with optional checkmark
  • Supports default Value and default Label

Custom Select Example

Selected value: None