mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 03:26:36 +00:00
46 lines
1.1 KiB
Text
46 lines
1.1 KiB
Text
<script>
|
|
import { Checkbox, InlineNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
### Default (unchecked)
|
|
|
|
<Checkbox labelText="Label text" />
|
|
|
|
### Checked
|
|
|
|
<Checkbox labelText="Label text" checked />
|
|
|
|
### Indeterminate
|
|
|
|
<Checkbox labelText="Label text" indeterminate />
|
|
|
|
### Hidden label
|
|
|
|
<Checkbox labelText="Label text" hideLabel />
|
|
|
|
### Disabled
|
|
|
|
<Checkbox labelText="Label text" disabled />
|
|
|
|
### Reactive example (bind:checked)
|
|
|
|
The `checked` prop supports two-way binding.
|
|
|
|
<FileSource src="/framed/Checkbox/CheckboxReactive" />
|
|
|
|
### Reactive example (bind:group)
|
|
|
|
An alternative to `checked` is binding an array of values using `group`. This API in inspired by Svelte [group inputs]([group](https://svelte.dev/tutorial/group-inputs)).
|
|
|
|
<InlineNotification svx-ignore lowContrast title="Note:" kind="info" hideCloseButton>
|
|
<div class="body-short-01">
|
|
If using <strong>bind:group</strong>, <strong>bind:checked</strong> will only support one-way binding.
|
|
</div>
|
|
</InlineNotification>
|
|
|
|
<FileSource src="/framed/Checkbox/MultipleCheckboxes" />
|
|
|
|
### Skeleton
|
|
|
|
<Checkbox skeleton />
|