Read Only
Read Only displays previously submitted data from inputs/forms in a non-editable format.
Anatomy
- Label: The original label from the input.
- Text: The selected or keyed in value from the original input.
Usage Guidance
When to Use
Use Read-Only when previously entered data needs to be rendered in a non-editable format for quick consumption. For example, when a manager needs to review information submitted by their team before approval.
Do
Show only the selected options in a non-editable format.
Don't
Show all options in an editable state.
Do
When no value was selected or entered into the original input the read only view should display as 'n/a' meaning 'not available'.
Do
When a single checkbox is used the resulting read only value should be displayed as either 'Yes' or 'No'
Do
For inputs where the value is displayed in a pill the read only value should be displayed as plain text.
When to Consider Something Else
- If the content needs to be editable, use the original style input.
- If the input is temporarily disabled due to some other dependencies or requirements not being met, use the original input but in a disabled state.
API Guidelines
Coming Soon…
Accessibility Guidelines
Coming Soon…
Content Guidelines
- Labels should be written the same way as their input label counterpart.
- In the case of a multi-select input, each read only value should be displayed on its own line.
- Read-Only data should ideally never truncate.
Anatomy
- Label: The original label from the input.
- Text: The selected or keyed in value from the original input.
Usage Guidance
When to Use
Use Read-Only when previously entered data needs to be rendered in a non-editable format for quick consumption. For example, when a manager needs to review information submitted by their team before approval.
Do
Show only the selected options in a non-editable format.
Don't
Show all options in an editable state.
Do
When no value was selected or entered into the original input the read only view should display as 'n/a' meaning 'not available'.
Do
When a single checkbox is used the resulting read only value should be displayed as either 'Yes' or 'No'
Do
For inputs where the value is displayed in a pill the read only value should be displayed as plain text.
When to Consider Something Else
- If the content needs to be editable, use the original style input.
- If the input is temporarily disabled due to some other dependencies or requirements not being met, use the original input but in a disabled state.
API Guidelines
Coming Soon…
Accessibility Guidelines
Coming Soon…
Content Guidelines
- Labels should be written the same way as their input label counterpart.
- In the case of a multi-select input, each read only value should be displayed on its own line.
- Read-Only data should ideally never truncate.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.