New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

TextField

StorybookGithub
stable

TextField is a composition of the FormLabel, TextInput, HelpText and ValidationMessage components. It allows users to input text or numbers and should be used in a form context.

Table of contents

How to use TextField

The TextField component can be configured in a number of different ways. Use this guidance to determine the correct variation based on the context.

Code examples

Please enter your email address

TextField variations

Compositional properties

Since the TextField is a composition of multiple components, it is possible to pass child component specific properties. For this purpose, the TextField exposes the following properties:

Please enter your email address

Label and text properties (labelText, helpText, validationMessage)

Please enter your email address

This address is not valid

Required field (required)

Please enter your email address

Render textarea (textfield)

Instead of an input, the TextField component can render a text area for long text requirements.

Please enter a description

Additional TextLink (textLinkProps)

The TextField can be configured to display an additional TextLink in the label.

Character count (countCharacters)

The TextField can be configured to display a character count. This is useful when an input field has a character limit.
Note: The maxLength property must be provided in the TextInput component using textInputProps.

11/20

Content recommendations

  • Use direct, succinct copy that helps the user to successfully complete the form
  • Do not preface the instructions with introductory text, such as "please"
  • To add additional context, link out to documentation
  • In cases where additional context is unnecessary, help text can be substituted for text in the label
  • Do not use punctuation for labels, help text and links
  • Use sentence style caps (in which only the first word of a sentence or term is capitalized)

Accessibility

  • To ensure TextField meets accessibility standards, provide labelText, name and id