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

Disabled

<TextInput disabled />
code Hide code

Invalid

<TextInput isInvalid />
code Hide code

Change height

The TextIput uses the height property to resize itself.

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

Change width

<Pane>
  <TextInput width="100%" marginBottom={16} />
  <TextInput width={320} />
</Pane>
code 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 to be invalid.
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"
/>
code 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"
/>
code 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"
/>
code Hide code

Invalid field

This is a description.

error
<TextInputField
  isInvalid
  required
  label="A required text input field"
  description="This is a description."
  validationMessage="This field is required"
/>
code 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>
code 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
Wether or not show a asterix after the label.
descriptionnode
A optional description of the field under the label, above the input element.
hintnode
A optional hint under the input element.
validationMessagenode
If a validation message is passed it is shown under the input element and above the hint.
inputHeightnumber = 32
The height of the input element.
inputWidthunion = '100%'
The width of the input width.