Select

open FS.FluentUI.V8toV9

let SelectTest() =
    let selectId = Fui.useId(None, None)
    let value, setValue = React.useState("Red")
    Fui.stack [
        stack.horizontal false
        stack.tokens [ stack.tokens.childrenGap 16 ]
        stack.children [
            Fui.label [
                label.htmlFor selectId
                label.text "Color"
            ]
            Fui.select [
                select.id selectId
                select.value value
                select.size.large
                select.appearance.filledDarker
                select.icon (Fui.icon.arrowUpFilled [])
                select.onChange (fun (d: ValueProp<string>) -> setValue d.value)
                select.children [
                    Html.option "Red"
                    Html.option "Green"
                    Html.option "Blue"
                ]
            ]
            Fui.button [
                button.text "Select 'blue'"
                button.onClick (fun _ -> setValue "Blue")
            ]
        ]
    ]