TextField (design)

TextFields are primarily used within forms but can can also be used individually in more exceptional cases. It has a range of entry options to collect different information.

Text field

The default field type that expects short text input. If the expected input could be more than one line, use the appropriate Text Area component.

Email field

A valid email address is required.

Number field

Accepts numerical input. If the user needs to enter a date, use the appropriate Date Picker component.

Password field

Used to hide private and sensitive input.

Text field with action label

An action label can be added when a secondary action is closely associated with a TextField. For example, an action link where a user can click on to recover a password.

Text field with help message

Use a help message to provide extra instructional content that is not included in the label or placeholder. For example, specific character requirements to meet a valid submission.

Text field with error state

Used to indicate the entered input (or required fields that are empty) isn't valid. Only affected fields should've an error state. Valid input shouldn't be cleared.

Text field with disabled state

This states disable the field and prevents the user from interacting with it.

Text field with an icon

A left side icon can be displayed to convey more meaning. Browse and discover which icons you can use in our Chameleon Iconography Search.

Labels

Every TextField should have a label. A field without a label is ambiguous and not accessible.

To meet accessibility requirements, every TextField should have associated label. We do support the ability to visually hide the label when the text field's purpose is clear. Markup wise the label will remain available to screen readers.

Placeholders

Placeholder text is displayed inside the field but is not always necessary. They should be written as examples helping users to understand the required input instead of instructions.

Masks

To visually aid the user with the expected format, we recommend using an input mask. Input masks will display a template of the expected value.

Bank account

Telephone number

Required or optional?

In a single form, we recommend only marking the optional fields with an approrpiate optional label text "(Optional)".