Select

Select component to select value from options.

Install

import {Select} from '@xsolla/uikit';

Examples

Autosize select
With search
Disabled
Select with own dropdown icon

Usage

<Select
  name="select"
  input={{
    value: this.state.value,
    onChange: this.toggleValue
  }}
  options={[
    {label: 'Option 1', description: 'Description', value: 1},
    {label: 'Option 2', value: 2},
    {label: 'Option 3', value: 3},
    {label: 'Option 4', value: 4}
  ]}
/>

With redux-form

<Field component={Select} name="redux-select" />

Option fields

{
  label: string
  extraLabel: string | array of strings
  tag?: string  
  description?: any  
  color?: string  
  icon?: string  
  onClick?: func
}

API

PropertyDescriptionTypeDefault
inputconfig for redux-form or basic selectobject{}
nameselect namestringnull
optionsoptions in format [{label: 'First', value: 1}]array
sizecan be set to xs, sm, mdstringmd
placeholderset the placeholder of inputstringnull
searchableset searchable of selectboolfalse
autosizeautosize inline elementboolfalse
alignleft, left-half, right, right-halfstringleft
disabledset the disabled status of selectboolfalse
onScrollOptionson options scroll handlerfunc() => void 0
fetchingshow loader then data fetchingboolfalse