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 "react-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.