Toggle

Displays a checkbox 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(alignment: .leading, spacing: FLXSpacing.sm) {            FLXToggle("Wi-Fi", isOn: $wifi)            FLXToggle("Bluetooth", isOn: $bluetooth)            FLXToggle("Airplane Mode", isOn: $airplaneMode)        }        .padding(FLXSpacing.xl)    }}

Show more

Installation

Requires the design system foundation (tokens and theme).

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

Usage

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

FLXToggle is always controlled via isOn. On macOS it draws a checkbox, like SwiftUI's default Toggle on the Mac, with the label on the trailing side. The box follows .controlSize(_:).

Custom styling

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

VStack(alignment: .leading, spacing: FLXSpacing.sm) {  FLXToggle("Default style", isOn: $isOn)  FLXToggle("Switch style", isOn: $isOn)      .flxToggleStyle(.switch)}

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.