CheckboxGroup

Props

// ID, generates automatically if nothing is passed
export let id = generateId();
// If SiteVision default functions for getting and setting config is used name must be set
export let name;
// Array of options, ['value1', 'value2'] or [{ label: 'Value 1', value: 'value1' }, { label: 'Value 2', value: 'value2' }].
export let options;
// Fieldset legend
export let legend;
// If legend should be hidden visually
export let legendVisuallyHidden = false;
// Disable input, or provide an array of disabled options: ['value1'].
export let disabled = false;
// Show and hide compoment without re-rendering.
export let show = true;
// Used if bound to value.
export let value;

Example

Standard

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

<Panel heading="Inställningar">
  <CheckboxGroup
    name="checkboxGroup1"
    legend="Checkboxgrupp 1"
    options={['Värde 1', 'Värde 2', 'Värde 3']}
  />
  <CheckboxGroup
    name="checkboxGroup2"
    legend="Checkboxgrupp 2"
    options={[
      { label: 'Värde 1', value: 'value1'},
      { label: 'Värde 2', value: 'value2'},
      { label: 'Värde 3', value: 'value3'},
    ]}
  />
</Panel>

Advanced

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

  const values = {
    checkboxGroup1: [],
    checkboxGroup2: [],
    ...window.CONFIG_VALUES
  };

  onSave(() => values);

</script>

<Panel heading="Inställningar">
  <CheckboxGroup
    bind:value={values.checkboxGroup1}
    legend="Checkboxgrupp 1"
    options={['Värde 1', 'Värde 2', 'Värde 3']}
  />
  <CheckboxGroup
    bind:value={values.checkboxGroup2}
    legend="Checkboxgrupp 2"
    options={[
      { label: 'Värde 1', value: 'value1'},
      { label: 'Värde 2', value: 'value2'},
      { label: 'Värde 3', value: 'value3'},
    ]}
  />
</Panel>

Slots

Default

Default slot after checkbox group.

<CheckboxGroup name="checkboxGroup" legend="Checkbox group" {options} />
  <p class="help-block">Some helpful text.</p>
</CheckboxGroup>

Legend

Slot for content in the legend element.

<CheckboxGroup name="checkboxGroup" {options} />
  <svelte:fragment slot="legend">
    Custom <em>legend</em>
  </svelte:fragment>
</CheckboxGroup>

Default value

Use the value prop to set a default value when not binding the value:

<CheckboxGroup
  name="checkboxGroup1"
  legend="Checkboxgrupp 1"
  options={['Värde 1', 'Värde 2', 'Värde 3']}
  value="{['Värde 2', 'Värde 3']}"
/>