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
    ]

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
    ]

type Radio msg

Opaque composable type representing a Radio.

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 : 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 : Bool -> Option msg

Option to disable the radio

attrs : List (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"
    ]

groupName - Name of the radios, all radios will get the same name
radios - List of radios.

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