Intro
The key value table view cell is an uneditable table view cell that fits inside the table view container. It is ideal for displaying simple sets of data or information to the user.
Key value table view cell in compact (left) and regular-readable width (right)
Usage
Do
- Display only a key label and value.
- Convey uneditable information to a user.
Don't
- Don’t display an image.
- Don’t use as an editable field (i.e., text inputs).
Anatomy
A. Key Label
This is the label to describe the content.
B. Value
The data for a particular label. Values are read-only and uneditable but may be actionable.
Actionable values have a specific action associated with the text.
Key value table view cell anatomy
Behavior and Interaction
Text Wrapping
The value text may wrap as needed to display all the information.
Actionable Value
By default, a key value table view cell is read-only and a user can’t edit or interact with it. However, in certain use cases, a value may be actionable.
Actionable values have a specific action associated with the text. For example, a phone number may open the native keypad, or an address may open the maps application.
Key value table view cells that have an actionable value must set the value text to tint color to indicate that there is an associated action.
An actionable value is still uneditable.
Tapping on the phone number (left) opens the keypad (right)
Adaptive Design
Key value table view cell may be used in compact, regular, regular-readable, and regular full-width. Regular width may also be used in an optional two-column display.
Key value table view cell in compact (left), regular-readable (middle), and regular full-width (right)
Resources
Development: UIKit FUIKeyValueTableViewCell, SwiftUI KeyValueItem
SAP Fiori for Android: Key Value Cell