How it works
PalettePickerStyle renders a picker as a compact row of selectable choices rather than a wheel, menu, or segmented control, letting people pick a single value by tapping its swatch or icon directly. Reach for it when each option reads best as a small visual token — a color, a flag, a symbol — and you want the full set visible at once instead of hidden behind a disclosure. You rarely name the type directly; instead you apply it through the .palette shorthand on the pickerStyle(_:) modifier, and SwiftUI lays the options out as an in-line palette bound to your selection.
Apply the style with pickerStyle(.palette)
The pickerStyle(_:) view modifier is how every PickerStyle, including this one, reaches the picker. Passing the .palette shorthand resolves to PalettePickerStyle and switches the picker from its default presentation to a flat palette of choices. In the example,
.pickerStyle(.palette)is attached to thePicker("Flag", selection: $flag)and replaces what would otherwise be a menu or wheel.Drive selection through the picker's binding
PalettePickerStyle is purely a presentation choice; the Picker still owns selection. The style highlights whichever option matches the bound value and writes the new value back when a swatch is tapped. Here the
selection: $flagbinding ties the palette to@State private var flag, so tapping the Green token setsflagto "Green".Give each choice an identity with tag(_:)
Each item in the palette must carry a tag whose type matches the selection so the style knows which swatch is selected and what value to emit. The
.tag("Red"),.tag("Green"), and.tag("Blue")calls pair each row with the String values that flow through$flag.Use Label so each choice has a palette token
PalettePickerStyle leans on the icon supplied by each option to draw a tappable token, so labeling content with a symbol produces a cleaner palette than plain text. Each option uses
Label("Red", systemImage: "flag.fill"), giving the style aflag.fillglyph to present as the selectable swatch.
systemImage: "flag.fill" arguments to icons like "circle.fill", "square.fill", and "triangle.fill" — to see how PalettePickerStyle renders each option as its own token.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct PalettePickerStyleDemo: View {
@State private var flag = "Red"
var body: some View {
Picker("Flag", selection: $flag) {
Label("Red", systemImage: "flag.fill").tag("Red")
Label("Green", systemImage: "flag.fill").tag("Green")
Label("Blue", systemImage: "flag.fill").tag("Blue")
}
.pickerStyle(.palette)
.padding()
}
}