How it works
A PaletteSelectionEffect describes how a palette-style picker decorates the option the person has chosen, letting you control the visual feedback that distinguishes the active item from the rest of the palette. Use it when you adopt .pickerStyle(.palette) and want the selected option to read clearly without relying on a separate checkmark or highlight bar. Rather than constructing the value directly, you supply one of its predefined constants to the paletteSelectionEffect(_:) modifier, and SwiftUI applies the matching treatment to the chosen item.
Switch the picker to the palette style
PaletteSelectionEffectonly has meaning inside a palette presentation, so it pairs with.pickerStyle(.palette). This lays the options out as a compact row of tappable items, which is what the selection effect then decorates. In the example thePicker("Color", selection: $selection)becomes a palette before any effect is applied.Apply the effect with paletteSelectionEffect(_:)
The
paletteSelectionEffect(_:)modifier takes aPaletteSelectionEffectvalue and is where the symbol actually plugs into the view hierarchy. Attach it to the picker, after the style, as in.paletteSelectionEffect(.symbol). The effect governs the selected item's appearance for the whole palette, not any single label.Choose a constant for the selected item's look
You pass one of the type's constants to select a treatment.
.symbolswaps or emphasizes the chosen option's SF Symbol to mark it as active, which is why each option here is aLabelwith asystemImagesuch as"heart.fill"or"leaf.fill". Other constants like.automaticand.customlet SwiftUI decide or defer to your own styling.Bind the selection so the effect has a target
The effect needs to know which option is current, which comes from the picker's selection binding and the per-option
tag(_:)values. Here@State private var selectionis bound through$selection, and tags like.tag("red")identify eachLabel; thePaletteSelectionEffectis then applied to whichever tag matchesselection.
.paletteSelectionEffect(.symbol) to .paletteSelectionEffect(.automatic) and watch how the selected color's marker shifts from a symbol emphasis to SwiftUI's default palette highlight.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 PaletteSelectionEffectDemo: View {
@State private var selection = "red"
var body: some View {
Picker("Color", selection: $selection) {
Label("Red", systemImage: "heart.fill").tint(.red).tag("red")
Label("Green", systemImage: "leaf.fill").tint(.green).tag("green")
Label("Blue", systemImage: "drop.fill").tint(.blue).tag("blue")
}
.pickerStyle(.palette)
.paletteSelectionEffect(.symbol)
.padding()
}
}