SwiftUI 26 Features

Overview

Comprehensive guide to new SwiftUI features in iOS 26, iPadOS 26, macOS Tahoe, watchOS 26, and visionOS 26. From the Liquid Glass design system to rich text editing, these enhancements make SwiftUI more powerful across all Apple platforms.

Core principle From low level performance improvements all the way up through the buttons in your user interface, there are some major improvements across the system.

When to Use This Skill

• Adopting the Liquid Glass design system
• Implementing rich text editing with AttributedString
• Embedding web content with WebView
• Optimizing list and scrolling performance
• Using the @Animatable macro for custom animations
• Building 3D spatial layouts on visionOS
• Bridging SwiftUI scenes to UIKit/AppKit apps
• Implementing drag and drop with multiple items
• Creating 3D charts with Chart3D
• Adding widgets to visionOS or CarPlay
• Adding custom tick marks to sliders (chapter markers, value indicators)
• Constraining slider selection ranges with enabledBounds
• Customizing slider appearance (thumb visibility, current value labels)
• Creating sticky safe area bars with blur effects
• Opening URLs in in-app browser
• Using system-styled close and confirm buttons
• Applying glass button styles (iOS 26.1+)
• Controlling button sizing behavior
• Implementing compact search toolbars
• Adjusting line height or baseline spacing for text

System Requirements

iOS 26+, iPadOS 26+, macOS Tahoe+, watchOS 26+, visionOS 26+

Liquid Glass Design System

For comprehensive coverage, see axiom-liquid-glass (design principles, variants, review pressure) and axiom-liquid-glass-ref (app-wide adoption guide). This section covers WWDC 256-specific APIs only.

Automatic Adoption

Recompile with iOS 26 SDK — navigation containers, tab bars, toolbars, toggles, segmented pickers, and sliders automatically adopt the new design. Bordered buttons default to capsule shape. Sheets get Liquid Glass background (remove any presentationBackground customizations).

Toolbar APIs (iOS 26)

ToolbarSpacer

.toolbar {
    ToolbarItem(placement: .bottomBar) { Button("Archive", systemImage: "archivebox") { } }
    ToolbarSpacer(.flexible, placement: .bottomBar)  // Push items apart
    ToolbarItem(placement: .bottomBar) { Button("Compose", systemImage: "square.and.pencil") { } }
}
// .fixed separates groups visually; .flexible pushes apart (like Spacer in HStack)

ToolbarItemGroup (Visual Grouping)

Items in a ToolbarItemGroup share a single glass background "pill". ToolbarItemPlacement controls visual appearance: confirmationAction → glassProminent styling, cancellationAction → standard glass. Use .sharedBackgroundVisibility(.hidden) to exclude items (e.g., avatars) from group background.

Toolbar Morphing

Attach .toolbar {} to individual views inside NavigationStack (not to NavigationStack itself). iOS 26 morphs between per-view toolbars during push/pop. Use toolbar(id:) with matching ToolbarItem(id:) across screens for items that should stay stable (no bounce):

// MailboxList
.toolbar(id: "main") {
    ToolbarItem(id: "filter", placement: .bottomBar) { Button("Filter") { } }
    ToolbarSpacer(.flexible, placement: .bottomBar)
    ToolbarItem(id: "compose", placement: .bottomBar) { Button("New Message") { } }
}
// MessageList — "filter" absent (animates out), "compose" stays stable
.toolbar(id: "main") {
    ToolbarSpacer(.flexible, placement: .bottomBar)
    ToolbarItem(id: "compose", placement: .bottomBar) { Button("New Message") { } }
}

#1 gotcha: Toolbar on NavigationStack = nothing to morph between.

DefaultToolbarItem

Reposition system-provided items (like search) within your toolbar layout:

DefaultToolbarItem(kind: .search, placement: .bottomBar)
// Replaces system's default placement of matching kind

Use in collapsed NavigationSplitView sidebar to specify which column shows search on iPhone. Wrap in if #available(iOS 26.0, *) for backward compatibility.

User-Customizable Toolbars

toolbar(id:) enables user customization (rearrange, show/hide). Only .secondaryAction items support customization on iPadOS. Use showsByDefault: false for optional items. Add ToolbarCommands() for macOS menu item.

Other Toolbar Features

• .navigationSubtitle("3 unread") — Secondary line below title
• .badge(3) on toolbar items — Notification counts
• Monochrome icon rendering — Reduces visual noise; tint for meaning, not decoration
• Scroll edge blur — Automatic, no code required

Bottom-Aligned Search

Foundational search APIs: See axiom-swiftui-search-ref. This section covers iOS 26 refinements only.

NavigationSplitView {
    List { }.searchable(text: $searchText)
}
// Bottom-aligned on iPhone, top trailing on iPad (automatic)
// Use placement: .sidebar to restore sidebar-embedded search on iPad

• searchToolbarBehavior(.minimize) — Compact search that expands on tap
• Tab(role: .search) — Dedicated search tab; search field replaces tab bar. See swiftui-nav-ref Section 5.7

Glass Effect for Custom Views

Button("To Top", systemImage: "chevron.up") { scrollToTop() }
    .padding()
    .glassEffect()  // Add .interactive for custom controls on iOS

• GlassEffectContainer — Required when multiple glass elements are nearby (glass can't sample glass)
• glassEffectID(_:in:) — Fluid morphing transitions between glass elements using a namespace
• Sheet morphing — Use .matchedTransitionSource + .navigationTransition(.zoom(...)) to morph sheets from buttons

Button & Control Changes

• Capsule shape default for bordered buttons (override with .buttonBorderShape(.roundedRectangle))
• .controlSize(.extraLarge) — New extra-large button size
• .controlSize(.small) on containers — Preserve pre-iOS 26 density
• GlassButtonStyle(.clear/.glass/.tint) — Glass button variants (iOS 26.1+)
• .buttonSizing(.fit/.stretch/.flexible) — Control button layout behavior
• Button(role: .close) / Button(role: .confirm) — System-styled close/confirm
• .clipShape(.rect(cornerRadius: 12, style: .containerConcentric)) — Corner concentricity
• Menus: icons on leading edge, consistent iOS/macOS

Slider Enhancements

iOS 26 adds custom tick marks, constrained selection ranges, current value labels, and thumb visibility control.

Slider Ticks

Core types: SliderTick<V>, SliderTickContentForEach, SliderTickBuilder

// Static ticks with labels
Slider(value: $value, in: 0...10) {
    Text("Rating")
} ticks: {
    SliderTick(0) { Text("Min") }
    SliderTick(5) { Text("Mid") }
    SliderTick(10) { Text("Max") }
}

// Dynamic ticks from collection
SliderTickContentForEach(stops, id: \.self) { value in
    SliderTick(value) { Text("\(Int(value))°").font(.caption2) }
}

// Step-based ticks (called for each step value)
Slider(value: $volume, in: 0...10, step: 2, label: { Text("Volume") }, tick: { value in
    SliderTick(value) { Text("\(Int(value))") }
})

API constraint: SliderTickContentForEach requires Data.Element to match SliderTick<V> value type. For custom structs, extract numeric values: chapters.map(\.time) then look up labels via chapters.first(where: { $0.time == time }).

Full-Featured Slider

Slider(
    value: $rating, in: 0...100,
    neutralValue: 50,           // Starting point / center value
    enabledBounds: 20...80,     // Restrict selectable range
    label: { Text("Rating") },
    currentValueLabel: