Segmented controls

ComponentsControls

Source: Apple Inc. Canonical content at https://developer.apple.com/design/human-interface-guidelines/segmented-controls. This file is a structured index of that content, snapshot 2025-02-02. Apple HIG text and imagery are © Apple Inc.; this repository provides organization and cross-referencing for AI agent consumption only.

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

Get HIG guidance in your AI

Install Apple HIG Skills and get expert 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.