Getting Started

Components

Typography

Utilities

Visualization Components

AsyncSelect

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

cacheOptions

Bool

className

String

[Empty string]

components

Shape

{}

debounce

Bool

true

debounceWait

Number

300

defaultOptions

Boolean │ Array<{}>

defaultValue

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

disabled

Bool

false

error

Bool

false

instanceId

String

isMulti

Bool

false

loadOptions

Func

name

String

required

onChange

Func

required

placeholder

String

"Select..."

Examples

Default Example using a Promise

Select...

<State initial={{ inputValue: '' }}>
  {({ 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 <AsyncSelect cacheOptions defaultOptions loadOptions={fakeCall} />
  }}
</State><State initial={{ inputValue: '' }}>
  {({ 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 <AsyncSelect cacheOptions defaultOptions loadOptions={fakeCall} />
  }}
</State>

Example using a Callback

Select...

<State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return <AsyncSelect cacheOptions defaultOptions loadOptions={fakeCall} />
  }}
</State><State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return <AsyncSelect cacheOptions defaultOptions loadOptions={fakeCall} />
  }}
</State>

Example using isMulti

Select...

<State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        name="async-select"
        isMulti
        onChange={(name, value) => {
          console.log('name', name)
          console.log('value', value)
        }}
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        name="async-select"
        isMulti
        onChange={(name, value) => {
          console.log('name', name)
          console.log('value', value)
        }}
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

Example using defaultValue

Strawberry

<State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        defaultValue={{
          value: 'strawberry',
          label: 'Strawberry',
        }}
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        defaultValue={{
          value: 'strawberry',
          label: 'Strawberry',
        }}
        cacheOptions
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

Example without using debounce method

Strawberry

<State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      console.log('in request')
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        debounce={false}
        defaultValue={{
          value: 'strawberry',
          label: 'Strawberry',
        }}
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State><State initial={{ inputValue: '' }}>
  {({ state, setState }) => {
    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',
      },
    ]
    const filterOptions = query => {
      return options.filter(option =>
        option.label.toLowerCase().includes(query),
      )
    }
    const fakeCall = (query, callback) => {
      console.log('in request')
      setTimeout(() => callback(filterOptions(query)), 500)
    }
    return (
      <AsyncSelect
        debounce={false}
        defaultValue={{
          value: 'strawberry',
          label: 'Strawberry',
        }}
        defaultOptions
        loadOptions={fakeCall}
      />
    )
  }}
</State>

AsyncSelect

.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 using a Promise

Example using a Callback

Example using isMulti

Example using defaultValue

Example without using debounce method

Props