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.

FooBar

FooBar

FooBar

FooBar

FooBar

Default text input field
This is a description.
FooBar

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

Default text input field
FooBar
This is a hint.

A required text input field *
This is a description.
FooBar

A required text input field *
This is a description.
FooBar
This field is required

A required text input field *
This is a description.
FooBar
This field is required

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

A controlled text input field *
This is a description.
FooBar