Select

Variants

Select

select a country

<Select
  variant="select"
  size="large"
  options={[
    { label: 'Canada', value: 'CA' },
    { label: 'United States', value: 'USA' },
  ]}
  placeholder="select a coutry"
/>

Example in legacy UI : Selector

Select Icons

Is it supported ? Check for dropdown components ...

Example in legacy UI : Select Icons

Multiple

select a country

<Select
  variant="select"
  isMulti={true}
  size="large"
  options={[
    { label: 'Canada', value: 'CA' },
    { label: 'France', value: 'FR' },
    { label: 'United States', value: 'USA' },
  ]}
  placeholder="select a coutry"
/>

Multiple Negate

Is it supported ?

Async

Select...

<Select variant="async" cacheOptions isLoading={isLoading} defaultOptions=[] loadOptions={(input, callback) => { setTimeout(() => { callback(arrayOptions.filter(i => i.label.toLocaleLowerCase().includes(input.toLocaleLowerCase()))) }, 1000) }} size="large"  placeholder="select a coutry"/>

examples:
Standard (opens in a new tab)
Using axios (opens in a new tab)

Tag Auto Complet

Is it supported ?

Example in legacy UI : Tag Auto Complet

States

default

select a country

<Select
  state="default"
  variant="select"
  size="large"
  options={[
    { label: 'Canada', value: 'CA' },
    { label: 'United States', value: 'USA' },
  ]}
  placeholder="select a coutry"
/>

disabled

...

<Select
  state="disabled"
  variant="select"
  size="large"
  options={[
    { label: 'Canada', value: 'CA' },
    { label: 'United States', value: 'USA' },
  ]}
  placeholder=""
/>

Sizes ### Select

select a country

<Select  variant="select" size="xlarge" options={[{label:"Canada", value:"CA"},{label:"United States", value:"USA"}]} placeholder="select a country"/>
<Select  variant="select" size="large" options={[{label:"Canada", value:"CA"},{label:"United States", value:"USA"}]} placeholder="select a country"/>
<Select  variant="select" size="medium" options={[{label:"Canada", value:"CA"},{label:"United States", value:"USA"}]} placeholder="select a country"/>
<Select  variant="select" size="small" options={[{label:"Canada", value:"CA"},{label:"United States", value:"USA"}]} placeholder="select a country"/>
<Select  variant="select" size="xsmall" options={[{label:"Canada", value:"CA"},{label:"United States", value:"USA"}]} placeholder="select a country"/>

Automated tests

Unit

Command : npm run test:unit
Test file location : /tests/select.unit.test.tsx

npm run test:unit:file select

Integration

Command : ???
Test file location : ???

???

Input Textarea