@myntra/uikit-component-input-select v1.13.96

import InputSelect from './src/input-select' import { Bell } from "uikit-icons"

InputSelect

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your color: '}
  <InputSelect
    options={options}
    value={value} onChange={setValue}
  />
</>

Multiple Selection

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your colors: '}
  <InputSelect
    multiple
    options={options}
    value={value} onChange={setValue}
  />
</>

With Icon

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your colors: '}
  <InputSelect
    icon={Bell}
    options={options}
    value={value} onChange={setValue}
  />
</>

Loading options from API

const [countries, setCountries] = useState([]);
const [value, setValue] = useState(null);

useEffect(() => {
  fetch(`https://restcountries.eu/rest/v2/all?t=${Date.now()}`)
    .then(response => response.json())
    .then(data => data.map(country => ({ value: country.alpha2Code, label: country.name })))
    .then(countries => setCountries(countries))
}, []);

<>
  {'Where you wanna go? '}
  <InputSelect
    isLoading={countries.length === 0}
    options={countries}
    value={value} onChange={setValue}
    multiple
  />
</>

Readonly state

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your color: '}
  <InputSelect
    options={options}
    value={'Green'} onChange={setValue}
    readOnly
  />
</>

Disabled state

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your color: '}
  <InputSelect
    options={options}
    value={value} onChange={setValue}
    disabled
  />
</>

Disabled With a Value

const [value, setValue] = useState();
const [options] = useState([
  { value: 'Red', label: 'Red' },
  { value: 'Green', label: 'Green' },
  { value: 'Blue', label: 'Blue' },
]);

<>
  {'Choose your colors: '}
  <InputSelect
    disabled
    options={options}
    value={'Green'} onChange={setValue}
  />
</>