TextField

View in Storybook

Anatomy

TextField is one of our core inputs that allows users to enter short free-form keyword data. To enter multiline text, use our Textarea component.

1. Label (optional): A title for a TextField to describe its purpose.
2. iconLeft (optional): Visual aide for the input’s content.
3. Prefix (optional): Used to guide what text is allowed to be entered.
4. Suffix (optional): Typically shows supporting data for the field (eg. character count).
5. slotRight (optional): Can contain Icon or IconButton for further guidance (eg. show password).
6. Text: Displays the keyword entry. Placeholder text is optional before any input.
7. helpMessage (optional): When a label is not required, longer helpful text can be added.

Sizes

A TextField can be made smaller or larger depending on the context it's being used in. You should make this smaller if it is being used in a tight space and aligned with small elements. Use a larger TextField if it's in an open space or feels out of proportion with adjacent large elements.

States

Focused

Upon clicking a TextField, the onFocus state is displayed by default and any placeholder text is removed.

Entered

When keywords have been input, the text colour darkens and a dismissable icon button become active.

Error

Error validation messages appear underneath the TextField when there has been an invalid input. Any error should be displayed as soon as the user has interacted with the TextField and removed when interacted with again and the error has been fixed.

Disabled

A disabled TextField prevents user interaction. It doesn’t appear in the tab order, can’t receive focus, and may not read aloud by a screenreader.

ReadOnly

A read-only TextField prevents user modification but its contents can be selectable.

Properties

TextField offers further props for customisation when necessary within the product UI.

	Trailing action   Primarily used to render a single action that affects the input, but an iconButton can also be toggled to display password visibility. This creates a more accessible experience by allowing the user to confirm what they have entered before submitting the form.

	helpMessage   A single validation message may be displayed to provide helpful information for a user to complete their task. It is most commonly used to explain why a value is invalid so they can correct it and submit the form.

	Prefix   This gives a user further prepended context as to the type of information a particular TextField requires and removes any additional text entry. These should be no longer than 2 words long.

	Suffix   Typically used to display character count limitations. By default, the TextField would never allow text entry to exceed the maximum length of characters. Once reached, no more characters can be added.

	Hidden label   It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. Placeholder text should be made visible in these instances for users to understand what text to input.

Accessibility

• TextField inputs must be labeled. The label may be visually hidden, but visible labels are preferred.
• Placeholder text is never an acceptable substitute for a label. This is because;
• Placeholder text disappears as soon as the input has a value
• Although our placeholder text does meet minimum color contrast ratio required for accessibility, screen readers do not read placeholder text as a label

Best practice

• Never use placeholder text for critical information, only as an example of expected input.
• Labels should be clear so it is obvious to a user what information is required to enter.
• Clearly label as 'Optional' or 'Required' when the input is either not essential or mandatory. By default TextField are always required unless stated.
• Validate input as soon as it has been interacted with.
• Don't use errorMessage to provide feedback on character count errors, add the Suffix prop.
• Keep any help or error messaging to a single sentence.

Do's and Don'ts

Also see

• Search
• Textarea
• Forms