Boxes

A box is a type of view that creates distinct, logical groupings of controls, text fields, and other interface elements. For example, a preferences window may include boxes that visually group related settings together. By default, a box has a border and a title, either of which can be disabled if it makes sense for your app. The title, if displayed, can be positioned above (the default) or below the box.

The Do Not Disturb box, as shown in the Notifications preference pane.

Avoid nesting boxes. Nested boxes take up space and make it hard for people to discern individual box boundaries. Instead of nesting, consider adding extra padding to separate groups of related elements within a box.

Use sentence-style capitalization in box titles. Capitalize the first word and make the rest of the words lowercase unless they’re proper nouns or proper adjectives.

Don’t end a box title with a colon. A colon is unnecessary because the box itself creates a visual relationship between the box’s title and its contents.

For developer guidance, see NSBox.