Stack View

A stack view provides a way to display name/value pairs and optionally allows for editing and progressive disclosure of data.





  • When the name/value pairs are important enough and the list of items is small, show all name/value pairs prominently in the UI.
  • Use a progressive disclosure control when any of the following apply:
    • An overview of the data is more important than its details
    • The set of name/value pairs is large
    • You want to allow users to reveal more complex or less frequently used data as necessary
  • Use a dash to indicate data missing in the value field.
  • Nest only one level, as shown in this stack view.

  • Place an editable stack view inside a dialog or wizard. A stack view in the main workspace is noneditable to prevent users from accidentally changing the data.
  • Always show a section that contains a validation error.
  • Use noun phrases and sentence-style capitalization in the name field (blue area).
  • Don't place a colon (:) after the name.
  • For multiline names, left-justify the text with text in the first line.  For more than three lines, use an ellipsis (…).

Visual Specification

Related Topics

Average (0 Votes)