A checkbox with its label, description and error message.
Mirrors Checkbox from @digdir/designsystemet-react.
Checkbox.new (Ds.label "Jeg har lest vilkårene")
|> Checkbox.withError model.termsError
|> Checkbox.view [ Attr.checked model.acceptedTerms, Events.onCheck AcceptedTerms ]The attributes you give view go on the <input type="checkbox" />, like
React's rest props. Attributes for the field around it (size, outline, position)
go in withFieldAttributes.
For a group of checkboxes, put them in a Fieldset
with a legend.
For a "select all" checkbox, add
Input.indeterminate to the attributes.
<Checkbox label="…" /> → Checkbox.new (Ds.label "…") |> Checkbox.view []aria-label="…" → Checkbox.new (Ds.ariaLabel "…")description={…} → Checkbox.withDescription [ … ]error="…" → Checkbox.withError (Just "…")variant="outline" → Checkbox.withFieldAttributes [ Field.outline ]position="end" → Checkbox.withFieldAttributes [ Field.position Field.End ]data-size, className, style → Checkbox.withFieldAttributes [ … ]checked, value, onChange, … → Checkbox.view [ Attr.checked …, Events.onCheck … ]data-indeterminate → Checkbox.view [ Input.indeterminate ]The wrapper is a Field: <ds-field> connects the
label, description and error to the checkbox, so don't set id-based ARIA
yourself.
A checkbox with this accessible name. With
Ds.label the label is shown next to the box.
Help text under the label.
An error message under the checkbox, or Nothing for none. Pass your
validation result in:
|> Checkbox.withError (Dict.get "terms" model.errors)The checkbox gets aria-invalid="true" while there is an error. With an
ErrorSummary, read the message from the same
list with ErrorSummary.messageFor.
Attributes for the <ds-field> around the checkbox: Field.outline,
Field.position, Ds.size, a class, …
A checkbox being configured. Start with
new, end withview.