An accessible, custom alternative to the native Select component.
Corella, long-billed
Yellow-crowned night heron
Griffon vulture
Meerkat, red
Cat, ringtail
Burmese black mountain tortoise
Puna ibis
Nine-banded armadillo
Olive baboon
Black-tailed deer
Mongoose, yellow
Three-banded plover
Little grebe
Squirrel, nelson ground
Drongo, fork-tailed
American alligator
Lilac-breasted roller
Lion, australian sea
Oriental short-clawed otter
White stork
React
The Dropdown component provides a more flexible alternative to the native
Select component to implement things like populating
options from a search API request.
Multiple Selection
We currently only support selecting a single item, if you need multi-select
support, please
request it here.
Dropdown can behave just like a simple native Select component, albeit a
bit prettier. That said, a native Select might be
the right choice here. See below for use cases where Dropdown shines.
The inPortal prop tells Dropdown to open its menu in a
Portal in cases where overflow: hidden or
adjacent components may interfere with it.
Required Props
The itemToString and itemToValue props are required and determine what will
be displayed and the value persisted in the internal form element
live
<Dropdown
inPortal
itemToString={item => (item ? item.title : '')}
itemToValue={({ id }) => id}
items={[
{ title: 'One', id: 1 },
{ title: 'Two', id: 2 },
{ title: 'Three', id: 3 },
{ title: 'Four', id: 4 },
]}
placeholder="Select..."
/>
Filtering
Use the onInputValue change prop to implement filtering on items.