frandibar / elm-bootstrap / Bootstrap.Form.Checkbox

This module allows you to create Bootstrap styled checkboxes.

Creating

checkbox : List (Option msg) -> String -> Html.Styled.Html msg

Create a checkbox element

Checkbox.checkbox
    [ Checkbox.id "myChk"
    , Checkbox.checked True
    , Checkbox.onCheck MyCheckMsg
    ]
    "My checkbox"

custom : List (Option msg) -> String -> Html.Styled.Html msg

Create a composable Bootstrap custom styled checkbox

Checkbox.custom
    [ Checkbox.id "myCustomChk"
    , Checkbox.checked True
    , Checkbox.onCheck MyCheckMsg
    ]
    "My Custom Checkbox"

label : List (Html.Styled.Attribute msg) -> List (Html.Styled.Html msg) -> Label msg

Create a label for a checkbox when using advancedCheckbox or advancedCustom

Checkbox.label [ style "font-size" "24px" ] [ div [ class "disclaimer" ] [ text "My disclaimer" ] ]

advancedCheckbox : List (Option msg) -> Label msg -> Html.Styled.Html msg

Create a checkbox element with customized label

Checkbox.advancedCheckbox
    [ Checkbox.id "myChk"
    , Checkbox.checked True
    , Checkbox.onCheck MyCheckMsg
    ]
    (Checkbox.label [ class "mylabelclass" ] [ text "Hello" ])

advancedCustom : List (Option msg) -> Label msg -> Html.Styled.Html msg

Create a custom bootstrap styled checkbox element with customized label

Checkbox.advancedCustom
    [ Checkbox.id "myChk"
    , Checkbox.checked True
    , Checkbox.onCheck MyCheckMsg
    ]
    (Checkbox.label [ class "mylabelclass" ] [ text "Hello" ])


type Label msg

Opaque type representing a Checkbox label.

Options

id : String -> Option msg

Set the id for the checkbox. Will automatically set the for attribute for the label

NOTE: You have to use this for custom checkboxes.

checked : Basics.Bool -> Option msg

Option to toggle the checkbox checked property on off.

inline : Option msg

Use this option to display checkboxes inline.

indeterminate : Option msg

Option to set the indeterminate property of a checkbox

Note: A checkbox can't be both indeterminate and checked, so if you set both the last one provided in the list of options to the checkbox function "wins".

disabled : Basics.Bool -> Option msg

Option to disable the checkbox

onCheck : (Basics.Bool -> msg) -> Option msg

Shorthand for assigning an onCheck handler for a checkbox.

attrs : List (Html.Styled.Attribute msg) -> Option msg

Use this function to handle any Html.Attribute option you wish for your select

success : Option msg

Option to color a checkbox with success.

danger : Option msg

Option to color a checkbox with danger.


type Option msg

Opaque type representing valid customization options for a checkbox