TextField is a composition of the
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.
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 (
Render textarea (
Instead of an input, the TextField component can render a text area for long text requirements.
Additional TextLink (
The TextField can be configured to display an additional TextLink in the label.
Character count (
The TextField can be configured to display a character count. This is useful when an input field has a character limit.
maxLength property must be provided in the TextInput component using
- 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)
- To ensure
TextField meets accessibility standards, provide