InlinePickerStyle struct

How it works

InlinePickerStyle is a picker style that lays a picker's choices out directly within the surrounding content rather than collapsing them behind a menu or pushing them onto a separate screen. Instead of a single summary row that you tap to reveal options, every option appears as its own selectable row in place, with the current selection marked. Reach for this style inside a List or Form when you want the available choices to stay visible and immediately tappable as part of the scrolling content.

1. Apply the style with pickerStyle(.inline)

   You don't construct InlinePickerStyle directly. Instead, attach the .pickerStyle(.inline) modifier to a Picker, where .inline is the shorthand for InlinePickerStyle. In the example, .pickerStyle(.inline) hangs off the Picker("Flavor", selection: $flavor), telling that picker to render its options as inline rows.

2. Bind the selection to drive the marked row

   The style needs a selection binding so it knows which inline row to mark as chosen. The Picker's selection parameter takes a binding such as $flavor, backed here by the @State private var flavor; whichever option's tag matches that value is shown as selected, and tapping a different row writes the new value back through the binding.

3. Provide one option per row with tag(_:)

   Each view in the picker's content becomes its own inline row, and tag(_:) gives each one the identity that's compared against the selection. The three Text views — Text("Vanilla").tag("Vanilla"), Text("Chocolate"), and Text("Strawberry") — each carry a String tag matching the type of flavor, so the inline style can highlight the right one.

4. Embed the picker in a List or Form

   InlinePickerStyle is designed for container contexts and reads its appearance from the enclosing list or form. Placing the Picker inside List lets the inline rows blend into the surrounding rows and adopt the list's separators, insets, and section styling rather than floating on their own.