Constructor
# <Dropdown id label value options onChange error listLabel showListLabel labelClassName dropdownWrapperClassName dropdownButtonClassName dropdownIconClassName dropdownInputClassName dropdownListWrapperClassName dropdownListClassName dropdownOptionClassName dropdownOptionSelectedClassName dropdownListLabelClassName addErrorElement maxLength required requiredFeedbackEnabled requiredFeedback activeClassName invalidClassName errorClassName requiredFeedbackClassName />
Dropdown with an input that allows the user to select a value from a list of options.
options can be an array of strings, numbers, or objects. If options labels and values are different, options must be an array of objects with label and value keys: [{ label: "January", value: "0" }, ...],
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
id |
string | Yes | The id of the dropdown | |
label |
string | No | The label of the dropdown | |
value |
node | No | The value of the dropdown | |
options |
arrayOf | Yes | The options of the dropdown | |
onChange |
func | No | The function called when the dropdown is changed | |
error |
string | No | The error of the dropdown | |
listLabel |
string | No | The label of the dropdown list | "Choose your option" |
showListLabel |
bool | No | Whether or not to show the list label | false |
labelClassName |
string | No | The class name of the label | "" |
dropdownWrapperClassName |
string | No | The class name of the dropdown wrapper | "dropdown-wrapper" |
dropdownButtonClassName |
string | No | The class name of the dropdown button | "dropdown-button" |
dropdownIconClassName |
string | No | The class name of the dropdown icon | "dropdown-icon" |
dropdownInputClassName |
string | No | The class name of the dropdown input | "dropdown-text" |
dropdownListWrapperClassName |
string | No | The class name of the dropdown list wrapper | "dropdown-list-wrapper" |
dropdownListClassName |
string | No | The class name of the dropdown list | "dropdown-list" |
dropdownOptionClassName |
string | No | The class name of the dropdown option | "dropdown-option" |
dropdownOptionSelectedClassName |
string | No | The class name of the selected dropdown option | "current-selection" |
dropdownListLabelClassName |
string | No | The class name of the dropdown list label | "label" |
addErrorElement |
bool | No | Whether or not to add the error element | true |
maxLength |
number | No | The maximum length of the dropdown | 128 |
required |
bool | No | Whether or not the dropdown is required | false |
requiredFeedbackEnabled |
bool | No | Whether or not to show the required feedback | false |
requiredFeedback |
string | No | The required feedback | "*" |
activeClassName |
string | No | The class name of the active dropdown option | "active" |
invalidClassName |
string | No | The class name of the invalid dropdown option | "invalid" |
errorClassName |
string | No | The class name of the error dropdown option | "error" |
requiredFeedbackClassName |
string | No | The class name of the required feedback | "required" |
- The dropdown component.
React.Component
Methods
# inner handleKeyDown()
If the user presses the enter key or the space bar, call the handleOptionClick function. If the user presses the arrow down key, focus on the next option. If the user presses the arrow up key, focus on the previous option
# inner handleKeyDownLabel()
If the key pressed is the Enter key or the space bar, then set the state of isOpen to true
# inner handleOptionClick()
Sets the selected option label and value, closes the dropdown, and calls the onChange function if it exists.