Select

View on GitHub

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

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

Controlled usage

caret-down
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" checked>Foo</option>
      <option value="bar">Bar</option>
    </Select>
  )}
</Component>
code Hide code

Full width

caret-down
<Select width="100%">
  <option value="foo" checked>Foo</option>
  <option value="bar">Bar</option>
</Select>
code Hide code

Custom width

caret-down
<Select width={240}>
  <option value="foo" checked>Foo</option>
  <option value="bar">Bar</option>
</Select>
code Hide code

Change height

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

Add margins

caret-down
<Select width={240} height={40} marginBottom={40}>
  <option value="foo" checked>Foo</option>
  <option value="bar">Bar</option>
</Select>
code 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 = '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.

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

A hint is under the text input

caret-down

This is a hint.

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

Required text input field

This is a description.

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

Invalid field

This is a description.

caret-down
error
<SelectField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
>
  <option value="foo" checked>Foo</option>
  <option value="bar">Bar</option>
</SelectField>
code 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.

caret-down
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" checked>Foo</option>
      <option value="bar">Bar</option>
    </SelectField>
  )}
</Component>
code Hide code