# CustomSelector

Wrapper component for Sitevision [Custom selector](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Customselectorsince91).

![CustomSelector](/_astro/CustomSelector_single.BffEq9rZ_N7Kql.webp) ![CustomSelectorMultiple](/_astro/CustomSelector_multiple.DLMJQdJ__vMmLL.webp)

## Props

| Prop          | Type                    | Description                                                                       |
| ------------- | ----------------------- | --------------------------------------------------------------------------------- |
| `id`          | `string`                | ID, generates automatically if nothing is passed. **Default:** `generateId()`     |
| `label`       | `string`                | Label for the selector. **Required**. **Default:** `undefined`                    |
| `description` | `string`                | Description for the selector, displayed below the label. **Default:** `undefined` |
| `name`        | `string`                | Name attribute for the selector. **Default:** `undefined`                         |
| `placeholder` | `string`                | Placeholder text for the selector. **Default:** `undefined`                       |
| `options`     | `Array<{label, value}>` | Array of options for the selector. **Default:** `[]`                              |
| `searchable`  | `boolean`               | Whether the selector is searchable. **Default:** `false`                          |
| `removable`   | `boolean`               | Whether selected options can be removed. **Default:** `true`                      |
| `required`    | `boolean`               | Whether the selector is required. **Default:** `false`                            |
| `disabled`    | `boolean`               | Disable the selector. **Default:** `false`                                        |
| `multiple`    | `boolean`               | Whether multiple options can be selected. **Default:** `false`                    |
| `show`        | `boolean`               | Show and hide the component without re-rendering. **Default:** `true`             |
| `value`       | `string \| Array<any>`  | Value associated with the selector. **Default:** `''`                             |

## Example

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


  const options = [
    { label: 'Värde 1', value: 'value1' },
    { label: 'Värde 2', value: 'value2' },
    { label: 'Värde 3', value: 'value3' },
  ];
</script>


<Panel heading="Inställningar">
  <CustomSelector name="custom" label="Custom selector" {options} />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the usage of `name` is enough for 99% of use cases.

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


  let { values } = $props();


  values = {
    custom: '',
    ...values
  }


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


<Panel heading="Inställningar">
  <CustomSelector label="Custom selector" {options} bind:value={values.custom} />
</Panel>
```

## Slots

### Default

Default slot after selector.

```svelte
<CustomSelector name="custom" label="Custom selector" {options} >
  <p>Some text.</p>
</CustomSelector>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <CustomSelector name="custom" {options}>
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </CustomSelector>
  ```

* Svelte 4

  ```svelte
  <CustomSelector name="custom" {options}>
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </CustomSelector>
  ```

### Description

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

* Svelte 5

  ```svelte
  <CustomSelector name="custom" {options}>
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </CustomSelector>
  ```

* Svelte 4

  ```svelte
  <CustomSelector name="custom" {options}>
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </CustomSelector>
  ```

### Option

Option slot for custom templating.\
The option is available as slot prop.

* Svelte 5

  ```svelte
  <CustomSelector name="custom" {options}>
    {#snippet option({ option: o })}
      {o.label} ({o.type})
    {/snippet}
  </CustomSelector>
  ```

* Svelte 4

  ```svelte
  <CustomSelector name="custom" {options}>
    <svelte:fragment slot="option" let:option>
      {option.label} ({option.type})
    </svelte:fragment>
  </CustomSelector>
  ```