Accessible and uniform-styled implementation of a radio buttons.
Radio.group
{ label = "Pick a favorite animal:"
, onSelectMsg = Msg.SelectRadio
, idPrefix = "radio-animal"
}
|> Radio.withSelected (Just Model.Felines)
|> Radio.withButtons
[ Radio.button Model.Felines "Felines"
, Radio.button Model.Canines "Canines"
, Radio.button Model.Birds "Birds"
]
|> Radio.renderElement renderConfig
The RadioGroup option msg
type is used for describing the component for later rendering.
The RadioButton option
describes an individual radio-button
group : { label : String, onSelectMsg : String -> option -> msg, idPrefix : String } -> RadioGroup option msg
Starts an empty radio group.
someRadioGroup =
Radio.group
{ label = "Pick a card"
, onSelectMsg = Msg.CardPicking
, idPrefix = "card" -- Will result in "card-king-spades"
}
button : option -> String -> RadioButton option
A radio button and an element of a radio group.
Radio.button Model.OrangeJuice "Orange Juice"
withButtons : List (RadioButton option) -> RadioGroup option msg -> RadioGroup option msg
Replaces a group's list of radio buttons.
Radio.withButtons
[ Radio.button Model.OrangeJuice "Orange Juice"
, Radio.button Model.Lemonade "Lemonade"
, Radio.button Model.SodaSoftDrink "Soda"
]
someRadioGroup
withSelected : Maybe option -> RadioGroup option msg -> RadioGroup option msg
Define one element as selected.
Radio.withSelected (Just Model.DoubleCheddar)
Describes a compatible width.
withWidth : RadioWidth -> RadioGroup option msg -> RadioGroup option msg
Radio.withWidth
changes the width of the group.
Radio.withWidth Radio.widthFull someRadioGroup
widthFull : RadioWidth
All the radio buttons' width will fill the container.
widthRelative : RadioWidth
The buttons will have the exact width to fit its contents.
NOTE: This is the default value.
Describes the direction in which the radio group will be rendered.
horizontal : Direction
When displaying, arrange the buttons in horizontal lines.
vertical : Direction
When displaying, arrange the buttons in a column.
withDirection : Direction -> RadioGroup option msg -> RadioGroup option msg
Radio.withDirection
determines whether the radio group's items are arranged horizontally or vertically.
Radio.withDirection Radio.horizontal someRadioGroup
Describes the size of the radio buttons
sizeSmall : RadioSize
Small radio buttons (default value)
sizeMedium : RadioSize
Medium radio buttons
withSize : RadioSize -> RadioGroup option msg -> RadioGroup option msg
Radio.withSize
changes the size of the radio buttons
Radio.withSize Radio.sizeMedium someRadioGroup
renderElement : UI.RenderConfig.RenderConfig -> RadioGroup option msg -> Element msg
End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.