Async select

Async select handles loading data from remote sources.

Motion in Early Access

Motion has been updated in Async Select and is in Early Access. The motion updates are currently behind the feature flag: platform-dst-motion-uplift-input.

Async select introduces a loadOptions prop that can be given a promise or callback that will eventually resolve to its list of options.

What city do you live in?

import React from 'react';

import { Label } from '@atlaskit/form/label/default';
import Select from '@atlaskit/select/default';
import { type OptionsType } from '@atlaskit/select/types';

import { cities } from '../common/data';

const filterCities = (inputValue: string) =>
	cities.filter((i) => i.label.toLowerCase().includes(inputValue.toLowerCase()));

const promiseOptions = (inputValue: string) =>
	new Promise<OptionsType>((resolve) => {
		setTimeout(() => {
			resolve(filterCities(inputValue));
		}, 1000);
	});

const WithPromises = () => {
	return (
		<>
			<Label htmlFor="async-select-example">What city do you live in?</Label>
			<Select
				inputId="async-select-example"
				cacheOptions
				defaultOptions
				loadOptions={promiseOptions}
			/>
		</>
	);
};

export default (): React.JSX.Element => <WithPromises />;

Was this page helpful?

We use this feedback to improve our documentation.