Radio RadioGroup

open FS.FluentUI.V8toV9

[<ReactComponent>]
let RadioGroupTest() =
    let value, setValue = React.useState "banana"
    let labelId = Fui.useId(Some "label-", None)
    Fui.stack [
        stack.horizontal false
        stack.children [
            Fui.label [
                label.text "Favorite Fruit"
                label.id labelId
                label.required true
            ]
            Fui.radioGroup [
                radioGroup.value value
                radioGroup.ariaLabelledBy labelId
                radioGroup.onChange (fun (_: Event) (d: ValueProp<string>) -> setValue d.value)
                radioGroup.layout.horizontalStacked
                radioGroup.required true
                radioGroup.children [
                    Fui.radio [
                        radio.value "apple"
                        radio.label "Apple"
                    ]
                    Fui.radio [
                        radio.value "pear"
                        radio.label "Pear"
                    ]
                    Fui.radio [
                        radio.value "banana"
                        radio.label "Banana"
                    ]
                    Fui.radio [
                        radio.value "orange"
                        radio.label "Orange"
                    ]
                ]
            ]
            Fui.text [
                text.style [ style.width 200 ]
                text.text $"Favorite fruit: {value}"
            ]
        ]
    ]