Text Input

View on GitHub

Introduction

Evergreen exports two components to create text inputs:

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

TextInput

The TextInput component is a basic text input component. It directly maps to a input element.

<TextInput
  name="text-input-name"
  placeholder="Text input placeholder..."
/>
Hide code

Controlled usage

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

The `Component` component is not part of Evergreen. It is only used in examples to create state. Learn more.
<Component initialState={{ value: ''}}>
  {({ state, setState }) => (
    <TextInput
      onChange={e => setState({ value: e.target.value })}
      value={state.value}
    />
  )}
</Component>
Hide code

Disabled

<TextInput disabled />
Hide code

Invalid

<TextInput isInvalid />
Hide code

Change height

The TextIput uses the height property to resize itself.

<Pane>
  <TextInput height={24} marginRight={16} />
  <TextInput height={40} />
</Pane>
Hide code

Change width

<Pane>
  <TextInput width="100%" marginBottom={16} />
  <TextInput width={320} />
</Pane>
Hide code

TextInput Props

This component composes ../typography

requiredbool
Makes the input element required.
disabledbool = false
Makes the input element disabled.
isInvalidbool = false
Sets visual styling of _only_ the text input to be "invalid". Note that this does not effect any `validationMessage`.
spellCheckbool = true
Use the native spell check functionality of the browser.
placeholderstring
The placeholder text when there is no value present.
appearancestring = 'default'
The appearance of the TextInput.
widthunion = 280
The width of the TextInput.
themeobjectrequired
Theme provided by ThemeProvider.
classNamestring
Class name passed to the button. Only use if you know what you are doing.
height = 32

TextInputField

The TextInputField component combines a TextInput with a label and optional description, validationMessage and hint.

Label and description

This is a description.

<TextInputField
  label="Default text input field"
  description="This is a description."
  placeholder="Placeholder text"
/>
Hide code

A hint is under the text input

This is a hint.

<TextInputField
  label="Default text input field"
  hint="This is a hint."
  placeholder="Placeholder text"
/>
Hide code

Required text input field

This is a description.

<TextInputField
  id="ids-are-optional"
  label="A required text input field"
  required
  description="This is a description."
  placeholder="Placeholder text"
/>
Hide code

Invalid field

This is a description.

<TextInputField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
/>
Hide code

Validation message without invalid input

This is a description.

<TextInputField
  isInvalid={false}
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
/>
Hide code

Controlled usage

The TextInputField 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: '' }}>
  {({ state, setState }) => (
    <TextInputField
      label="A controlled text input field"
      required
      description="This is a description."
      value={state.value}
      onChange={e => setState({ value: e.target.value })}
    />
  )}
</Component>
Hide code

TextInputField Props

This component composes Select../form-field

labelnoderequired
The label used above the input element.
labelForstring
Passed on the label as a htmlFor prop.
isRequiredbool
Whether or not to show an asterix after the label.
descriptionnode
An optional description of the field under the label, above the input element.
hintnode
An optional hint under the input element.
validationMessagenode
If a validation message is passed it is shown under the input element and above the hint. This is unaffected by `isInvalid`.
inputHeightnumber = 32
The height of the input element.
inputWidthunion = '100%'
The width of the input width.