Dropdown

Install the component dependency:

Include a React component in your project:

Name
Value
Description
Default
appearance
default | subtle
visual style (from Dropdown.appearances)
default
disabled
boolean
standard input disabled flag
false
error
boolean
error state flag
false
label
string
identifying string for dropdown
menu
Required
ActionMenu
menu for dropdown contents
onChange
(Event, value, label) => ()
triggered when an item selected
placeholder
string
in-field usage hint
subLabel
string
supporting text or error messaging

The normal React form-related props are also acceptable and expected.

Keep your own app state. Feed it to the dropdown with value. Listen for changes in the menu selection using onChange. The Dropdown menu is provided by the ActionMenu.

Selected: int

Primary identification of a dropdown comes through the label. Usage hints are given in the placeholder. Supporting text and error messaging is set in the subLabel.

To pre-select a label, use the placeholder prop. Note that this is a visual preselection only, which will work for most React apps where your data model with the initial *value* is held in memory somewhere already. To see this in action, refer to the In-app example above.

When using the dark theme, a subtle appearance is available.

Disabled dropdowns are unmodifiable, not interactive, and diminished visually.

Error states are engaged with the error flag. Error-related messaging is sent to the subLabel prop.