Select

Quick start

Here's a quick start guide to get started with the Select component

Importing Component

import { Select } from "@hover-design/react";

Code Snippets and Examples

Select Default

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select options={options} />
</div>;

Select with Label

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select label="This is a Select Label" options={options} />
</div>;

This is a Select Label

Select Rounded

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select borderRadius="20px" options={options} />
</div>;

Select Searchable (ComboBox)

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select placeholder="Search Here!" isSearchable options={options} />
</div>;

Select Clearable

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select isClearable options={options} />
</div>;

Select Error

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select error="This is an error" options={options} />
</div>;

This is an error

Select Loading

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select options={options} isLoading />
</div>;

Select with Loading Options

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" },
];

const loadingOptions = {
    loadingContent: "Data is Loading",
    loader: <Loader color="orange" />,
  }

<div className="App">
  <Select options={options} isLoading loadingOptions={loadingOptions} />
</div>;

Select Disabled

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select isDisabled options={options} />
</div>;

Controlled Select

const [selectedValue, setSelectedValue] = useState("first");

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select
    value={selectedValue}
    onChange={(value) => setSelectedValue(value)}
    options={options}
  />
</div>;

MultiSelect

const options = [
  { label: "First", value: "first" },
  { label: "Second", value: "second", disabled: true },
  { label: "Third", value: "third" },
  { label: "Fourth", value: "fourth" }
];

<div className="App">
  <Select isMulti options={options} />
</div>;

Note: All the above mentioned combinations Eg. Searchable, Cleareable, Disabled etc...are also present with MultiSelect

Props Reference

Attributes	Values	Default Value	Optional ?
placeholder	string	Pick one	Yes
label	string		Yes
options	Array of Options Object		No
value	Options Object when isMulti is true then value is Array of Options Object		Yes
isMulti	boolean	false	Yes
color	string	#2F80ED	Yes
width	string	100%	Yes
isSearchable	boolean	false	Yes
error	boolean	false	Yes
maxDropDownHeight	string	auto	Yes
minHeight	string	40px	Yes
zIndex	string	1	Yes
borderRadius	string	0	Yes
onChange	(selectedOption,event)=>void	()=>{}	Yes
isDisabled	boolean	false	Yes
isClearable	boolean	false	Yes
nothingFoundLabel	string | JSX Element	Nothing Found!	Yes
DropIcon	JSX Element		Yes
onDropDownOpen	()=> void		Yes
onDropDownClose	()=> void		Yes
isLoading	boolean	false	Yes
useDropdownPortal	boolean	false	Yes
closeDropdownPortalOnScroll	boolean	false	Yes
useSerialSearch	boolean	false	Yes
loadingOptions	Loading Options	false	Yes

Option Object

Key	type	Optional ?
label	string	No
value	string | number	No
disabled	boolean	Yes
ref	MutableRefObject<HTMLDivElement>	Yes

Loading Option

Key	type	Optional ?
loadingContent	ReactNode	Yes
loader	ReactNode	Yes

Keyboard Controls

Keyboard controls will only work when the Select is focused (selected)

Key	type
Space	Opens Options List
ArrowDown	Next Option
ArrowUp	Previous Option
Home	if not disabled First Option
End	if not disabled Last Option
Backspace	if isMulti Clears the last selected pill