This module allows you to create Bootstrap styled radios.
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" ] ]
Opaque type representing a Radio label.
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
Opaque type representing valid customization options for a radio
success : Option msg
Option to color a radio with success.
danger : Option msg
Option to color a radio with danger.
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 nameradios
- 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
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
Opaque composable type representing a Radio.