Select

Allows you to select one or more options from a list.

Examples

<Select id="single" options={['< 1 year', 'Between 1 and 3 years', '> 3 years']} />

<Select id="single" options={['< 1 year', 'Between 1 and 3 years', '> 3 years']} />

Select multiple :

Selected values : (press ctrl to select multiple values)

const Example = () => {
  const [values, setValues] = useState([])

  const onChangeMultipleValue = () => {
    const options = document.getElementById('multiple')
    setValues(
      reduce(
        options,
        (acc, { selected, value }) => {
          if (selected) {
            acc.push(value)
          }
          return acc
        },
        [],
      ).join(', '),
    )
  }

  return (
    <div>
      <Label>
        Selected values : {values} (press ctrl to select multiple values)
        <Select
          id="multiple"
          onChange={onChangeMultipleValue}
          options={['value 1', 'value 2', 'value 3', 'value4', 'value5']}
          isMulti
        />
      </Label>
    </div>
  )
}

render(<Example />)

const Example = () => {
  const [values, setValues] = useState([])
  const onChangeMultipleValue = () => {
    const options = document.getElementById('multiple')
    setValues(
      reduce(
        options,
        (acc, { selected, value }) => {
          if (selected) {
            acc.push(value)
          }
          return acc
        },
        [],
      ).join(', '),
    )
  }
  return (
    <div>
      <Label>
        Selected values : {values} (press ctrl to select multiple values)
        <Select
          id="multiple"
          onChange={onChangeMultipleValue}
          options={['value 1', 'value 2', 'value 3', 'value4', 'value5']}
          isMulti
        />
      </Label>
    </div>
  )
}
render(<Example />)

Theme

Props

Name	Type	Default value	Description
id required	string	null	The id of the select.
isMulti	bool	false	A boolean which is true if we allow multiple selection.
name	string	''	Name of the component.
onChange	func	null	Function which is called when the value selected has changed.
options required	array	null	The options of the select.
size	number	0	Number of elements displayed.
value	any	null	The value to use as a controlled component.
defaultValue	any	null	The default value to use as an uncontrolled component.