Combobox Component

The Combobox component is a reusable React component that provides a searchable and selectable list of options, designed to be used as an input control. This is an accessible and keyboard-friendly dropdown combobox UI element. Users can select an option from the dropdown list or enter a custom value.

Props

The component accepts the following props:

Prop	Type	Required	Default	Description
options	Object[] or string[]	Yes	-	An array of options for the dropdown. Each option can be an object with a value and label property, or a string.
labelName	string	No	-	A label for the combobox.
delayTime	number	No	1	The delay time (in milliseconds) before filtering options based on user input.
placeholder	string	No	-	A placeholder text for the input field.
onChange	(value: string | null) => void	Yes	-	A function to be called when an option is selected. The selected value is passed as an argument.
isSelectedIconOnLeft	Boolean	No	false	Determines whether the selected icon is displayed on the left or right of the input field.
renderOption	(option: Object | string) => React.ReactNode	No	-	A function to render a custom option.
selectionKey	string or keyof Object	Yes	-	The key to use when filtering options based on user input.
uniqueKey	string	Yes	-	A unique key to identify the component.
value	string	No	""	The initial value for the input field.
IconForDropDown	ReactElement or string	No	-	A custom icon to use for the dropdown button.
className	string	No	-	A custom CSS class to apply to the component.

Usage

To use the Combobox component, import it into your React component and render it with the required props.

Example:

import Combobox from "./Combobox";

function App() {
  const options = [
    { id: 1, name: "Option 1" },
    { id: 2, name: "Option 2" },
    { id: 3, name: "Option 3" },
  ];

  const handleChange = (value) => {
    console.log(`Selected option: ${value}`);
  };

  return (
    <Combobox
      options={options}
      labelName="Select an option"
      onChange={handleChange}
      selectionKey="name"
      uniqueKey="id"
    />
  );
}

Functionality

The Combobox component provides the following functionality:

• Displays a dropdown button that can be clicked to open or close the options list.
• Displays an input field that can be used to filter the options based on the user input.
• Displays the selected option(s) as tags or a single tag with an icon indicating the selection status.
• Allows users to select one or more options from the list.
• Allows users to remove the selected option(s).
• Allows users to navigate the options list using the keyboard.
• Closes the options list when the user clicks outside of the component or presses the escape key.

Accessibility

This component is designed to be accessible and keyboard-friendly. It includes the following features:

• ARIA attributes for the combobox, input field, and listbox
• Keyboard navigation for the dropdown list
• Focus management for the input field and dropdown list
• Support for screen readers

License

This component is licensed under the MIT License.