Related fields under one legend, such as radio buttons for one question or the parts of an address.
Mirrors Fieldset from @digdir/designsystemet-react.
Fieldset.new [ Html.text "Hvor vil du hente pakken?" ]
|> Fieldset.withDescription [ Html.text "Du får en SMS når den er klar" ]
|> Fieldset.withError model.pickupError
|> Fieldset.view [] (List.map (pickupOption model.pickup) [ PickupPoint, HomeDelivery ])
pickupOption : Maybe Pickup -> Pickup -> Html Msg
pickupOption selected pickup =
Radio.new (Ds.label (Pickup.toLabel pickup))
|> Radio.view
[ Attr.name "pickup"
, Attr.checked (selected == Just pickup)
, Events.onCheck (\_ -> PickedPickup pickup)
]The legend names the group, so it is required.
The error is a ValidationMessage last
in the group. Every Field inside links it to its
input and is marked invalid while it is there. React has no error prop; you
add the message as a child, which is what this does.
<Fieldset> + <Fieldset.Legend>… → Fieldset.new [ … ] |> Fieldset.view [] [ … ]<Fieldset.Description>… → Fieldset.withDescription [ … ]<ValidationMessage> as the last child → Fieldset.withError (Just "…")<Fieldset.Legend className="…"> → Fieldset.withLegendAttributes [ Attr.class "…" ]aria-labelledby on the <fieldset>, pointing at the legend and the
descriptionid on the legend and the descriptionA <fieldset class="ds-fieldset">. The attributes go on the
<fieldset>.
Help text under the legend, read when the user enters the group.
An error for the whole group, like "Velg ett alternativ", or Nothing.
Attributes for the <legend>. To hide it visually but keep it for screen
readers, use ds-sr-only:
Fieldset.new [ Html.text "Tekst for skjermleser" ]
|> Fieldset.withLegendAttributes [ Attr.class "ds-sr-only" ]
A fieldset being configured. Start with
new, end withview.