Components
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.
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.
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."
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.
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
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
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.
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.
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
1
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.
2
Content
Displays the read-only data.
3
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
Read-only field