Checkbox

A checkbox component for selecting a boolean value.

Props

Prop	Type	Description
`id`	`string`	ID, generates automatically if nothing is passed. Default: `generateId()`
`label`	`string`	Label for 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.

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

Examples

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

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

Advanced

<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.

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

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

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