Skip to main content
Picker<V extends Hashable = string>(label: string, selection: Binding<V>, children: Component[]): Component;

​
Parameters

​
label
string
The label text for the picker.
​
selection
Binding<V>
A binding to the currently selected value. The binding is a tuple of [value, setValue].
​
children
Component[]
An array of picker option components.

​
Support

​
Usage

​
Basic picker

const [selectedColor, setSelectedColor] = useState("red");

Picker("Color", [selectedColor, setSelectedColor], [
    Text("Red").tag("red"),
    Text("Green").tag("green"),
    Text("Blue").tag("blue")
])

​
Picker with custom options

const [selectedSize, setSelectedSize] = useState("medium");

Picker("Size", [selectedSize, setSelectedSize], [
    Text("Small").tag("small"),
    Text("Medium").tag("medium"),
    Text("Large").tag("large"),
    Text("Extra Large").tag("xl")
])

​
Picker in a form

const [country, setCountry] = useState("us");
const [language, setLanguage] = useState("en");

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")
    ])
])

​
Picker with ForEach

const options = ["Option 1", "Option 2", "Option 3"];
const [selected, setSelected] = useState(options[0]);

Picker("Choose", [selected, setSelected], [
    ForEach(options, (option) => 
        Text(option).tag(option)
    )
])