@bolttech/atoms-select

Select Component

The Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components are React components designed to provide customizable dropdown select inputs. These components allow users to choose from a set of options using dropdown menus, with optional headers for grouping.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-select

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-select

Once you have the required dependencies installed, you can start using the Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components in your React application.

Usage

The Select component provides a dropdown menu for selecting options, while the SelectWithHeaders component groups options under customizable headers. Both components support extensive customization through various props.

In addition, SelectCheckbox and SelectCheckboxWithHeaders are available, offering checkboxes within the dropdown for multi-selection capabilities. SelectCheckboxWithHeaders also allows for grouping options with headers, combining structured selection with the flexibility of multiple choices.

To use these components, import them and include them in your JSX:

import React from 'react';
import { Select, SelectWithHeaders } from '@bolttech/atoms-select';
import { bolttechTheme, BolttechThemeProvider, SelectCheckbox, SelectCheckboxWithHeaders } from '@bolttech/frontend-foundations';

function App() {
  const options = [
    { id: 'option1', label: 'LabelOption 1', value: 'value1' },
    { id: 'option2', label: 'LabelOption 2', value: 'value2' },
  ];

  const optionsWithHeaders = [
    {
      header: 'Header 1',
      options: [
        { id: 'option1', label: 'LabelOption 1', value: 'value1' },
        { id: 'option2', label: 'LabelOption 2', value: 'value2' },
      ],
    },
    {
      header: 'Header 2',
      options: [
        { id: 'option3', label: 'LabelOption 3', value: 'value3' },
        { id: 'option4', label: 'LabelOption 4', value: 'value4' },
      ],
    },
  ];

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Select options={options} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />

      <SelectWithHeaders options={optionsWithHeaders} onChange={(selectedOption) => console.log('Selected:', selectedOption)} />

      <SelectCheckbox
        options={options}
        onChange={(selectedOption) => console.log('Selected:', selectedOption)}
      />

      <SelectCheckboxWithHeaders
        options={options}
        onChange={(selectedOption) => console.log('Selected:', selectedOption)}
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components accept similar props:

Select Props

Prop	Type	Description
id	string	The HTML id attribute for the select component.
dataTestId	string	The data-testid attribute for testing purposes.
options	OptionType[]	An array of option objects to be displayed in the menu.
onChange	function	A callback function triggered on option change.
active	OptionType	The currently active option.
position	string	The position of the dropdown menu (e.g., 'top', 'bottom').

SelectWithHeaders Props

Prop	Type	Description
id	string	The HTML id attribute for the select component.
dataTestId	string	The data-testid attribute for testing purposes.
options	OptionWithHeaderType[]	An array of option objects grouped by headers.
onChange	function	A callback function triggered on option change.
active	OptionType	The currently active option.
position	string	The position of the dropdown menu (e.g., 'top', 'bottom').

SelectChecbox Props

Prop	Type	Description
id	string	The HTML id attribute for the select component.
dataTestId	string	The data-testid attribute for testing purposes.
options	OptionType[]	An array of option objects to be displayed in the menu.
onChange	function	A callback function triggered on option change.
active	OptionType[]	List of the current active option.
position	string	The position of the dropdown menu (e.g., 'top', 'bottom').

SelectCheckboxWithHeaders Props

Prop	Type	Description
id	string	The HTML id attribute for the select component.
dataTestId	string	The data-testid attribute for testing purposes.
options	OptionWithHeaderType[]	An array of option objects grouped by headers.
onChange	function	A callback function triggered on option change.
active	OptionType[]	List of the current active option.
position	string	The position of the dropdown menu (e.g., 'top', 'bottom').

Example

Here's an example of using the Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components:

import { Select, SelectWithHeaders, SelectCheckbox, SelectCheckboxWithHeaders } from './atoms-select';

<Select
  options={options}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

<SelectWithHeaders
  options={optionsWithHeaders}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

<SelectCheckbox
  options={options}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

<SelectCheckboxWithHeaders
  options={options}
  onChange={(selectedOption) => console.log('Selected:', selectedOption)}
/>

This will render a Select component with a dropdown menu, a SelectWithHeaders component with grouped options and headers, a SelectCheckbox component for multi-selection with checkboxes, and a SelectCheckboxWithHeaders component for grouped options with checkboxes and headers.

Contributing

Contributions to the Select, SelectWithHeaders, SelectCheckbox, and SelectCheckboxWithHeaders components are welcome. If you encounter any issues or have suggestions for enhancements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.