Searchable Dropdown
A Co-op styled searchable dropdown (aka combobox) React component built using Downshift.
Installation
Install via npm
or yarn
:
npm install @coopdigital/component-searchable-dropdown
yarn add @coopdigital/component-searchable-dropdown
Prerequisites
You must have the Co-op foundations and foundations-forms css packages installed in your project. You will also need React 17 or higher.
@import "@coopdigital/foundations/dist/vars/vars.css";
@import "@coopdigital/foundations/dist/foundations.css";
@import "@coopdigital/foundations-forms/dist/forms.css";
Importing
@import "@coopdigital/component-searchable-dropdown/dist/styles.css";
import { SearchableDropdown } from "@coopdigital/component-searchable-dropdown";
Basic Usage
<SearchableDropdown
label="My favourite animal is a..."
id="animals"
options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
/>
Required props
These props are required for the component to render:
prop | type | description |
---|---|---|
label |
string |
Text for the associated element label. |
id |
string |
A unique identifier for the element. |
options |
array |
Array of strings to use for option values |
Additional props
The component can be further customised using the props below:
prop | type | description | default |
---|---|---|---|
className |
string |
Additional class (or classes) to append to the outer coop-c-combobox element | - |
compact |
bool |
Reduces the input font size to 1rem | false |
noResults |
string |
String to display when no matching options are found | No relevant options |
onSelect |
func |
Callback function when an option is selected, receives the selected value as its only parameter | - |
placeholder |
string |
Placeholder text to display when no option is selected | - |
style |
object |
CSS object with inline styles to be added to the outer coop-c-combobox element | - |
Kitchen sink
<SearchableDropdown
label="My favourite animal is a..."
id="animals"
options={["Cat", "Dog", "Frog", "Panda", "Sloth"]}
className="additional-class another-class"
compact
placeholder="Select option"
onSelect={(value) => {
console.log(value);
}}
style={{ width: "300px" }}
/>
License
Copyright (c) 2022 Co-operative Group Limited. Licensed MIT.