Skip to content
hig-components-controls logo

Apple HIG: Selection and Input Controls

hig-components-controls

>-

SKILL.md

Full skill instructions

Apple HIG: Selection and Input Controls

Check for .claude/​apple-design-context.md before asking questions. Use existing context and only ask for information not already covered.

Key Principles

  1. Clear current state. Users must always see what is selected. Toggles show on/​off, segmented controls highlight the active segment, pickers display the current selection.

  2. Prefer standard system controls. Built-in controls provide consistency and accessibility. Custom controls introduce a learning curve and may break assistive features.

  3. Toggles for binary states. On or off. In Settings-style screens, changes take effect immediately. In modal forms, changes commit on confirmation.

  4. Segmented controls for mutually exclusive options. 2-5 items, roughly equal importance, short labels.

  5. Sliders for continuous values. When precise numeric input is not critical. Provide min/​max labels or icons for range endpoints.

  6. Pickers for long option lists. Too many options for a segmented control. Works well for dates, times, structured data.

  7. Steppers for small, precise adjustments. Increment/​decrement in fixed steps. Display current value next to the stepper with reasonable min/​max bounds.

  8. Text fields for short, single-line input. Text views for multi-line. Configure keyboard type to match expected input (email, URL, number).

  9. Combo boxes: text input + selection list. macOS. Type a value or choose from a predefined list when custom values are valid.

  10. Token fields: discrete values as visual tokens. macOS. For email recipients, tags, or collections of discrete items.

  11. Gauges and rating indicators display values. Gauges show a value within a range. Rating indicators show ratings (often stars). Display-only; use interactive variants for input.

Reference Index

ReferenceTopicKey content
controls.mdGeneral controlsStates, affordance, system controls
toggles.mdTogglesOn/​off, immediate effect
segmented-controls.mdSegmented controls2-5 options, equal weight
sliders.mdSlidersContinuous range, min/​max labels
steppers.mdSteppersFixed steps, bounded values
pickers.mdPickersDates, times, long option sets
combo-boxes.mdCombo boxesmacOS, type or select, custom values
text-fields.mdText fieldsShort input, keyboard types, validation
text-views.mdText viewsMulti-line, comments, descriptions
labels.mdLabelsPlacement, VoiceOver support
token-fields.mdToken fieldsmacOS, chips, tags, recipients
virtual-keyboards.mdVirtual keyboardsEmail, URL, number keyboard types
rating-indicators.mdRating indicatorsStar ratings, display-only
gauges.mdGaugesLevel indicators, range display

Output Format

  1. Control recommendation with rationale and why alternatives are less suitable.
  2. State management -- how the control communicates current state and whether changes apply immediately or on confirmation.
  3. Validation approach -- when to show errors and how to communicate rules.
  4. Accessibility -- labels, traits, hints for VoiceOver.

Questions to Ask

  1. What type of data? (Boolean, choice from fixed set, numeric, free-form text?)
  2. How many options?
  3. Which platforms? (Combo boxes and token fields are macOS-only)
  4. Settings screen or inline form?

Related Skills

  • hig-components-menus -- Buttons and pop-up buttons complementing selection controls
  • hig-components-dialogs -- Sheets and popovers containing forms
  • hig-components-search -- Search fields sharing text input patterns
  • hig-inputs -- Keyboard, pointer, gesture interactions with controls
  • hig-foundations -- Typography, color, layout for control styling

Built by Raintree Technology · More developer tools

When to Use

This skill is applicable to execute the workflow or actions described in the overview.

More skills from MudassarAbrar

salesforce-development logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

salesforce-development

Expert patterns for Salesforce platform development including Lightning Web Components (LWC), Apex triggers and classes, REST/Bulk APIs, Connected Apps, and Salesforce DX with scratch orgs and 2nd ...

3 0
View
azure-monitor-opentelemetry-ts logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

azure-monitor-opentelemetry-ts

Instrument applications with Azure Monitor and OpenTelemetry for JavaScript (@azure/monitor-opentelemetry). Use when adding distributed tracing, metrics, and logs to Node.js applications with Appli...

3 0
View
popup-cro logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

popup-cro

Create and optimize popups, modals, overlays, slide-ins, and banners to increase conversions without harming user experience or brand trust.

3 0
View
mtls-configuration logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

mtls-configuration

Configure mutual TLS (mTLS) for zero-trust service-to-service communication. Use when implementing zero-trust networking, certificate management, or securing internal service communication.

3 0
View
azure-cosmos-db-py logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

azure-cosmos-db-py

Build Azure Cosmos DB NoSQL services with Python/FastAPI following production-grade patterns. Use when implementing database client setup with dual auth (DefaultAzureCredential + emulator), service...

3 0
View
terraform-infrastructure logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

terraform-infrastructure

Terraform infrastructure as code workflow for provisioning cloud resources, creating reusable modules, and managing infrastructure at scale.

3 0
View
one-drive-automation logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

one-drive-automation

Automate OneDrive file management, search, uploads, downloads, sharing, permissions, and folder operations via Rube MCP (Composio). Always search tools first for current schemas.

3 0
View
memory-safety-patterns logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

memory-safety-patterns

Implement memory-safe programming with RAII, ownership, smart pointers, and resource management across Rust, C++, and C. Use when writing safe systems code, managing resources, or preventing memory...

3 0
View
fp-ts-errors logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

fp-ts-errors

Handle errors as values using fp-ts Either and TaskEither for cleaner, more predictable TypeScript code. Use when implementing error handling patterns with fp-ts.

3 0
View
framework-migration-code-migrate logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

framework-migration-code-migrate

You are a code migration expert specializing in transitioning codebases between frameworks, languages, versions, and platforms. Generate comprehensive migration plans, automated migration scripts, and

3 0
View
azure-ai-voicelive-java logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

azure-ai-voicelive-java

Real-time, bidirectional voice conversations with AI assistants using WebSocket technology.

3 0
View
agent-memory-mcp logo
MudassarAbrar/SAGE__GEMINI_LIVE_AGENT_HACKATHON

agent-memory-mcp

A hybrid memory system that provides persistent, searchable knowledge management for AI agents (Architecture, Patterns, Decisions).

3 0
View

Popular AI tools

Kaiber logo
Video

Kaiber

Generate, edit, and beat-sync AI video with leading models in one workspace.

Paid
View
Vimcal logo
Productivity

Vimcal

The world's fastest calendar for remote work

Free
View

Transform Your Design with AI Designer by ImgCreator.ai

Freemium
View
Akool AI logo
Content & writing

Akool AI

Revolutionizing Video Production with AI-Powered Creativity

Paid
View

Extend an image past the frame and let AI fill the new aspect ratio.

Freemium
View
StarByFace logo
Security

StarByFace

Discover your celebrity doppelgänger with StarByFace!

Free
View
C

ChainClarity explains 700+ crypto whitepapers in plain English, with layered summaries, comparisons, research tools, alerts, and a $4.99 Pro plan.

Freemium
View
Opus Clip logo
Coding & apps

Opus Clip

Opus.ai: Revolutionize Your Web Experience

Free
View