Group header

TitledSeparator

A group header clearly labels a group of UI controls.

When to use

Follow the rules in Groups of controls.

Do not use group headers when each group contains 3 controls and less. Separate with vertical insets instead.

Incorrect

Each group has less than 3 controls. Group headers only add noise in this case because control labels are enough to understand their purpose.

Correct

How to use

Use title capitalization for the label.

Make the label short, preferably no more than 4 words. Avoid generic words, such as “General” or “Options”. See Writing short and clear.

If a group contains rarely used or advanced settings, use a collapsible group header and collapse it by default.