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.

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.
Hide code

Disabled

Hide code

Invalid

Hide code

Change height

The TextIput uses the height property to resize itself.

Hide code

Change width

Hide code

TextInput Props

This component composes ../typography

requiredbool
Makes the input element required.
disabledbool
Makes the input element disabled.
isInvalidbool
Sets visual styling of _only_ the text input to be "invalid". Note that this does not effect any `validationMessage`.
spellCheckbool
Use the native spell check functionality of the browser.
placeholderstring
The placeholder text when there is no value present.
appearancestring
The appearance of the TextInput.
widthstring | number
The width of the TextInput.
classNamestring
Class name passed to the button. Only use if you know what you are doing.

TextInputField

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

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 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.
Hide code

TextInputField Props

This component composes TextInput../form-field

labelnoderequired
The label used above the input element.
labelForstring
Passed on the label as a htmlFor prop.
requiredbool
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
The height of the input element.
inputWidthnumber | string
The width of the input width.