iOS 18 Control Center Widget UI Elements

With iOS 18, Apple expanded WidgetKit to let developers build custom controls for the redesigned Control Center, the Lock Screen, and the Action button. This guide details the specific user interface components, interactive elements, and display options developers can implement using the new Controls API, along with the framework constraints governing their design.

Supported Interactive Controls

Control Center widgets in iOS 18 do not support arbitrary SwiftUI layouts. Instead, Apple provides dedicated templates through the ControlWidget protocol designed for immediate, single-tap interactions. Developers can implement two core interactive elements:

  • Toggles (ControlWidgetToggle): Used for two-state actions (such as switching a feature on or off). A toggle binds directly to a boolean state via an AppIntent or a ControlWidgetToggleValueProvider. When activated, the control changes its visual state and executes the assigned background intent without launching the host app.
  • Buttons (ControlWidgetButton): Designed for discrete, one-shot actions. A button can trigger an execution intent in the background (like opening a garage door) or initiate an open intent that launches the host app via a deep link or specific view.

Display and Visual Components

Within the predefined templates for buttons and toggles, developers can customize a specific set of visual presentation elements:

  • SF Symbols and Template Icons: Controls require a system image (SF Symbol) to visually represent the action. Icons can be static or state-dependent, dynamically changing based on the current value provided by the widget's state provider.
  • Primary Text (Title): A short label identifying the function of the control, such as "Timer," "Camera," or "Flashlight."
  • Secondary Text (Value / Subtitle): An optional status string that appears below the title, used to show current conditions or modes, such as "Active," "Paused," or a specific numerical value.
  • Tint and State Styling: Controls automatically inherit the system Control Center styling. Developers can specify a tint color that activates when a toggle is turned on or when an action is being triggered, giving immediate visual feedback.

Sizing and Layout Constraints

Developers cannot embed arbitrary SwiftUI layout containers such as VStack, HStack, List, sliders, or text entry fields directly into a Control Center control.

The system controls the layout and sizing:

  • Controls are rendered strictly in fixed template sizes (1x1 standard circle/square or resized rectangular formats determined by the user in the Control Center edit grid).
  • Visual components are strictly organized into standard slots: an icon, a primary label, and a status label.
  • All user interaction must resolve through an AppIntent, ensuring controls remain lightweight, performant, and reliable across the Control Center, Lock Screen, and Action button surfaces.