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

Time Wheel

From syxUI — written for both platforms, not translated between them.

An iOS wheel time picker.

Inputs · SwiftUI · iOS 17

  • inputs
  • swiftui

The actual source

PickerTimeWheel.swift
// Time Wheel · syxUI · https://syxui.dev/components/picker-time-wheel
// Free in any project. Keep this line and credit syxUI where a person can read it.

import SwiftUI

func wheelColumn(_ col: [String], big: CGFloat) -> some View {
    VStack(spacing: 8) {
        ForEach(Array(col.enumerated()), id: \.offset) { i, v in
            Text(v).font(.system(size: i == 1 ? big : big - 4, weight: i == 1 ? .semibold : .regular)).foregroundStyle(i == 1 ? Color.primary : Color.secondary.opacity(0.4))
        }
    }.frame(maxWidth: .infinity)
}

struct PickerTimeWheel: View {
    let cols: [[String]] = [["10", "11", "12"], ["25", "30", "35"], ["AM", "PM", ""]]
    var body: some View {
        HStack(spacing: 0) { ForEach(Array(cols.enumerated()), id: \.offset) { _, col in wheelColumn(col, big: 22) } }
            .padding(.vertical, 14).frame(width: 260)
            .overlay { RoundedRectangle(cornerRadius: 8).fill(Color.primary.opacity(0.05)).frame(height: 34) }
            .overlay(RoundedRectangle(cornerRadius: 14, style: .continuous).stroke(Color.primary.opacity(0.08), lineWidth: 1))
    }
}
iOS 17 · No dependencies

Dependencies

SwiftUI
No external dependencies

Requires iOS 17