Forma 36



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.

Please enter your email address

Table of contents

  1. Best practices
  2. Variations
    1. Compositional properties
    2. Label and text
    3. Required field
    4. Render textarea
    5. Additional textlink
    6. Character count
  3. Writing guidelines

Best practices

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

TextField variations

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

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

textInputPropsUsed to pass a property object to the TextInput component
formLabelPropsUsed to pass a property object to the FormLabel component
textLinkPropsUsed to pass a property object to the TextLink component

Label and text properties (labelText, helpText, validationMessage)

This address is not valid

Please enter your email address

labelTextUsed to provide the text
helpTextUsed for entering passwords or sensitive information
validationMessageUsed for E-mail address addresses (will dispatch native autocomplete)

Required field (required)

Please enter your email address

requiredUsed to set the input as required and show the required text next to the label

Render textarea (textfield)

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

Please enter a description

textareaUsed to render a textarea instead of a textinput

Additional TextLink (textLinkProps)

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

textLinkPropsProperty object used to define the rendered text link
textLinkProps.iconUsed to specify the rendered icon
textLinkProps.textUsed to specify the link text
textLinkProps.onClickUsed to specify an onClick handler

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.


countCharactersUsed to enable the character count

Writing guidelines

  • 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)