A radio button with its label, description and error message.

Mirrors Radio from @digdir/designsystemet-react.

Radio buttons come in groups, so put them in a Fieldset whose legend asks the question:

Fieldset.new [ Html.text "Hvordan vil du bli kontaktet?" ]
    |> Fieldset.withError model.contactError
    |> Fieldset.view []
        (List.map (contactOption model.contact) [ Email, Phone ])


contactOption : Maybe Contact -> Contact -> Html Msg
contactOption selected contact =
    Radio.new (Ds.label (Contact.toLabel contact))
        |> Radio.view
            [ Attr.name "contact"
            , Attr.checked (selected == Just contact)
            , Events.onCheck (\_ -> PickedContact contact)
            ]

An error on the fieldset is linked to every radio in it, so the radios usually don't need withError.

The attributes you give view go on the <input type="radio" />, like React's rest props. Attributes for the field around it go in withFieldAttributes.

React → Elm

• <Radio label="…" /> → Radio.new (Ds.label "…") |> Radio.view []
• aria-label="…" → Radio.new (Ds.ariaLabel "…")
• description={…} → Radio.withDescription [ … ]
• error="…" → Radio.withError (Just "…")
• variant="outline" → Radio.withFieldAttributes [ Field.outline ]
• position="end" → Radio.withFieldAttributes [ Field.position Field.End ]
• data-size, className, style → Radio.withFieldAttributes [ … ]
• name, checked, onChange, … → Radio.view [ Attr.name …, Attr.checked …, … ]

Options