An on/off switch for a setting that takes effect right away.
Mirrors Switch from @digdir/designsystemet-react.
Switch.new (Ds.label "Mørk modus")
|> Switch.view [ Attr.checked model.darkMode, Events.onCheck ToggledDarkMode ]It's an <input type="checkbox" role="switch" />, so Events.onCheck and
Attr.checked work as for a checkbox. Use a Checkbox
when the choice only counts once a form is submitted.
The attributes you give view go on the <input />, like React's rest props.
Attributes for the field around it go in
withFieldAttributes.
<Switch label="…" /> → Switch.new (Ds.label "…") |> Switch.view []aria-label="…" → Switch.new (Ds.ariaLabel "…")description={…} → Switch.withDescription [ … ]variant="outline" → Switch.withFieldAttributes [ Field.outline ]position="end" → Switch.withFieldAttributes [ Field.position Field.End ]data-size, className, style → Switch.withFieldAttributes [ … ]checked, onChange, … → Switch.view [ Attr.checked …, Events.onCheck … ]As in React, a switch has no error message, since a setting that applies immediately can't be wrong.
A switch with this accessible name. With
Ds.label the label is shown next to it.
Render the switch. The attributes go on the <input />.
Help text under the label.
Attributes for the <ds-field> around the switch: Field.outline,
Field.position, Ds.size, a class, …
A switch being configured. Start with
new, end withview.