Checkbox

A checkbox component for selecting a boolean value.

Enable option

Enable option

Example

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

<Checkbox name="enable" label="Enable option" />

Props

Prop	Type	Description
label required	string | Snippet	Field label, a string or Svelte snippet.
value $bindable	boolean	Whether the checkbox is selected. Default: false
description	string | Snippet	Description shown below the field, a string or Svelte snippet.
name	string	Configuration key and HTML name attribute.
checked	boolean	Whether the checkbox is initially checked. Default: false
disabled	boolean	Disables the checkbox. Default: false
show	boolean	Shows or hides the checkbox without destroying it. Default: true
class	string	CSS class added to the form-group wrapper. Default: ''
children	Snippet	Content rendered after the checkbox and validation message.
onInput	functionMer information (value: boolean, event: Event) => void	Called on the native input event with the updated value.
onChange	functionMer information (value: boolean, event: Event) => void	Called on the native change event with the updated value.
validate	functionMer information (context: ValidationContext<boolean>) => ValidationResult	Custom validator.

Validation

Checkbox does not run required or native browser validation by default. Provide validate to apply custom validation. It receives a boolean value in its context and returns { success: boolean, message?: string }.

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

  function validateTerms({ value }) {
    return value
      ? { success: true }
      : { success: false, message: 'Du måste godkänna villkoren.' };
  }
</script>

<Checkbox name="accepted" label="Jag godkänner villkoren" validate={validateTerms} />

Validation errors are displayed below the checkbox and prevent saving.
See validation for validation timing.

Snippets

label and description accept text or Svelte snippets.
Default child content is rendered after the checkbox and validation message.

App.svelte

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

<Checkbox name="checkbox">
  {#snippet label()}
    Aktivera <strong>alternativet</strong>
  {/snippet}
  {#snippet description()}
    Använd <strong>alternativet</strong> i appen.
  {/snippet}
  <p>Ytterligare information.</p>
</Checkbox>