Kenobi

Select

`Select` is basically just a wrapper around react-select.

All `react-select` functionality will work as expected, if not please reach out!

`Select` provides Kenobi theming to `react-select`. The `SelectField` component provides Labels etc.

For a list of all available `react-select` props go to Docs.

Usage

This is a controlled example using value and onChange.

Please choose a flavour

 
<Component initialState={{ value: '', label: '' }}>
  {({ state, setState }) => (
    <React.Fragment>
      <Select
        name="icecream-flavours"
        value={state}
        options={[
          { value: 'chocolate', label: 'Chocolate' },
          { value: 'strawberry', label: 'Strawberry' },
          { value: 'vanilla', label: 'Vanilla' },
        ]}
        onChange={e => setState(e)}
      />
      <div style={{ marginTop: '1rem' }}>
        <Paragraph>
          {state.value
            ? `You have chosen ${state.label}!`
            : 'Please choose a flavour'}
        </Paragraph>
      </div>
    </React.Fragment>
  )}
</Component>

Multi select

This is an uncontrolled example. You will have to provide value and onChange to make it controlled.

Select...

 
<Select
  isMulti
  name="icecream-flavours"
  options={[
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'pistachio', label: 'Pistachio' },
    { value: 'cookies-and-cream', label: 'Cookies & Cream' },
  ]}
/>

Kenobi

Select

Select is basically just a wrapper around react-select.

All react-select functionality will work as expected, if not please reach out!

Select provides Kenobi theming to react-select. The SelectField component provides Labels etc.

For a list of all available react-select props go to Docs.

Usage

Multi select

`Select` is basically just a wrapper around react-select.

All `react-select` functionality will work as expected, if not please reach out!

`Select` provides Kenobi theming to `react-select`. The `SelectField` component provides Labels etc.

For a list of all available `react-select` props go to Docs.