Technologies›SwiftUI

SelectionShapeStyle struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A style used to visually indicate selection following platform conventional

How it works

SelectionShapeStyle is the shape style that paints content with the system's current selection appearance — the same tint SwiftUI uses to highlight a selected row, cell, or control. Rather than hardcoding a specific accent color, you reach for it when you want a fill or stroke to read as "this is selected," and have it automatically match the platform, the user's accent-color preference, and the surrounding context. You almost never construct it directly; you use the .selection shorthand wherever a ShapeStyle is expected.

  1. Reference the style through the .selection shorthand

    Like the other semantic shape styles, SelectionShapeStyle is exposed as a static member so you can write it inline wherever a ShapeStyle is accepted. In the example the style is named simply as .selection, which resolves to a SelectionShapeStyle value — no initializer call and no color literal required.

  2. Fill a shape with it using background(_:in:)

    Passing the style to background(.selection, in:) fills the supplied shape with the selection tint and places it behind the view's content. Here RoundedRectangle(cornerRadius: 12) is the shape being filled, so the HStack of Image and Text sits on top of a selection-colored, rounded backdrop.

  3. Pair it with a contrasting foregroundStyle

    Because the selection tint is typically a saturated, system-driven color, the content drawn over it needs a deliberate foreground. The example sets foregroundStyle(.white) so the checkmark.circle.fill glyph and the Text stay legible against whatever color .selection resolves to at runtime.

  4. Use it anywhere a ShapeStyle is expected

    SelectionShapeStyle conforms to ShapeStyle, so it is interchangeable with styles like .tint or a Color. You can hand it to foregroundStyle, fill, or a Shape's stroke just as readily as the background(_:in:) call shown here — the style adapts its concrete color to the context it is applied in.

Try it — Change .background(.selection, in: RoundedRectangle(cornerRadius: 12)) to .background(.tint, in: RoundedRectangle(cornerRadius: 12)) and compare the fill — the selection style tracks the system's selection highlight, which can differ from the plain accent tint.

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.

SelectionShapeStyle.swift
struct SelectionShapeStyleDemo: View {
    var body: some View {
        HStack(spacing: 8) {
            Image(systemName: "checkmark.circle.fill")
            Text("Selected Item")
        }
        .font(.headline)
        .foregroundStyle(.white)
        .padding()
        .background(.selection, in: RoundedRectangle(cornerRadius: 12))
        .padding()
    }
}
Live preview
Selected Item
Selected Item
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →