Allows the user to make a single selection from a list of values — usually in a
form. If only a few options are provided, consider using a
Each select input must be accompanied by a Field with a label. Effective form labeling helps inform users which selection to make.
<Select> can be both controlled and uncontrolled. To control a
value, as well as an
onChange function to set the new value when
the select is updated.
<Select>, by default, is an uncontrolled component, meaning that the form
data is controlled directly by the DOM itself. To access the value, instead of
onChange handler, you would use a
ref to get form values from the
Related options can be grouped by passing in an array of objects with a label
and option key — where each option is an array of objects with label, value and
(optionally) disabled keys. Internally this uses the
The values that can be selected by the input.
Sets data attributes for the element.
Placeholder text for when the input does not have an initial value.