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 renderConfigThe RadioButton option describes an individual radiobutton
Starts an empty radio group. The first argument is the label used for accessibility. The second is the message triggered when there is a selection.
someRadioGroup =
Radio.group "Pick a card" Msg.CardPickingA radio button and an element of a radio group.
Radio.button Model.OrangeJuice "Orange Juice"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"
]
someRadioGroupDefine one element as selected.
Radio.withSelected (Just Model.DoubleCheddar)Describes a compatible width.
Radio.withWidth changes the width of the group.
Radio.withWidth Radio.widthFull someRadioGroupAll the radio buttons' width will fill the container.
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.
When displaying, arrange the buttons in horizontal lines.
Radio.withDirection determines whether the radio group's items are arranged horizontally or vertically.
Radio.withDirection Radio.horizontal someRadioGroupDescribes the size of the radio buttons
Radio.withSize changes the size of the radio buttons
Radio.withSize Radio.sizeMD someRadioGroupEnd of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.
The
RadioGroup option msgtype is used for describing the component for later rendering.