Picker

iOS 16.4+iPadOS 16.4+Not available on macOS

Displays a dropdown for selecting one value from a set of options.

import SwiftUIstruct PickerUsageExample: View {    enum Fruit: String, CaseIterable, Identifiable {        case apple = "Apple"        case banana = "Banana"        case cherry = "Cherry"        var id: String { rawValue }    }    @State private var fruit: Fruit = .apple    var body: some View {        FLXPicker("Fruit", selection: $fruit) {            ForEach(Fruit.allCases) { fruit in                Text(fruit.rawValue).tag(fruit)            }        }        .padding(FLXSpacing.xl)    }}

Installation

Requires the design system foundation (tokens and theme).

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

Usage

FLXPicker("Fruit", selection: $fruit) {    Text("Apple").tag("Apple")    Text("Banana").tag("Banana")}

Content

FLXPicker wraps the native Picker in .menu style. Populate it with any view tagged via .tag(_:), typically a ForEach.

Custom label triggers

Use the content/label initializer for a custom trigger like an avatar. No box decoration is applied:

FLXPicker(selection: $fruit) {  Text("Apple").tag("Apple")  Text("Banana").tag("Banana")} label: {  FLXAvatar(size: .small) {      FLXAvatarFallback("A")  }}

Custom styling

PickerStyle doesn't support custom conformances, so there's no FLXPickerStyle or override.

API Reference

FLXPicker

init(    selection: Binding<SelectionValue>,    @ViewBuilder content: @escaping () -> Content,    @ViewBuilder label: @escaping () -> Label)init(    _ titleKey: LocalizedStringKey = "",    selection: Binding<SelectionValue>,    @ViewBuilder content: @escaping () -> Content)init(    _ titleResource: LocalizedStringResource,    selection: Binding<SelectionValue>,    @ViewBuilder content: @escaping () -> Content)init<S: StringProtocol>(    _ title: S,    selection: Binding<SelectionValue>,    @ViewBuilder content: @escaping () -> Content)

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