TagSelector

Wrapper for Sitevision tag selector.

Props

Prop	Type	Description
id	string	Unique identifier for the component. Default: generateId()
name	string	Name attribute for the tag selector.
label	string	Label for the tag selector.
description	string	Description text displayed below the input field.
required	boolean	If the field is required. Default: false
disabled	boolean	If the field is disabled. Default: false
show	boolean	Show or hide the component without re-rendering. Default: true
value	Array	Bound value for the tag selector. Default: []

Example

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

<Panel heading="Inställningar">
  <TagSelector name="tags" label="Etiketter" />
</Panel>

Advanced

NOT RECOMENDED

Usually the usage of name is enough for 99% of use cases.

Name prop is required here as well since Sitevision uses this to initialize the component.

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

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

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

<Panel heading="Inställningar">
  <TagSelector bind:value={values.tags} label="Etiketter" name="tags" />
</Panel>

Slots

Default

Default slot after select.

<TagSelector name="tags" label="Etiketter" />
  <p>Some text</p>
</TagSelector>

Label

Slot for content in the label element.

Svelte 5

<TagSelector name="tags">
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</TagSelector>

Svelte 4

<TagSelector name="tags">
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</TagSelector>

Description

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

Svelte 5

<TagSelector name="tags">
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</TagSelector>

Svelte 4

<TagSelector name="tags">
  <svelte:fragment slot="description">
    Custom <strong>description</strong>
  </svelte:fragment>
</TagSelector>