Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
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

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:

Label and text properties (labelText, helpText, validationMessage)

Required field (required)

Render textarea (textfield)

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

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.

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