@coopdigital/component-searchable-dropdown

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.