The options prop accepts the following types:
type Options = {
label: string
value: string | {}
}[]
type GroupedOptions = {
label: string
options: Options
}- Mind the order of the options, like putting the more probable one to be selected at the top. In doubt, sort them alphanumerically (from A to Z and from 0 to 9).
- If there are just a few options to choose from (like 4), consider a Radio Group (for single select) or Checkbox (for multi select).
Simple
const options = [
{
value: { id: 0, name: 'first-option' },
label: 'First Option',
},
{
value: { id: 1, name: 'second-option' },
label: 'Second Option',
},
]
;<div>
<div className="mb5">
<Select
defaultValue={options[0]}
size="small"
multi={true}
label="Small"
options={options}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
onSearchInputChange={value => {
console.log('[Select] onSeachInputChange: ' + value)
}}
/>
</div>
<div className="mb5">
<Select
defaultValue={options[0]}
multi={true}
label="Regular"
options={options}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>
<div className="mb5">
<Select
defaultValue={options[0]}
size="large"
multi={true}
label="Large"
options={options}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>
</div>Single
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
label="Label"
options={options}
multi={false}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>Grouped
const options = [
{
label: 'First Group',
options: [
{
value: { id: 0, name: 'first-option' },
label: 'First Option',
},
{
value: { id: 0, name: 'second-option' },
label: 'Second Option',
},
],
},
{
label: 'Second Group',
options: [
{
value: { id: 0, name: 'third-option' },
label: 'Third Option',
},
{
value: { id: 0, name: 'fourth-option' },
label: 'Fourth Option',
},
],
},
]
;<div>
<Select
label="Label"
options={options}
multi={false}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>No label
const options = [
{
value: 'first-option',
label: 'First option',
},
{
value: 'second-option',
label: 'Second option',
},
]
;<div>
<Select
options={options}
multi={true}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>With Error
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
label="Label"
options={options}
multi={true}
errorMessage="Required!"
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>With creatable option
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
label="Label"
options={options}
multi={true}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
creatable
/>
</div>Disabled
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
disabled={true}
label="Label"
options={options}
multi={true}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
<div className="mv5">
<Select
disabled={true}
label="Label"
options={options}
multi={true}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
value={[
{
value: 'first-option',
label: 'First Option',
},
]}
/>
</div>
</div>Without search input (good for mobile experience)
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
label="Label"
options={options}
multi={false}
searchable={false}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>Loading state
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
;<div>
<Select
loading={true}
label="Label"
options={options}
multi={true}
onChange={values => {
console.log(`[Select] Selected: ${JSON.stringify(values, null, 2)}`)
}}
/>
</div>Using ref
const Button = require('../Button').default
const options = [
{
value: 'first-option',
label: 'First Option',
},
{
value: 'second-option',
label: 'Second Option',
},
]
const ref = React.createRef()
;<div>
<Select
ref={ref}
label="Click in the button below to focus on this Select"
options={options}
/>
<div className="pt2">
<Button size="small" onClick={() => ref.current.focus()}>
Focus on input
</Button>
</div>
</div>With Modal
const Button = require('../Button').default
const Modal = require('../Modal').default
const options = [
{
value: 'first-option',
label: 'First option',
},
{
value: 'second-option',
label: 'Second option',
},
]
class SelectWithModalExample extends React.Component {
constructor() {
super()
this.state = { isModalOpen: false }
this.handleModalToggle = this.handleModalToggle.bind(this)
}
handleModalToggle() {
this.setState({ isModalOpen: !this.state.isModalOpen })
}
render() {
return (
<React.Fragment>
<Button onClick={this.handleModalToggle}>Open</Button>
<Modal
centered
title="Select in Modal"
isOpen={this.state.isModalOpen}
onClose={this.handleModalToggle}
bottomBar={
<div className="nowrap">
<span className="mr4">
<Button variation="tertiary" onClick={this.handleModalToggle}>
Cancel
</Button>
</span>
<span>
<Button variation="primary" onClick={this.handleModalToggle}>
Send
</Button>
</span>
</div>
}>
<div className="mb3">
<Select options={options} menuPosition="fixed" />
</div>
</Modal>
</React.Fragment>
)
}
}
;<SelectWithModalExample />