Skip to main content
Picker<V extends Hashable = string>(
    label: string,
    selection: Binding<V>,
    children: Component[]
): Component;
​
label
string
required
The label text for the picker.
​
selection
Binding<V>
required
A binding to the selected value, provided as a [value, setValue] tuple. The value type must be string or number.
​
children
Component[]
required
An array of picker options. Each child should have a .tag() modifier to identify its value.

​
Support

​
Usage

​
Basic picker

const body = () => {
    const [color, setColor] = useState("red")
    return Picker("Color", [color, setColor], [
        Text("Red").tag("red"),
        Text("Green").tag("green"),
        Text("Blue").tag("blue")
    ])
}

​
Segmented picker

const body = () => {
    const [size, setSize] = useState("m")
    return Picker("Size", [size, setSize], [
        Text("S").tag("s"),
        Text("M").tag("m"),
        Text("L").tag("l"),
        Text("XL").tag("xl")
    ])
        .pickerStyle("segmented")
}

​
Picker in a form

const body = () => {
    const [country, setCountry] = useState("us")
    const [language, setLanguage] = useState("en")
    return VStack({ spacing: 16 }, [
        Picker("Country", [country, setCountry], [
            Text("United States").tag("us"),
            Text("Canada").tag("ca"),
            Text("United Kingdom").tag("uk")
        ]),
        Picker("Language", [language, setLanguage], [
            Text("English").tag("en"),
            Text("French").tag("fr"),
            Text("Spanish").tag("es")
        ])
    ])
}

​
With ForEach

const body = () => {
    const options = ["Option 1", "Option 2", "Option 3"]
    const [selected, setSelected] = useState(options[0])
    return Picker("Choose", [selected, setSelected], [
        ForEach(options, (option) =>
            Text(option).tag(option)
        )
    ])
}

​
Notes

  • Each child must have a .tag() value matching the type of the selection binding.
  • Style the picker with .pickerStyle() using values like "menu", "segmented", "wheel", or "inline". See PickerStyle.

​
See Also