Checkbox

Because a checkbox's checked state can either be true, false, or mixed, you can use the type CheckState = | Checked | Unchecked | Mixed in order to determine the checked state.

If you don't need to use mixed, boolean overloads are available.

[<ReactComponent>]
let Checkbox () =
    let isChecked1, setIsChecked1 = React.useState true
    let isChecked2, setIsChecked2 = React.useState Mixed

    Html.div [
        Fui.checkbox [
            checkbox.checked' isChecked1
            checkbox.onChange (fun i -> setIsChecked1 i)
            checkbox.size.large
            checkbox.label (
                Fui.text "This is a label"
            )
            checkbox.indicator (
                Fui.icon.alignStartHorizontalRegular []
            )
            checkbox.shape.circular
            checkbox.labelPosition.before
        ]
        Fui.checkbox [
            checkbox.label "Hello"
            checkbox.checked' isChecked2
            checkbox.onChange (fun ev i -> setIsChecked2 i)
            checkbox.size.medium
            checkbox.labelPosition.after
        ]
    ]