- Platforms
- Foundations
-
Patterns
- Overview
- Accessing private data
- Charting data
- Collaboration and sharing
- Drag and drop
- Entering data
- Feedback
- File management
- Going full screen
- Launching
- Live-viewing apps
- Loading
- Managing accounts
- Managing notifications
- Modality
- Multitasking
- Offering help
- Onboarding
- Playing audio
- Playing haptics
- Playing video
- Printing
- Ratings and reviews
- Searching
- Settings
- Undo and redo
- Workouts
-
Components
- All components
- Content
- Layout and organization
- Menus and actions
- Navigation and search
- Presentation
- Selection and input
- Status
- System experiences
- Inputs
-
Technologies
- All technologies
- AirPlay
- Always On
- App Clips
- Apple Pay
- Augmented reality
- CareKit
- CarPlay
- Game Center
- HealthKit
- HomeKit
- iCloud
- In-app purchase
- Live Photos
- Mac Catalyst
- Machine learning
- Maps
- Messages for Business
- NFC
- Photo editing
- ResearchKit
- SharePlay
- ShazamKit
- Sign in with Apple
- Siri
- Tap to Pay on iPhone
- Wallet
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
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.