Checkbox

Props

export let id = generateId();
export let label;
export let name;
export let disabled = false;
export let checked = false;
export let show = true;
export let value;

Default value

Use checked attribute if the checkbox should be checked as default

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

Examples

Standard

<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';

  const values = {
    checkbox: false,
    ...window.CONFIG_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 class="help-block">Some helpful text.</p>
</Checkbox>

Label

Slot for content in the label element.

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