The RadioGroup option msg type is used for describing the component for later rendering.

The RadioButton option describes an individual radio-button

Starts an empty radio group.

someRadioGroup =
    Radio.group
        { label = "Pick a card"
        , onSelectMsg = Msg.CardPicking
        , idPrefix = "card" -- Will result in "card-king-spades"
        }

A 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"
    ]
    someRadioGroup

Define 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 someRadioGroup

All 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.

When displaying, arrange the buttons in a column.

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

Small radio buttons (default value)

Medium radio buttons

Radio.withSize changes the size of the radio buttons

Radio.withSize Radio.sizeMedium someRadioGroup

End of the builder's life. The result of this function is a ready-to-insert Elm UI's Element.