Radio button group

Get the code

import Css
import Css.Global
import Html.Styled as Html exposing (Html)
import Html.Styled.Attributes as Html


radioButtonGroup : Html msg
radioButtonGroup =
    Html.div
        [ Html.css
            [ Css.displayFlex
            , Css.border3 (Css.px 1) Css.solid (Css.hex "efefef")
            , Css.borderRadius <| Css.px 4
            , Css.Global.descendants
                [ Css.Global.selector ".radio-button:not(:last-of-type)"
                    [ Css.borderRight3 (Css.px 1) Css.solid (Css.hex "efefef") ]
                ]
            ]
        ]
        [ Html.div
            [ Html.css
                [ Css.displayFlex
                , Css.flex <| Css.int 1
                ]
            , Html.class "radio-button"
            ]
            [ Html.input
                [ Html.type_ "radio"
                , Html.id "myCustomRadio"
                , Html.css
                    [ Css.display Css.none
                    , Css.checked
                        [ Css.Global.generalSiblings
                            [ Css.Global.selector ".radio-button__label"
                                [ Css.backgroundColor <| Css.hex "88c0d0" ]
                            ]
                        ]
                    ]
                ]
                []
            , Html.label
                [ Html.class "radio-button__label"
                , Html.for "myCustomRadioid"
                , Html.css
                    [ Css.displayFlex
                    , Css.alignItems Css.center
                    , Css.justifyContent Css.center
                    , Css.padding <| Css.rem 0.8
                    , Css.cursor Css.pointer
                    ]
                ]
                [ Placeholders.Rectangle.view rectangle ]
            ]
        , -- more radio buttons
        ]