rundis / elm-bootstrap / Bootstrap.Form.Radio

This module allows you to create Bootstrap styled radios.

Creating

radio : List (Option msg) -> String -> Html msg

Create a single radio input.

Radio.radio
    [ Radio.id "myRadio"
    , Radio.checked True
    , Radio.onClick MyRadioMsg
    ]
    "My radio"

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

Create a single radio input with customized Bootstrap styling.

Radio.custom
    [ Radio.id "myCustomRadio"
    , Radio.checked True
    , Radio.onClick MyRadioMsg
    ]
    "My custom radio"

advancedRadio : List (Option msg) -> Label msg -> Html msg

Create a radio element with customized label

Radio.advancedRadio
    [ Radio.id "myChk"
    , Radio.checked True
    , Radio.onCheck MyRadioMsg
    ]
    (Radio.label [ class "mylabelclass" ] [ text "Hello" ])

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

Create a radio element with customized label

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

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

Create a label for a radio when using advancedRadio or advancedCustom

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


type Label msg

Opaque type representing a Radio label.

Options

id : String -> Option msg

Set the id for the radio. 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 radio checked property on off.

name : String -> Option msg

Option to set the name of a radio.

A single radio doesn't make much sense, typically you would have several. To automatically unselect one radio, when selecting another you need to have the same name for each radio in a group.

inline : Option msg

Use this option to display radios inline.

onClick : msg -> Option msg

Shorthand for assigning an onClick handler for a radio.

disabled : Basics.Bool -> Option msg

Option to disable the radio

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

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


type Option msg

Opaque type representing valid customization options for a radio

Validation

success : Option msg

Option to color a radio with success.

danger : Option msg

Option to color a radio with danger.

Composing

radioList : String -> List (Radio msg) -> List (Html msg)

In most cases you would probably create multiple radios as a group. This function is a convenient helper to create a list of radios

-- You might have defined a single message for all your radios like this
type Msg
    = MyRadioMsg MyRadio Bool

type MyRadio
    = Radio1
    | Radio2
    | Radio3


-- In some view function your could create a radio list as follows

Radio.radioList "myradios"
    [ Radio.create
        [ Radio.id "myRadio1", Radio.onCheck (MyRadioMsg MyRadio1) ]
        "Radio 1"
    , Radio.create
        [ Radio.id "myRadio2", Radio.onCheck (MyRadioMsg MyRadio2) ]
        "Radio 2"
    , Radio.create
        [ Radio.id "myRadio3", Radio.onCheck (MyRadioMsg MyRadio3) ]
        "Radio 3"
    ]

create : List (Option msg) -> String -> Radio msg

Create a composable radio for use in a radioList

createCustom : List (Option msg) -> String -> Radio msg

Create a composable custom radio for use in a radioList

createAdvanced : List (Option msg) -> Label msg -> Radio msg

Create a composable radio with customized label for use in a radioList

createCustomAdvanced : List (Option msg) -> Label msg -> Radio msg

Create a composable custom radio with customized label for use in a radioList


type Radio msg

Opaque composable type representing a Radio.