Comboboxes NPM

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.