2b:null 2c:["$","title",null,{"children":"Chips | Office for Statistics and Data of the Canton of Zurich | Observable"}] 31:T44b,The basic structure of `` element could look like this ```html

Steuererklärung

Handelsregister

Autoindex

```

Steuererklärung

Handelsregister

Autoindex

32:[] 2f:{"id":"1434c7be0862589f","slug":null,"title":"Chips","thumbnail":"041537333e04e5061355d01094a24cff4171f668d83457e0ac613ef621f9acf4","access_level":"public","create_time":"$D2024-07-09T13:02:34.065Z","update_time":"$D2025-10-17T07:57:35.744Z","view_time":null,"first_public_time":"$D2024-07-09T13:02:34.065Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":184,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null}],"members":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b4b9279e515ea00f","slug":"leu-component-library","title":"Leu - Component Library","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Chips","cells":[{"id":0,"value":"# Chips\n- [Storybook](https://statistikzh.github.io/leu/?path=/story/chip-group--default)\n- [GitHub](https://github.com/statistikZH/leu/tree/main/src/components/chip)\n\nThe following elements are used in this notebook. Not all of them are necessary for every case\n- `leu-chip-group`\n- `leu-chip-selectable`\n- `leu-chip-link`\n- `leu-chip-removable`\n\n## leu-chip-group\nThe `leu-chip-group` does three main things.\n1. It aligns all the children (chips) with flexbox.\n2. It exposes a `value` property with a list of all checked `leu-chip-selectable` chips.\n3. Handles `leu-chip-selectable` elements with mode `radio` so that only one of them can be checked at the same time.\n\nYou don't NEED to use `leu-chip-group` if you just want to align chips. You can also do that by yourself.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"## Load custom elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"{\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-chip-group.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-chip-selectable.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-chip-link.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-chip-removable.js`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## Usage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"### Gap Setting\n\nDepending on the context of a chip group, the design system applies different gap sizes. As there is no logic behind different sizes it can simply be overridden by setting the `--leu-chip-group-gap` css custom property.\n\n```html\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"viewof gap = Inputs.range([0, 32], { step: 4, value: 8 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"gap","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"## Selectable chips\n\nThe `` elements are chips that can be selected and are often used as a filter interface. They work similary to radio buttons and checkboxes.\n\n```html\n\n Checkbox-like\n\n\n\n Radio-like\n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"\n Checkbox-like\n\n\n\n Radio-like\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"When using the selectable chips it is important that also the `selection-mode` of the `leu-chip-group` element is set. `leu-chip-group` uses this attribute when it is set to `single` to ensure that only one chip is selected at the same time.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"viewof toggleChips = htl.html`\n ${[\"Option 1\", \"Option 2\", \"Option 3\"].map(\n (o) =>\n htl.html\n .fragment`${o}`\n )}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof radioChips = htl.html`\n ${[\"Sekundarschule\", \"Primarschule\"].map(\n (o) =>\n htl.html\n .fragment`${o}`\n )}\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"All the checked chips can be retrieved from the `value` property of the group element. Observable is doing that automatically everytime a `input` event was dispatched. Because the chips dispatch an input event when they're checked there is nothing else to do.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"toggleChips","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"radioChips","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"## Removable chips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":145,"value":"`` elements don't have any functionality by themselves. So when they're clicked, they don't remove themselves from the DOM. But they dispatch a `leu:remove` event. All other handling has to be done by the application.\n\nIt is good pattern to use them together with a `` element that allows multiple selection. The user have a better overview over the selected items and can easily remove one of them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"viewof removableChips = htl.html`\n ${selectedMunicipalities.map(\n (o) =>\n htl.html\n .fragment`${o}`\n )}\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"mutable selectedMunicipalities = [\"Zürich\", \"Winterhur\", \"Uster\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"{\n function listener(e) {\n mutable selectedMunicipalities = mutable selectedMunicipalities.filter(\n (i) => i !== e.target.textContent // TODO: The chips need a getValue method\n );\n }\n\n viewof removableChips.addEventListener(\"leu:remove\", listener);\n\n invalidation.then(() =>\n viewof removableChips.removeEventListener(\"leu:remove\", listener)\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"---\n## Loading fonts and theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"fonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"theme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { fonts, theme, version } from \"@statistikzh/leu-general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"