The Select component allow user to click and select from a list of options.



Evergreen exports two components to create select inputs:

  • Select: base text input component. Directly maps to a select element.
  • SelectField: combines a label, select and validation message in one. Used for traditional forms.

The Select component is a styled wrapper around a native select element, which allows selection of one item from a dropdown list. Anytime you would reach for a native select, use this.

Uncontrolled usage

Controlled usage

Full width

Custom width

Change height

SelectField Label and description

This is a description.

SelectField with hints

A hint is placed under the SelectField to let users know what the particular form input is supposed to do .

This is a hint.

Required select field

This is a description.

Invalid field

This is a description.

Validation message without invalid input

This is a description.

Controlled usage

The SelectField component works the same as using input directly. Use to get the value of the component on change.

This is a description.