Skip to content
Stepper preview
Rendered from the SwiftUI source on this page.

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