# TagSelector

Wrapper for Sitevision [tag selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components).

![TagSelector](/_astro/TagSelector.BcLApugl_ZeVByk.webp)

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

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

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

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

### Label

Slot for content in the label element.

* Svelte 5

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

* Svelte 4

  ```svelte
  <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

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

* Svelte 4

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