Skip to main content
type PickerStyle =
  | "automatic"
  | "segmented"
  | "inline"
  | "menu"
  | "navigationlink"
  | "palette"
  | "radiogroup"
  | "wheel";

​
Values

​
automatic
string
Automatically chooses the most appropriate picker style for the current context and platform.
​
segmented
string
Displays options as a segmented control with side-by-side buttons. Best for 2-5 options.
​
inline
string
Displays options inline within the current view. Expands to show all options without navigation.
​
menu
string
Displays options in a dropdown menu. Good for longer lists while conserving space.
​
navigationlink
string
Navigates to a separate screen to display options. Suitable for long lists in hierarchical navigation.
​
palette
string
Displays options in a grid or palette layout. Useful for visual options like colors or icons.
​
radiogroup
string
Displays options as a vertical list of radio buttons. Clear for short to medium lists.
​
wheel
string
Displays options in a spinning wheel picker. Classic iOS-style picker for dates, times, or lists.

​
Usage

const [selection, setSelection] = useState("option1");

// Segmented control style
Picker("Choose", [selection, setSelection], [
  Text("Option 1").tag("option1"),
  Text("Option 2").tag("option2"),
  Text("Option 3").tag("option3")
])
.pickerStyle("segmented")

// Menu/dropdown style
Picker("Select Color", [selection, setSelection], [
  Text("Red").tag("red"),
  Text("Blue").tag("blue"),
  Text("Green").tag("green")
])
.pickerStyle("menu")

// Wheel picker style
Picker("Time", [selection, setSelection], [
  ForEach(hours, (hour) => Text(hour).tag(hour))
])
.pickerStyle("wheel")

​
Platform Support

StyleiOSWebAndroidNotes
automatic✅✅✅Chooses platform-appropriate style
segmented✅✅❌Best for 2-5 options
inline✅✅❌
menu✅✅✅Dropdown on most platforms
navigationlink✅❌❌iOS-specific navigation pattern
palette✅❌❌
radiogroup✅✅✅
wheel✅❌❌Classic iOS-style picker