Getting Started

Components

Typography

Utilities

Visualization Components

AsyncCreatableSelect

A select component that supports multiple values. This is a proxy for the react-select component with some default styles applied. This component accepts all prop types that the react select component has. For more information, see the docs here.

Note that SelectInput requires a unique name as string to be set to make server-side-rendering work.

See https://github.com/JedWatson/react-select/pull/1105 for details

Props

className

String

[Empty string]

components

Shape

{}

debounce

Bool

true

debounceWait

Number

300

defaultValue

Array<{ "label": "string", "value": "any" }> │ number │ string

disabled

Bool

false

error

Bool

false

isClearable

Bool

isMulti

Bool

false

loadOptions

Func

name

String

required

onChange

Func

required

onQueryChange

Func

null

options

Array<{ "label": "string", "value": "any" }>

placeholder

String

"Select..."

value

Array<{ "label": "string", "value": "any" }> │ number │ string

Examples

Default Example

Select...

<State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

Example using isMulti

Select...

<State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        isMulti
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        isMulti
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

Example using isMulti and defaultValue

Watermelon

<State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultValue={{
          value: 'watermelon',
          label: 'Watermelon',
        }}
        isMulti
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        cacheOptions
        defaultValue={{
          value: 'watermelon',
          label: 'Watermelon',
        }}
        isMulti
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

Default without debounce

Select...

<State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        console.log('in request')
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        debounce={false}
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State>
  {({ state, setState }) => {
    const fakeCall = query => {
      const options = [
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'banana',
          label: 'Banana',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
        {
          value: 'grape',
          label: 'Grape',
        },
        {
          value: 'strawberry',
          label: 'Strawberry',
        },
        {
          value: 'watermelon',
          label: 'Watermelon',
        },
        {
          value: 'grapefruit',
          label: 'Grapefruit',
        },
        {
          value: 'pear',
          label: 'Pear',
        },
        {
          value: 'lemon',
          label: 'Lemon',
        },
      ]
      return new Promise(resolve => {
        const filteredOptions = options.filter(option =>
          option.label.toLowerCase().includes(query),
        )
        console.log('in request')
        setTimeout(() => resolve(filteredOptions), 500)
      })
    }
    return (
      <AsyncCreatableSelect
        debounce={false}
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

AsyncCreatableSelect

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Default Example

Example using isMulti

Example using isMulti and defaultValue

Default without debounce

Props