Intro

The text control is used to display text within an application. It can appear in forms, tables, and content areas to present information. Its properties include wrapping, truncation, and localization to ensure optimal display across devices.

Text component

When to Use

false

Use the text component:

If you want to display text inside a form, table, or other content area.

dont

false

Don’t use the text component:

If you want to label another component (such as an input field). Use the label instead.

Anatomy

The text control consists of a single visual element: the text area. This area displays the defined text and adapts its size and formatting based on properties like wrapping and truncation.

Text area

Anatomy of the text control showing its main element

Behavior and Interaction

Wrapping and Truncation

A text can wrap, truncate, or combine wrapping and truncation. In the combined variant, you define a maximum number of lines. The text wraps until the last line is reached and truncates at the end of the last line.

Text wraps

Text wraps to the next line when it exceeds the available width and can span multiple lines.

Text wraps within the text control

Text truncates

Text is truncated when it exceeds the available width, and an ellipsis (…) is displayed to indicate that content continues.

Text truncation with ellipsis

Combined wrapping and truncation with 2 lines

Text wraps to multiple lines and is truncated with an ellipsis (…) when it exceeds the defined line limit.

Combined wrapping and truncation with a defined line limit

Wrapping with Hyphenation

When hyphenation is enabled, long words are split into syllables and wrapped to the next line with a hyphen at the breakpoint.

Text wrapping with hyphenation enabled

Preserve White Space

Some text formats include multiple spaces or tabs, such as ID numbers or codes. By default, extra spaces collapse into a single space, but the text component can be configured to preserve white space so it appears exactly as entered.

Text with and without preserved white space

Empty Indicator Mode

You can display an n-dash (“–”) to denote an empty text. This can make information easier for users to scan, such as empty values in forms. Depending on the user’s language, the symbol may vary.

Empty text indicator in a form displayed as n-dash (“–”)

Responsiveness

The text control adapts to all screen sizes. You can set a specific width to override the default behavior. Resizing behavior depends on the app settings applied to the text control.