Small, rounded buttons for filters and choices.
Mirrors Chip from @digdir/designsystemet-react.
Html.div []
[ Chip.checkbox { name = "status", value = "open", checked = model.showOpen, onCheck = ShowOpenChecked }
[]
[ Html.text "Åpne saker" ]
, Chip.checkbox { name = "owner", value = "me", checked = model.showMine, onCheck = ShowMineChecked }
[]
[ Html.text "Mine saker" ]
]
Html.div []
(List.map
(\tag ->
Chip.removable { removeLabel = "Trykk for å fjerne" }
[ Events.onClick (TagRemoved tag) ]
[ Html.text tag ]
)
model.tags
)<Chip.Button> → Chip.button []<Chip.Removable> → Chip.removable { removeLabel = "Trykk for å fjerne" } []<Chip.Checkbox checked onChange> → Chip.checkbox { name, value, checked, onCheck } []<Chip.Radio name checked onChange> → Chip.radio { name, value, checked, onSelect } []<Chip.Checkbox name value defaultChecked> → Chip.uncontrolledCheckbox { name, value, initiallyChecked = True } []<Chip.Radio name value defaultChecked> → Chip.uncontrolledRadio { name, value, initiallyChecked = True } []data-wrap="wrap" → Chip.wrapChip.removable takes the text screen readers hear for removing the chip.
React relies on a CSS default (Norwegian, or English for other languages).
Here you pass it, and it becomes the --dsc-chip-removable-label custom
property.name and value, so they work in a
submitted form. React leaves them optional.Chip.checkbox and Chip.radio, attributes go on the <label> so
Ds.color and Chip.wrap work. React puts them on the <input />.A chip with an "×", for removing an active filter or a tag. Handle the
click yourself. removeLabel is what screen readers hear after the chip's
text, like "Trykk for å fjerne".
Chip.removable { removeLabel = "Trykk for å fjerne" }
[ Events.onClick (FilterRemoved filter) ]
[ Html.text (Filter.toString filter) ]The label is set through the chip's style attribute, so use classes rather
than Attr.style on a removable chip.
Your model decides whether the chip is checked. Clicking sends a message.
A checkbox chip, usually one of several filters. Clicking sends onCheck
with the requested state.
name and value are what a plain <form> submits when the chip is checked.
A radio chip, for picking one of several. Give the chips in a group the
same name; value is what a plain <form> submits for the
checked one. Clicking an unchecked chip sends onSelect.
Html.div []
[ Chip.radio { name = "language", value = "nb", checked = model.language == Bokmal, onSelect = LanguageSelected Bokmal }
[]
[ Html.text "Bokmål" ]
, Chip.radio { name = "language", value = "nn", checked = model.language == Nynorsk, onSelect = LanguageSelected Nynorsk }
[]
[ Html.text "Nynorsk" ]
]The browser tracks the checked state. Use these in a plain submitted <form>,
such as a search filter that becomes the query string.
A checkbox chip whose state the browser tracks. initiallyChecked is the
state on first render.
Html.form [ Attr.action "/saker", Attr.method "get" ]
[ Chip.uncontrolledCheckbox { name = "status", value = "open", initiallyChecked = True }
[]
[ Html.text "Åpne saker" ]
, Chip.uncontrolledCheckbox { name = "status", value = "closed", initiallyChecked = False }
[]
[ Html.text "Lukkede saker" ]
]A radio chip whose state the browser tracks. Give the chips in a group the
same name, and initiallyChecked = True to at most one.
Wrap long text instead of truncating it with "…".
A
<button class="ds-chip" type="button">, for an action.