mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-21 12:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(checkbox): demo two-way binding in bind:group example

Browse source
This commit is contained in:
Eric Liu 2022-01-27 07:14:05 -08:00
commit 3a75244e34
1 changed files with 9 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

16
docs/src/pages/framed/Checkbox/MultipleCheckboxes.svelte
View file

@ -1,15 +1,17 @@
<script>
import { Checkbox } from "carbon-components-svelte";
import { Checkbox, Button } from "carbon-components-svelte";
let options = ["Apple", "Banana", "Coconut"];
let selection = options.slice(0, 2);
let values = ["Apple", "Banana", "Coconut"];
let group = values.slice(0, 2);
</script>
{#each options as option}
<Checkbox bind:group="{selection}" labelText="{option}" value="{option}" />
{#each values as value}
<Checkbox bind:group labelText="{value}" value="{value}" />
{/each}
<div style="margin: var(--cds-layout-01) 0">
Selected options:
<strong>{selection.join(", ")}</strong>
<Button on:click="{() => (group = ['Banana'])}">Set to ["Banana"]</Button>
</div>
<strong>Selected:</strong>
{JSON.stringify(group)}