# @bolttech/molecules-dropdown > The **Dropdown** component is a customizable React component that provides a dropdown input with a list of selectable options. Latest version **0.37.8** (published 2026-08-26) · 0 weekly downloads ## Install ```sh npm install @bolttech/molecules-dropdown pnpm add @bolttech/molecules-dropdown yarn add @bolttech/molecules-dropdown bun add @bolttech/molecules-dropdown ``` ## 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.37.8 | | Published | 2026-08-26 | | First published | 2023-03-30 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 261.7 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/molecules-dropdown - npm.io page: https://npm.io/package/@bolttech/molecules-dropdown ## Dependencies (8) - [react](https://npm.io/package/react.md) 19.1.2 - [react-dom](https://npm.io/package/react-dom.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-icon](https://npm.io/package/@bolttech/atoms-icon.md) 0.24.9 - [@bolttech/atoms-input](https://npm.io/package/@bolttech/atoms-input.md) 0.30.5 - [@bolttech/atoms-select](https://npm.io/package/@bolttech/atoms-select.md) 0.27.4 - [@bolttech/default-theme](https://npm.io/package/@bolttech/default-theme.md) 0.18.2 ## Recent versions - 0.37.8 (latest) — 2026-08-26 - 0.37.7 — 2026-07-21 - 0.37.6 — 2026-07-01 - 0.37.5 — 2026-06-29 - 0.37.4 — 2026-06-16 - 0.37.3 — 2026-06-08 - 0.37.2 — 2026-04-16 - 0.37.1 — 2026-04-14 - 0.37.0 — 2026-04-14 - 0.36.0 — 2026-04-08 - 0.34.2 — 2026-03-05 - 0.34.1 — 2026-03-05 - 0.34.0 — 2025-03-14 - 0.33.2 — 2025-01-27 - 0.33.1 — 2024-12-12 - … 67 more at https://npm.io/package/@bolttech/molecules-dropdown/versions ## README # Dropdown Component The **Dropdown** component is a customizable React component that provides a dropdown input with a list of selectable options. ## Installation To use the **Dropdown** component, you need to install the required dependencies: ```bash npm install @bolttech/frontend-foundations @bolttech/molecules-dropdown ``` or ```bash yarn add @bolttech/frontend-foundations @bolttech/molecules-dropdown ``` ## Usage You can utilize the **Dropdown** component by importing it and including it in your JSX. Here's an example: ```jsx import React from 'react'; import { Dropdown } from '@bolttech/molecules-dropdown'; // Adjust the path to your component const options = [ { id: '1', label: 'Option 1', value: 'option1' }, { id: '2', label: 'Option 2', value: 'option2' }, { id: '3', label: 'Option 3', value: 'option3' }, ]; function App() { const handleOptionChange = (selectedOption) => { console.log('Selected option:', selectedOption); }; return (
); } export default App; ``` ## Props The **Dropdown** component accepts the following props: | Prop | Type | Description | | -------------------- | -------------- | --------------------------------------------------------------------------------------------- | | `label` | `string` | Label for the dropdown. | | `variant` | `string` | Variant style of the dropdown. Defaults to `'grey'`. | | `required` | `boolean` | Whether the dropdown is required or not. | | `optionList` | `OptionType[]` | Array of selectable options for the dropdown. | | `disabled` | `boolean` | Whether the dropdown is disabled or not. | | `errorMessage` | `string` | Error message to display when there's an error with the dropdown. | | `urlFilterOptions` | `string` | URL for fetching filtered options based on input. | | `id` | `string` | Component identification. | | `dataTestId` | `string` | The data-testid attribute for testing purposes. | | `filterOptionsParam` | `function` | Function to filter options based on input and URL. | | `value` | `string` | Currently selected value. | | `onChange` | `function` | Callback function triggered when the selected option changes. | | `onBlur` | `function` | Callback function triggered when the dropdown loses focus. | | `onFocus` | `function` | Callback function triggered when the dropdown is focused. | | `placeholder` | `string` | Placeholder text for the input. | | `disableSearch` | `boolean` | Boolean that represent if we should disable user searching on the dropdown. Defaults to false | | `onKeyUp` | `function` | The onkeyup event occurs when the user releases a key on the keyboard | | `onKeyDown` | `boolean` | Onkeydown is an event handler in Javascript that gets called when a key is pressed on the keyboard | | `asyncOptionList` | `boolean` | A boolean prop that controls a different behavior when OptionList are set by an API request | | `helperMessage` | `string` | An optional string to display as a helper message for the dropdown | | `usePortal` | `boolean` | Renders the dropdown options in a portal (`document.body`), useful when inside overflow containers like modals. Defaults to `false`. | ## Functionality The **Dropdown** component provides the following functionality: - Option Selection: Allows the user to select an option from the dropdown. - Input Interaction: The input field can be focused, blurred, and modified. - Filtering: Supports dynamic option filtering based on input and URL. - Accessibility: Proper accessibility structure is maintained for interacting with the dropdown. ## Contribution Contributions to the **Dropdown** component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository. --- _Source: https://npm.io/package/@bolttech/molecules-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._