# Checkbox

A checkbox component for selecting a boolean value.

![Checkbox](/_astro/Checkbox.CBKK8oY3_1ichrN.webp)

## Props

| Prop          | Type      | Description                                                                             |
| ------------- | --------- | --------------------------------------------------------------------------------------- |
| `id`          | `string`  | ID, generates automatically if nothing is passed. **Default:** `generateId()`           |
| `label`       | `string`  | Label for the checkbox. **Default:** `undefined`                                        |
| `description` | `string`  | Description for the input field, displayed below the checkbox. **Default:** `undefined` |
| `name`        | `string`  | Name attribute for the checkbox. **Default:** `undefined`                               |
| `disabled`    | `boolean` | Disable the checkbox. **Default:** `false`                                              |
| `checked`     | `boolean` | Whether the checkbox is checked by default. **Default:** `false`                        |
| `show`        | `boolean` | Show and hide the component without re-rendering. **Default:** `true`                   |
| `value`       | `any`     | Value associated with the checkbox. **Default:** `undefined`                            |

## Default value

Use the `checked` attribute if the checkbox should be checked as default.

```svelte
<Checkbox name="checkbox" label="Checkbox" checked />
```

## Examples

```svelte
<script>
  import { Panel, Checkbox } from '@soleil-se/config-svelte';
</script>


<Panel heading="Inställningar">
  <Checkbox name="checkbox" label="Checkbox" />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the standard way is enough for 99% of use cases.

```svelte
<script>
  import { Panel, Checkbox } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';


  let { values } = $props();


  values = {
    checkbox: false,
    ...values,
  };


  onSave(() => values);
</script>


<Panel heading="Inställningar">
  <Checkbox bind:value={values.checkbox} label="Checkbox" />
</Panel>
```

## Slots

### Default

Default slot after checkbox.

```svelte
<Checkbox name="checkbox" label="Checkbox" >
  <p>Some content</p>
</Checkbox>
```

### Label

* Svelte 5

  ```svelte
  <Checkbox name="checkbox" >
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </Checkbox>
  ```

* Svelte 4

  ```svelte
  <Checkbox name="checkbox" >
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </Checkbox>
  ```

### Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

* Svelte 5

  ```svelte
  <Checkbox name="checkbox" >
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </Checkbox>
  ```

* Svelte 4

  ```svelte
  <Checkbox name="checkbox" >
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </Checkbox>
  ```