Controls (Toggle, Slider, Picker)

Controls (Toggle, Slider, Picker)

Intent

Use native controls for settings and configuration screens, keeping labels accessible and state bindings clear.

Core patterns

• Bind controls directly to @State, @Binding, or @AppStorage.
• Prefer Toggle for boolean preferences.
• Use Slider for numeric ranges and show the current value in a label.
• Use Picker for discrete choices; use .pickerStyle(.segmented) only for 2–4 options.
• Keep labels visible and descriptive; avoid embedding buttons inside controls.

Example: toggles with sections

Form {
  Section("Notifications") {
    Toggle("Mentions", isOn: $preferences.notificationsMentionsEnabled)
    Toggle("Follows", isOn: $preferences.notificationsFollowsEnabled)
    Toggle("Boosts", isOn: $preferences.notificationsBoostsEnabled)
  }
}

Example: slider with value text

Section("Font Size") {
  Slider(value: $fontSizeScale, in: 0.5...1.5, step: 0.1)
  Text("Scale: \(String(format: \"%.1f\", fontSizeScale))")
    .font(.scaledBody)
}

Example: picker for enums

Picker("Default Visibility", selection: $visibility) {
  ForEach(Visibility.allCases, id: \.self) { option in
    Text(option.title).tag(option)
  }
}

Design choices to keep

• Group related controls in a Form section.
• Use .disabled(...) to reflect locked or inherited settings.
• Use Label inside toggles to combine icon + text when it adds clarity.

Pitfalls

• Avoid .pickerStyle(.segmented) for large sets; use menu or inline styles instead.
• Don’t hide labels for sliders; always show context.
• Avoid hard-coding colors for controls; use theme tint sparingly.