---
title: "Boxes"
platform: universal
category: visual-design
url: https://developer.apple.com/design/human-interface-guidelines/boxes
id: boxes-universal
lastUpdated: 2025-06-30T12:46:03.310Z
extractionMethod: enhanced-turndown
qualityScore: 0.575
confidence: 0.775
contentLength: 1725
structureScore: 0.500
cleaningScore: 0.114
hasCodeExamples: false
hasImages: false
keywords: ["boxes", "box", "creates", "visually", "distinct", "group", "logically", "related", "information", "components"]
---
## Overview

Boxes A box creates a visually distinct group of logically related information and components. By default, a box uses a visible border or background color to separate its contents from the rest of the interface. A box can also include a title. Best practices Prefer keeping a box relatively small in comparison with its containing view. As a box’s size gets close to the size of the containing window or screen, it becomes less effective at communicating the separation of grouped content, and it can crowd other content. Consider using padding and alignment to communicate additional grouping within a box. A box’s border is a distinct visual element — adding nested boxes to define subgroups can make your interface feel busy and constrained. Content Provide a succinct introductory title if it helps clarify the box’s contents. The appearance of a box helps people understand that its contents are related, but it might make sense to provide more detail about the relationship. Also, a title can help VoiceOver users predict the content they encounter within the box. If you need a title, write a brief phrase that describes the contents. Use sentence-style capitalization. Avoid ending punctuation unless you use a box in a settings pane, where you append a colon to the title. Platform considerations No additional considerations for visionOS. Not supported in tvOS or watchOS. iOS, iPadOS By default, iOS and iPadOS use the secondary and tertiary background colors in boxes. macOS By default, macOS displays a box’s title above it. Resources Related Layout Developer documentation GroupBox — SwiftUI NSBox — AppKit Current page is Boxes Supported platforms Boxes Best practices Content Platform considerations Resources

## Related Concepts

- color
- layout

---

**Attribution Notice**

This content is sourced from Apple's Human Interface Guidelines: https://developer.apple.com/design/human-interface-guidelines/boxes

This content was extracted with good confidence. Structure and guidelines have been enhanced for better usability.

© Apple Inc. All rights reserved. This content is provided for educational and development purposes under fair use. This MCP server is not affiliated with Apple Inc. and does not claim ownership of Apple's content.

For the most up-to-date and official information, please refer to Apple's official documentation.