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
Use a key value cell to display simple sets of data or information.
Don't
Don’t use a key value cell as an editable field (i.e., text inputs).
- Display a key label alongside a value, not with an image.
- Convey uneditable information to a user.
Anatomy
A. Key Label
A descriptive label.
B. Value
The data for a particular label.
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, preventing user edits or interactions. 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 and the text weight to Semibold 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 cells 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