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.

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

jsx

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

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.

jsx

function ControlledTextInputExample() {
  const [value, setValue] = React.useState('')
  return <TextInput onChange={e => setValue(e.target.value)} value={value} />
}

Disabled

jsx

<TextInput disabled />

Invalid

jsx

<TextInput isInvalid />

TextInputField

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

Label and description

jsx

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

A hint is under the text input

jsx

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

Required text input field

jsx

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

Invalid field

jsx

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

Validation message without invalid input

jsx

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

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.

jsx

function ControlledTextInputExample() {
  const [value, setValue] = React.useState('')
  return (
    <TextInputField
      label="A controlled text input field"
      required
      description="This is a description."
      value={value}
      onChange={e => setValue(e.target.value)}
    />
  )
}