Select
A select allows users to choose one option from a list of items. Use it when you have >4 options.
A select can allow users to search through a list of choices. When the user types in the input, suggestions are provided.
When an item is selected, it appears highlighted, has a check mark and the primary color.
The selected item replaces the input placeholder.
Best practices
Have a default selected whenever possible
• Sort the list in a logical order. E.g. put the most selected option at the top, or alphabetically.
Sort the list in a logical order. E.g. put the most selected option at the top, or alphabetically.
```js
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } },
{ key: "3", props: { name: "option 3", value: "3" } },
{ key: "4", props: { name: "option 4", value: "4" } },
{ key: "5", props: { name: "option 5", value: "5" } },
{ key: "6", props: { name: "option 6", value: "6" } },
{ key: "7", props: { name: "option 7", value: "7" } },
{ key: "8", props: { name: "option 8", value: "8" } }
];
initialState = {
selectedItem: null
};
const handleItemSelect = item => setState({ selectedItem: item });
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
;
```
```js noeditor
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } },
{ key: "3", props: { name: "option 3", value: "3" } },
{ key: "4", props: { name: "option 4", value: "4" } },
{ key: "5", props: { name: "option 5", value: "5" } },
{ key: "6", props: { name: "option 6", value: "6" } },
{ key: "7", props: { name: "option 7", value: "7" } },
{ key: "8", props: { name: "option 8", value: "8" } }
];
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
{}}
getItemBody={getItemBody}
search
placeholder="Select option"
getSelectedItemBody={getSelectedItemBody}
selected="1"
searchPlaceholder="Search..."
/>
;
```
Disabled
```js
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } }
];
initialState = {
selectedItem: null
};
const handleItemSelect = item => setState({ selectedItem: item });
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
;
```
```js noeditor
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } }
];
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
{}}
getItemBody={getItemBody}
search
disabled
placeholder="Select option"
getSelectedItemBody={getSelectedItemBody}
selected="1"
searchPlaceholder="Search..."
/>
;
```
Select with controlled dropdown visibility
```js
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } },
{ key: "3", props: { name: "option 3", value: "3" } },
{ key: "4", props: { name: "option 4", value: "4" } },
{ key: "5", props: { name: "option 5", value: "5" } },
{ key: "6", props: { name: "option 6", value: "6" } },
{ key: "7", props: { name: "option 7", value: "7" } },
{ key: "8", props: { name: "option 8", value: "8" } }
];
initialState = {
selectedItem: null,
isOpen: false
};
const handleItemSelect = item => setState({ selectedItem: item });
const handleDropdownToggle = isOpen => {
setState(prevState => ({
isOpen
}));
};
const toggleDropdown = () => {
setTimeout(() => {
setState(prevState => ({
isOpen: !prevState.isOpen
}));
});
};
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
{state.isOpen ? "Hide" : "Show"}
;
```
Select with search results empty state
```js
const items = [
{ key: "1", props: { name: "option 1", value: "1" } },
{ key: "2", props: { name: "option 2", value: "2" } }
];
initialState = {
selectedItem: null,
searchPhrase: ""
};
const handleItemSelect = item => setState({ selectedItem: item });
const getItemBody = props => {
if (!props) {
return null;
}
return {props.name}
;
};
const getSelectedItemBody = props => {
return {props.name}
;
};
const handleSearchPhraseChange = searchPhrase => setState({ searchPhrase });
const SearchEmptyState = ({ searchPhrase }) => (
No search results for phrase "{searchPhrase}
". :(
);
;
```