abaabil.combobox

ComboBox Component

The ComboBox component is a versatile and customizable dropdown selection component built with React. It supports different variants, sizes, icons, and states, making it suitable for a wide range of use cases.

Usage

import React, { useState } from 'react';
import ComboBox from './path-to-combobox';

const options = [
  { key: '1', label: 'Option 1', icon: 'icon1' },
  { key: '2', label: 'Option 2', icon: 'icon2' },
  { key: '3', label: 'Option 3', icon: 'icon3' },
];

const App = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleChange = (option) => {
    setSelectedOption(option);
    console.log('Selected option:', option);
  };

  return (
    <div>
      <ComboBox
        options={options}
        placeholder="Select an option"
        onChange={handleChange}
        variant="primary"
        size="base"
      />
    </div>
  );
};

export default App;

Props

Prop	Type	Default	Description
icon	string	null	Icon to display in the button. Uses the Icon component.
actionIcon	string	null	Icon to display on the right side of the button. Uses the Icon component.
size	string	base	The size of the button. Can be sm, base, or lg.
options	array	[]	Array of options to display in the dropdown. Each option should be an object with key, label, and optionally icon.
variant	string	primary	The button variant. Can be primary, secondary, tertiary, success, or error.
onChange	function	null	Callback function to handle selection changes.
placeholder	string	''	Placeholder text to display in the button when no option is selected.
className	string	''	Additional class names to apply to the button.
fullWidth	boolean	false	Whether the button should take the full width of its container.
rounded	boolean	false	Whether the button should have rounded corners.
outlined	boolean	false	Whether the button should be outlined.

Variants

• primary: Default button style with primary background and text.
• secondary: Secondary button style with secondary background and text.
• tertiary: Tertiary button style with tertiary background and text.
• success: Success button style with success background and text.
• error: Error button style with error background and text.

Sizes

• sm: Small button size.
• base: Base button size.
• lg: Large button size.

Example

import React, { useState } from 'react';
import ComboBox from './path-to-combobox';

const options = [
  { key: '1', label: 'Option 1', icon: 'icon1' },
  { key: '2', label: 'Option 2', icon: 'icon2' },
  { key: '3', label: 'Option 3', icon: 'icon3' },
];

const Example = () => {
  const [selectedOption, setSelectedOption] = useState(null);

  const handleChange = (option) => {
    setSelectedOption(option);
    console.log('Selected option:', option);
  };

  return (
    <div>
      <ComboBox
        options={options}
        placeholder="Select an option"
        onChange={handleChange}
        variant="primary"
        size="base"
      />
    </div>
  );
};

export default Example;

This example demonstrates various ways to use the ComboBox component, showcasing different variants, sizes, and states.