
Stepper
From syxUI — written for both platforms, not translated between them.
A stepper input — self-contained SwiftUI, styled from system tokens.
Inputs · SwiftUI · iOS 17
- inputs
- swiftui
The actual source
StepperField.swift
// Stepper · syxUI · https://syxui.dev/components/input-stepper
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
extension View {
func formaCard(_ pad: CGFloat = 18) -> some View {
self.padding(pad)
.background(Color(.systemBackground), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
.overlay(RoundedRectangle(cornerRadius: 20, style: .continuous).stroke(Color.primary.opacity(0.06), lineWidth: 1))
.shadow(color: .black.opacity(0.05), radius: 14, x: 0, y: 6)
}
}
// 17. Stepper
struct StepperField: View {
@State private var qty = 2
var body: some View {
VStack(spacing: 16) {
HStack {
VStack(alignment: .leading, spacing: 2) { Text("Seats").font(.system(size: 16, weight: .medium)); Text("$8 / seat / mo").font(.system(size: 13)).foregroundStyle(.secondary) }
Spacer()
HStack(spacing: 0) {
Button { if qty > 1 { qty -= 1 } } label: { Image(systemName: "minus").frame(width: 40, height: 38) }
Text("\(qty)").font(.system(size: 17, weight: .semibold).monospacedDigit()).frame(width: 40)
Button { qty += 1 } label: { Image(systemName: "plus").frame(width: 40, height: 38) }
}
.foregroundStyle(Color.primary)
.background(Color.primary.opacity(0.06), in: RoundedRectangle(cornerRadius: 12))
}
}
.formaCard()
}
}
iOS 17 · 1 dependencies
Dependencies
- SwiftUI
- formaCard
Requires iOS 17


