Introduction

Evergreen exports two components to create text 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.

Select

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

Hide code

Controlled usage

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code

Full width

Hide code

Custom width

Hide code

Change height

Hide code

Add margins

Hide code

Select Props

This component composes ui-box

idstring
The id attribute for the select.
namestring
The name attribute for the select.
childrennode
The options that are passed to the select.
defaultValueany
The initial value of an uncontrolled select
onChangefunc
Function called when value changes.
valueany
The value of the select.
requiredbool
When true, the select is required.
autoFocusbool
When true, the select should auto focus.
isInvalidbool
When true, the select is invalid.
appearancestring
The appearance of the select. The default theme only supports default.

SelectField

Label and description

This is a description.

Hide code

A hint is under the text input

This is a hint.

Hide code

Required text input field

This is a description.

Hide code

Invalid field

This is a description.

Hide code

Validation message without invalid input

This is a description.

Hide code

Controlled usage

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

This is a description.

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
Hide code