PaackEng / paack-ui / UI.Radio

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

Types


type RadioGroup option msg

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


type RadioButton option

The RadioButton option describes an individual radio-button

Constructors

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"

Group management

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)

Width


type RadioWidth

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.

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

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

Rendering

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.