Toggle

iOS 16.4+iPadOS 16.4+

Displays a switch for an on/off value.

import SwiftUIstruct ToggleUsageExample: View {    @State private var wifi = true    @State private var bluetooth = false    @State private var airplaneMode = false    var body: some View {        VStack(spacing: FLXSpacing.lg) {            FLXToggle("Wi-Fi", isOn: $wifi)            FLXToggle("Bluetooth", isOn: $bluetooth)            FLXToggle("Airplane Mode", isOn: $airplaneMode)        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

pnpm dlx shadcn@latest add https://swiftui.flexnative.com/r/ios-toggle.json

Usage

FLXToggle("Wi-Fi", isOn: $wifi)

FLXToggle is always controlled via isOn.

Custom styling

FLXToggleStyle conforms to SwiftUI's native ToggleStyle. Override rendering for a subtree with any ToggleStyle via .flxToggleStyle(_:):

struct FLXCheckboxToggleStyle: ToggleStyle {  func makeBody(configuration: Configuration) -> some View {      Button {          configuration.isOn.toggle()      } label: {          HStack(spacing: FLXSpacing.sm) {              Image(systemName: configuration.isOn ? "checkmark.square.fill" : "square")                  .foregroundStyle(configuration.isOn ? .blue : .gray)              configuration.label          }      }      .buttonStyle(.plain)  }}VStack(alignment: .leading, spacing: FLXSpacing.lg) {  FLXToggle("Default style", isOn: $isOn)  FLXToggle("Checkbox style", isOn: $isOn)      .flxToggleStyle(FLXCheckboxToggleStyle())}

API Reference

FLXToggle

init(isOn: Binding<Bool>, @ViewBuilder label: @escaping () -> Label)init(_ titleKey: LocalizedStringKey, isOn: Binding<Bool>)init(_ titleResource: LocalizedStringResource, isOn: Binding<Bool>)init<S: StringProtocol>(_ title: S, isOn: Binding<Bool>)

For more information about FLXToggle props, see the Apple documentation.