Elm でラジオボタン：label [] [ input [ type_ "radio", name "グループ名", onClick Msg ] [], text "ボタン名" ]

いい感じのサンプルを見付けられなかったのでメモ。

動くサンプル：https://ellie-app.com/6f6G6jwbddda1

手抜き版

input の属性に value を指定するのをサボりたいときはこっち。

ラジオボタンのサンプル

import Html exposing (..)
import Html.Attributes as Attrs
import Html.Events as Events

type Msg = ...

radioButton1 : String -> Msg -> String -> Html Msg
radioButton1 groupName msg_ buttonName =
    label []
        [ input
            [ Attrs.type_ "radio"
            , Attrs.name groupName
            , Events.onClick msg_
            ]
            []
        , text buttonName
        ]

ちょっと真面目版

input の属性にちゃんと value を指定するときはこっち。

import Html exposing (..)
import Html.Attributes as Attrs
import Html.Events as Events

type Msg = ...

radioButton2 : String -> (String -> Msg) -> String -> String -> Html Msg
radioButton2 groupName toMsg value_ buttonName =
    label []
        [ input
            [ Attrs.type_ "radio"
            , Attrs.name groupName
            , Attrs.value value_
            , Events.onInput toMsg 
            ]
            []
        , text buttonName
        ]

参考

• HTMLクイックリファレンス - <LABEL>