abaabil.combobox

ComboBox Component

The ComboBox component is an accessible, customizable dropdown selection input that combines a button with a list of options.

Installation

npm install abaabil.temp.combobox

Importing

Import the ComboBox component from the package:

import ComboBox from 'abaabil.temp.combobox';

Basic Usage

<ComboBox
  options={[
    { key: 'option1', label: 'Option 1' },
    { key: 'option2', label: 'Option 2' },
  ]}
  onChange={(selectedOption) => console.log(selectedOption)}
  placeholder="Select an option"
/>

Examples

Standard ComboBox

<ComboBox
  options={[
    { key: 'apple', label: 'Apple' },
    { key: 'banana', label: 'Banana' },
    { key: 'cherry', label: 'Cherry' },
  ]}
  onChange={(selectedOption) => console.log(selectedOption)}
  placeholder="Select a fruit"
/>

ComboBox with Icons

<ComboBox
  icon="photo"
  actionIcon="chevron-down"
  options={[
    { key: 'apple', label: 'Apple', icon: 'apple' },
    { key: 'cherry', label: 'Cherry', icon: 'cherry' },
    { key: 'lemon', label: 'Lemon', icon: 'lemon' },
  ]}
  onChange={(selectedOption) => console.log(selectedOption)}
  placeholder="Select a fruit"
/>

ComboBox with Custom Styles

<ComboBox
  options={[
    { key: 'option1', label: 'Option 1' },
    { key: 'option2', label: 'Option 2' },
    { key: 'option3', label: 'Option 3' },
  ]}
  onChange={(selectedOption) => console.log(selectedOption)}
  placeholder="Custom style"
  buttonClassName="bg-amber-500 hover:bg-amber-600 focus:bg-amber-700 active:bg-amber-800"
  ulClassName="rounded-xl p-4 space-y-3"
  liClassName="rounded-xl"
/>

Properties

Property	Type	Description	Default	Required
options	Array<{ key: string, label: string, icon?: string }>	Array of option objects to display in the dropdown	-	Yes
onChange	function	Function called when an option is selected	-	Yes
placeholder	string	Placeholder text when no option is selected	-	No
icon	string	Icon ID to display at the start of the button	-	No
actionIcon	string	Icon ID to display at the end of the button	-	No
buttonClassName	string	Additional CSS classes for the button element	-	No
ulClassName	string	Additional CSS classes for the ComboBox container	-	No
liClassName	string	Additional CSS classes for the list item elements	-	No

Styling

The ComboBox component uses default styling classes which can be customized using the buttonClassName, ulClassName, and liClassName props.

Accessibility

The ComboBox component enhances accessibility by:

• Using proper ARIA roles, states, and properties for combobox, listbox, and option elements
• Supporting full keyboard navigation (arrow keys, Enter, Escape, Tab)
• Providing visual distinction and screen reader announcements for selected and highlighted options
• Managing focus appropriately, including focus trapping within the dropdown when open
• Offering clear labeling to convey the purpose of the ComboBox to all users
• Ensuring compatibility with various assistive technologies

Notes

• The component uses icons from the abaabil.temp.icon package. Ensure this dependency is available in your project.
• The ComboBox is designed to be fully accessible, following W3C WAI-ARIA Authoring Practices guidelines.