Read-only field

A read-only field is used to display data in a form-like structure without allowing direct user input. It maintains visual consistency with other form fields but presents information that is not currently editable.

When to use

Displaying saved data

Use it in "view mode" on pages like user profiles or settings to show existing information like a name, email, or ID number.

Displaying saved data

Use it in "view mode" on pages like user profiles or settings to show existing information like a name, email, or ID number.

Confirmation screens

To present a summary of the data a user has just entered for their review before final submission.

Confirmation screens

To present a summary of the data a user has just entered for their review before final submission.

System generated values

To show values that are generated by the system and cannot be changed by the user, such as an "Account ID" or "Date Created."

System generated values

To show values that are generated by the system and cannot be changed by the user, such as an "Account ID" or "Date Created."

When to avoid

User input

If the user needs to enter or modify data, use an active component like a text input.

User input

If the user needs to enter or modify data, use an active component like a text input.

Instead of disabled fields

A disabled field implies that a field could become active if other conditions are met. A read-only field simply displays data. Use a disabled field if you want to retain the input styling but block interaction.

Instead of disabled fields

For non-form content

If the information is not part of a form and doesn't require a label / value pairing, use standard text elements instead.

For non-form content

If the information is not part of a form and doesn't require a label / value pairing, use standard text elements instead.

Specifications

Label placement

Stacked

Left

Stacked

Left

Stacked

Left

Stacked

Left

Behavior

Interaction

By default, the component is not interactive; the user cannot select or modify the text.

Is editable

When Is editable is set to True, clicking the component or its edit icon should trigger an editing experience, such opening a modal.

Interaction

By default, the component is not interactive; the user cannot select or modify the text.

Is editable

When Is editable is set to True, clicking the component or its edit icon should trigger an editing experience, such opening a modal.

Interaction

By default, the component is not interactive; the user cannot select or modify the text.

Is editable

When Is editable is set to True, clicking the component or its edit icon should trigger an editing experience, such opening a modal.

Interaction

By default, the component is not interactive; the user cannot select or modify the text.

Is editable

When Is editable is set to True, clicking the component or its edit icon should trigger an editing experience, such opening a modal.

Anatomy

Label

Should indicate some kind of instruction for selection. If majority of fields are required in a single form, the "Option" label can be toggled on. If majority of fields are optional, the "Required asterisks" should instead be toggled on.

Content

Displays the read-only data.

Edit icon

Only for editable read-only fields will it display when the form field is hovered. Takes the user to another flow to edit the read-only information.

Value

Read-only field