<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](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 />
