mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 03:49:34 +00:00
76 lines
1.9 KiB
Text
76 lines
1.9 KiB
Text
<script>
|
|
import { Checkbox, InlineNotification } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
import Playground from "../../components/playground/Playground.svelte";
|
|
</script>
|
|
|
|
<Playground
|
|
component={Checkbox}
|
|
props={{
|
|
labelText: {
|
|
component: "TextInput",
|
|
props: { value: "Label text", labelText: "Label" }
|
|
},
|
|
checked: {
|
|
component: "Checkbox",
|
|
props: { labelText: "Checked" }
|
|
},
|
|
indeterminate: {
|
|
component: "Checkbox",
|
|
props: { labelText: "Indeterminate" }
|
|
},
|
|
hideLabel: {
|
|
component: "Checkbox",
|
|
props: { labelText: "Hide label" }
|
|
},
|
|
disabled: {
|
|
component: "Checkbox",
|
|
props: { labelText: "Disabled" }
|
|
},
|
|
skeleton: {
|
|
component: "Checkbox",
|
|
props: { labelText: "Skeleton" }
|
|
},
|
|
}} />
|
|
|
|
### 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](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 />
|