Forma 36 Logo

TextField

View TextField on GitHub | View TextField in Storybook

The TextField component 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.

Best practices

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

Copy considerations

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

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 E-Mail

PropertyDescription
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 E-Mail

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

Required Field (required)

Please enter your E-Mail

PropertyDescription
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

PropertyDescription
textareaUsed to render a textarea instead of a textinput

TextField with additional TextLink (textLinkProps)

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

PropertyDescription
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

TextField with additional TextLink (textLinkProps)

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

PropertyDescription
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.

11/20

PropertyDescription
countCharactersUsed to enable the character count