A stack view displays key/value pairs, which users can expand to show more detail.
Usage
Use a stack view when you want to:
- Display related key/value pairs, for example, an object’s settings.
- Progressively disclose data. This is useful when the set of key/value pairs is large or you want to enable users to reveal more complex or less frequently used data as necessary.
Anatomy
Labels
Consider following points for stack view labels:
- Provide terse labels that let users know what is under the label. Try to keep the label to one line.
- Use noun phrases, sentence-style capitalization, and no ending punctuation.
- Avoid using icons.
Highlights and Horizontal lines
The stack view highlight color (#DDDDDD
) differs from the usual Clarity highlight color to make it more distinct. Expanded sections have a lighter background color to make it easier to understand the hierarchy.
Horizontal lines in the stack editor are for readability–they help users quickly discern the relationship between columns.
Behavior
Enabling Value Editing
StackView has an Edit button on the top right, which on click opens an editable stack view in a modal. This design prevents users from accidentally altering a value in the main content area. Common editing controls include input fields, select boxes, checkboxes, and radio buttons.
Placement
Stack views are designed for use in the main content area and modals.