# @bolttech/atoms-select

> 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 dropdo

Latest version **0.27.5** (published 2026-06-30) · 0 weekly downloads

## Install

```sh
npm install @bolttech/atoms-select
pnpm add @bolttech/atoms-select
yarn add @bolttech/atoms-select
bun add @bolttech/atoms-select
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.27.5 |
| Published | 2026-06-30 |
| First published | 2023-03-30 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 116.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | andsfranbolt, danielkhalebbatista, pauloazevedo-ed, bruno.gomes, plinio.altoe, joaoteixeira20, esteve-cabrera, jabolttech, lucasvpaiva, herberts.fortuna, matheus.maciel.bolttech, silas.silva.bolttech |

## Links

- npm: https://www.npmjs.com/package/@bolttech/atoms-select
- npm.io page: https://npm.io/package/@bolttech/atoms-select

## Dependencies (4)

- [react](https://npm.io/package/react.md) 19.1.2
- [styled-components](https://npm.io/package/styled-components.md) 6.1.1
- [@bolttech/ui-utils](https://npm.io/package/@bolttech/ui-utils.md) 0.6.7
- [@bolttech/atoms-checkbox](https://npm.io/package/@bolttech/atoms-checkbox.md) 0.23.5

## Recent versions

- 0.27.5 (latest) — 2026-06-30
- 0.27.4 — 2026-06-16
- 0.27.3 — 2026-06-08
- 0.27.2 — 2026-04-14
- 0.27.0 — 2026-04-08
- 0.25.1 — 2026-03-05
- 0.25.0 — 2025-12-17
- 0.24.1 — 2025-09-15
- 0.24.0 — 2024-12-05
- 0.23.0 — 2024-11-18
- 0.22.0 — 2024-09-04
- 0.21.3 — 2024-07-09
- 0.21.2 — 2024-04-08
- 0.21.1 — 2024-03-04
- 0.21.0 — 2024-02-12
- … 35 more at https://npm.io/package/@bolttech/atoms-select/versions

## README

# 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](#installation)
- [Usage](#usage)
- [Props](#props)
- [Example](#example)
- [Contributing](#contributing)

## Installation

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

### Installation

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

or

```bash
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:

```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:

```jsx
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.

---
_Source: https://npm.io/package/@bolttech/atoms-select · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._