<!--
{
  "availability" : [
    "iOS: 17.0.0 -",
    "iPadOS: 17.0.0 -",
    "macCatalyst: 17.0.0 -",
    "macOS: 14.0.0 -",
    "visionOS: 1.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "SwiftUI",
  "identifier" : "/documentation/SwiftUI/PickerStyle/palette",
  "metadataVersion" : "0.1.0",
  "role" : "Type Property",
  "symbol" : {
    "kind" : "Type Property",
    "modules" : [
      "SwiftUI"
    ],
    "preciseIdentifier" : "s:7SwiftUI11PickerStylePA2A07PalettecD0VRszrlE7paletteAEvpZ"
  },
  "title" : "palette"
}
-->

# palette

A picker style that presents the options as a row of compact elements.

```
@export(implementation) static var palette: PalettePickerStyle { get }
```

## Discussion> Note: When used outside of menus, this style is rendered as a
> segmented picker. If that is the intended usage, consider
> ``doc://com.apple.SwiftUI/documentation/SwiftUI/PickerStyle/segmented`` instead.

For each option’s label, use one symbol per item, if you add more than 6 options, the picker scrolls horizontally on iOS.

The following example creates a palette picker:

```
enum Reaction: Identifiable, CaseIterable {
    case thumbsup, thumbsdown, heart, questionMark
    var id: Self { self }
}

@State private var selection: Reaction? = .none

var body: some View {
    Menu("Reactions") {
        Picker("Palette", selection: $selection) {
            Label("Thumbs up", systemImage: "hand.thumbsup")
                .tag(Reaction.thumbsup)
            Label("Thumbs down", systemImage: "hand.thumbsdown")
                .tag(Reaction.thumbsdown)
            Label("Like", systemImage: "heart")
                .tag(Reaction.heart)
            Label("Question mark", systemImage: "questionmark")
                .tag(Reaction.questionMark)
        }
        .pickerStyle(.palette)
        Button("Reply...") { ... }
    }
}
```

Palette pickers will display the selection of untinted SF Symbols or
template images by applying the system tint. For tinted SF Symbols, a
stroke is outlined around the symbol upon selection. If you would like
to supply a particular image (or SF Symbol) to signify selection, we
suggest using [`custom`](/documentation/SwiftUI/PaletteSelectionEffect/custom).
This deactivates any system selection behavior, allowing the provided
image to solely indicate selection instead.

The following example creates a palette picker that disables the
system selection behaviour:

```
Menu {
    Picker("Palettes", selection: $selection) {
        ForEach(palettes) { palette in
            Label(palette.title, systemImage: selection == palette ?
                  "circle.dashed.inset.filled" : "circle.fill")
            .tint(palette.tint)
            .tag(palette)
        }
    }
    .pickerStyle(.palette)
    .paletteSelectionEffect(.custom)
} label: {
    ...
}
```

If a specific SF Symbol variant is preferable instead, use
[`symbolVariant(_:)`](/documentation/SwiftUI/PaletteSelectionEffect/symbolVariant(_:)):

```
Menu {
    Picker("Flags", selection: $selectedFlag) {
        ForEach(flags) { flag in
            Label(flag.title, systemImage: "flag")
                .tint(flag.color)
                .tag(flag)
        }
    }
    .pickerStyle(.palette)
    .paletteSelectionEffect(.symbolVariant(.slash))
} label: {
    ...
}
```

To apply this style to a picker, or to a view that contains pickers, use
the [`pickerStyle(_:)`](/documentation/SwiftUI/View/pickerStyle(_:)) modifier.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)