Dropdown OptionGroup - sydsutton/FS.FluentUI GitHub Wiki

open FS.FluentUI.V8toV9

[<ReactComponent>]
let DropdownTest() =
    let selected, setSelected = React.useState("Katri Athokas")
    Fui.stack [
        stack.horizontal false
        stack.children [
            Fui.label [
                label.text "Schedule a Meeting"
                label.id "dropdownId"
            ]
            Fui.dropdown [
                dropdown.ariaLabelledBy "dropdownId"
                dropdown.value selected
                dropdown.selectedOptions [|selected|]
                dropdown.onOptionSelect (fun (d: OptionOnSelectData) ->
                    match d.optionText with
                    | Some t ->
                        setSelected t
                    | None -> ()
                )
                dropdown.children [
                    Fui.optionGroup [
                        optionGroup.label "People"
                        optionGroup.children [
                            Fui.option [
                                option.text "Katri Athokas"
                                option.children [
                                    Fui.persona [
                                        persona.avatar [
                                            avatar.color.colorful
                                            avatar.ariaHidden true
                                        ]
                                        persona.name "Katri Athokas"
                                        persona.presence [
                                            presenceBadge.status.available
                                        ]
                                        persona.secondaryText "Available"
                                    ]
                                ]
                            ]
                            Fui.option [
                                option.text "Elvia Atkins"
                                option.children [
                                    Fui.persona [
                                        persona.avatar [
                                            avatar.color.colorful
                                            avatar.ariaHidden true
                                        ]
                                        persona.name "Elvia Atkins"
                                        persona.presence [
                                            presenceBadge.status.busy
                                        ]
                                        persona.secondaryText "Busy"
                                    ]
                                ]
                            ]
                            Fui.option [
                                option.text "Cameron Evans"
                                option.children [
                                    Fui.persona [
                                        persona.avatar [
                                            avatar.color.colorful
                                            avatar.ariaHidden true
                                        ]
                                        persona.name "Cameron Evans"
                                        persona.presence [
                                            presenceBadge.status.away
                                        ]
                                        persona.secondaryText "Away"
                                    ]
                                ]
                            ]
                            Fui.option [
                                option.text "Wanda Howard"
                                option.children [
                                    Fui.persona [
                                        persona.avatar [
                                            avatar.color.colorful
                                            avatar.ariaHidden true
                                        ]
                                        persona.name "Wanda Howard"
                                        persona.presence [
                                            presenceBadge.status.outOfOffice
                                        ]
                                        persona.secondaryText "Out of Office"
                                    ]
                                ]
                            ]
                        ]
                    ]
                ]
            ]
        ]
    ]