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

<Select onChange={event => alert(event.target.value)}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
Hide code

Controlled usage

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ value: 'foo' }}>
  {({ state, setState }) => (
    <Select value={state.value} onChange={event => setState({ value: event.target.value })}>
      <option value="foo" selected>Foo</option>
      <option value="bar">Bar</option>
    </Select>
  )}
</Component>
Hide code

Full width

<Select width="100%">
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
Hide code

Custom width

<Select width={240}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
Hide code

Change height

<Select width={240} height={40}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
Hide code

Add margins

<Select width={240} height={40} marginBottom={40}>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</Select>
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 = false
When true, the select is invalid.
appearancestring = 'default'
The appearance of the select. The default theme only supports default.
themeobjectrequired
Theme provided by ThemeProvider.
height = 32

SelectField

Label and description

This is a description.

<SelectField
  label="Default text input field"
  description="This is a description."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
Hide code

A hint is under the text input

This is a hint.

<SelectField
  label="Default text input field"
  hint="This is a hint."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
Hide code

Required text input field

This is a description.

<SelectField
  id="ids-are-optional"
  label="A required text input field"
  required
  description="This is a description."
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
Hide code

Invalid field

This is a description.

<SelectField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
Hide code

Validation message without invalid input

This is a description.

<SelectField
  isInvalid={false}
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" selected>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
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.
<Component initialState={{ value: 'foo' }}>
  {({ state, setState }) => (
    <SelectField
      label="A controlled text input field"
      required
      description="This is a description."
      value={state.value}
      onChange={e => setState({ value: e.target.value })}
    >
      <option value="foo" selected>Foo</option>
      <option value="bar">Bar</option>
    </SelectField>
  )}
</Component>
Hide code