dropdown

The default value when the component is uncontrolled

Prevents user actions on the field

Used to format options into human readable strings

Note that if both formatOption and renderOption are provided, renderOption will take precedence

HTML ID attribute

Enables multiple selection

Called when the text field is blurred

Called with the selected option when the value changes

Called when the text field is focused

An array of unique values of any type except undefined If you use an array of objects, the object must contain the property item, the option’s disabled state can be controlled with a disabled property.

Placeholder text to render when an option has not been selected

When present, this function is used to render each option. Each option is passed as an argument. If any option has Option.render prop present, that will take precedence and this function will not be called for that option.

In addition to the option passed as an argument, props are also passed in that can be used for each option to help maintain some of the built-in Dropdown option functionality.

Similarly if both formatOption and renderOption are provided, renderOption will take precedence

Text describing why the field is required

The value of the control

The visual variant of the textarea

Specifies if the value provided is wrong

The controlled value for the input element

Why not just pass the props.onChange directly to Downshift?

Downshift provides all of it’s helpers and state to onChange. We don’t want to expose the entire Downshift API to consumers.

The Wrapper presenter is used as a function to avoid having to use Downshift’s getRootProps

Visual representation of the option

Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard.

Called when user finishes clicking on an option

Called when user begins clicking on an option

Called when user moves mouse over the option

Indicates the option is currently selected

Downshift requires a reference to the component’s root element. As a result, this presenter should be purely functional so that it can be used as function with Downshift.