Segmented controls

On this page3 sections

Best practices

Use a segmented control to provide closely related choices that affect an object, state, or view.

Consider a segmented control when it’s important to group functions together, or to clearly show their selection state.

Keep control types consistent within a single segmented control.

Limit the number of segments in a control.

In general, keep segment size consistent.

Content

Prefer using either text or images — not a mix of both — in a single segmented control.

As much as possible, use content with a similar size in each segment.

Use nouns or noun phrases for segment labels.

Platform considerations

iOS, iPadOS

Consider a segmented control to switch between closely related subviews.

macOS

Consider using introductory text to clarify the purpose of a segmented control.

Use a tab view in the main window area — instead of a segmented control — for view switching.

Consider supporting spring loading.

tvOS

Consider using a split view instead of a segmented control on screens that perform content filtering.

Avoid putting other focusable elements close to segmented controls.


For the complete guidance, including worked examples and illustrations, see the canonical page: https://developer.apple.com/design/human-interface-guidelines/segmented-controls

Apple HIG text and imagery are © Apple Inc. This page is a structured index of Apple’s canonical documentation (snapshot 2025-02-02), provided for quick reference and AI-agent consumption — it isn’t affiliated with or endorsed by Apple. Read the original at developer.apple.com (opens in new tab).

Get HIG guidance in your AI

Install HIG Doctor and get expert Apple design guidance directly in Claude Code.

npx skills add raintree-technology/hig-doctor
Email updates aren't configured on this deployment yet. Follow the GitHub repo (opens in new tab) for updates.