Designsystemet for Elm: the components of
@digdir/designsystemet-react,
as plain Elm view functions.
The markup matches the React components. Styling comes from
@digdir/designsystemet-css plus your theme. Behaviour (tabs, popovers, dialog
invokers, field wiring, tooltips) comes from @digdir/designsystemet-web,
loaded by the npm package @ensolabs/designsystemet-elm. Import both once in
your JavaScript entry point:
import "@digdir/designsystemet-css";
import "@digdir/designsystemet-css/theme"; // or your own generated theme
import "@ensolabs/designsystemet-elm";Most modules are imported qualified by their short name:
import Designsystemet as Ds
import Designsystemet.Button as Button
import Designsystemet.Color as Color
Button.view [ Ds.color Color.danger, Events.onClick Delete ] [ Html.text "Slett" ]data-size and data-color apply to the element and every Designsystemet
component inside it, so you can set them on a single component or on a div
around a whole form.
Set data-size on an element.
Html.form [ Ds.size Size.sm ] [{- every field in here is small -}]Set data-color on an element.
Html.section [ Ds.color Color.neutral ] [{- buttons, tags, ... -}]Light, dark, or whatever the user's system prefers.
Set data-color-scheme on an element, typically the root of your app.
How a form control gets its accessible name.
React accepts exactly one of label, aria-label and aria-labelledby.
Here a control with no name, or two, does not compile.
Opaque (the docs show the internal module it lives in). Build one with label, labelHtml, ariaLabel
or labelledBy.
A visible text label.
A visible label with markup in it.
An invisible label, read by screen readers only.
The id of another element on the page that names the control.
A plain String rather than a typed id like Dialog.Id, because the target
is usually not rendered by this package.
The version of this port,
"1.23.0".This is the
@digdir/designsystemet-reactversion it mirrors, and the-cssand-webversions it expects at runtime. Fixes to the port alone add a suffix:"1.23.0-1","1.23.0-2".The npm package
@ensolabs/designsystemet-elmshares this version. The Elm package has its own, since the registry only accepts plain semver.