UI.Radio

Accessible and uniform-styled implementation of a radio buttons.

Radio.group
    "Pick a favorite animal:"
    Msg.SelectRadio
    |> 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

Types

type RadioGroup id msg

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

type RadioButton id

The RadioButton id describes an individual radiobutton

Constructors

group : String -> (id -> msg) -> RadioGroup id msg

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

button : id -> String -> RadioButton id

A radio button and an element of a radio group.

Radio.button Model.OrangeJuice "Orange Juice"

Group management

withButtons : List (RadioButton id) -> RadioGroup id msg -> RadioGroup id 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 id -> RadioGroup id msg -> RadioGroup id msg

Define one element as selected.

Radio.withSelected (Just Model.DoubleCheddar)

Width

type RadioWidth

Describes a compatible width.

withWidth : RadioWidth -> RadioGroup id msg -> RadioGroup id 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.

Direction

type Direction

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 id msg -> RadioGroup id msg

Radio.withDirection determines whether the radio group's items are arranged horizontally or vertically.

Radio.withDirection Radio.horizontal someRadioGroup

Size

type RadioSize

Describes the size of the radio buttons

sizeSM : RadioSize

Small radio buttons (default value)

sizeMD : RadioSize

Medium radio buttons

withSize : RadioSize -> RadioGroup id msg -> RadioGroup id msg

Radio.withSize changes the size of the radio buttons

Radio.withSize Radio.sizeMD someRadioGroup

Rendering

renderElement : RenderConfig -> RadioGroup id msg -> Element msg

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

PaackEng/paack-ui/3.6.0