# DropdownSelector

Wrapper component for Sitevision [selects](https://developer.sitevision.se/docs/webapps/configuration#h-Sitevisioncomponents).

![DropdownSelector](/_astro/DropdownSelector.Jh6jHqFn_ZAYPcF.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`                         |
| `type`        | `string`     | Type of the selector. **Default:** `'metadata'`                                   |
| `selectable`  | `Array<any>` | Filter for selectable types. **Default:** `[]`                                    |
| `required`    | `boolean`    | Whether the selector is required. **Default:** `false`                            |
| `disabled`    | `boolean`    | Disable the selector. **Default:** `false`                                        |
| `show`        | `boolean`    | Show and hide the component without re-rendering. **Default:** `true`             |
| `value`       | `string`     | Value associated with the selector. **Default:** `''`                             |

### Type

Possible values for `type`:

* `metadata`
* `template`
* `oauth2-configuration`
* `virtual-group`
* `search-index`
* `font`
* `color`
* `llm-configuration`
* `target-audience`

For `custom-selector` use [CustomSelector](/packages/config-svelte/components/customselector/).

## Example

### Standard

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


<Panel heading="Inställningar">
  <DropdownSelector name="metadata" type="metadata" label="Metadata" />
</Panel>
```

Advanced**

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

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


  const values = {
    metadata: '',
    ...window.CONFIG_VALUES
  };


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


<Panel heading="Inställningar">
  <DropdownSelector bind:value={values.metadata} type="metadata" label="Metadata" />
</Panel>
```

## Type prop shorthand (since 1.3.0)

You can omnit the `-selector` suffix for the type prop.

```svelte
<DropdownSelector name="metadata" type="metadata" label="Metadata" />
```

## Selectable types

> ❗ Since SiteVision 7.0 ❗

Filter what types should be selectable. See available types here: <https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Types>

Accepts an Array or String.

```svelte
<DropdownSelector
  name="metadata"
  type="metadata-selector"
  label="Metadata"
  selectable="sv:metadataLinkDefinition"
  selectable={['sv:metadataLinkDefinition', 'sv:metadataDateDefinition']}
/>
```

## Slots

### Default

Default slot after selector.

```svelte
<DropdownSelector name="metadata" label="Metadata" {options} >
  <p class="help-block">Some helpful text.</p>
</CustomSelector>
```

### Label

Slot for content in the label element.

* Svelte 5

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

* Svelte 4

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

### Description

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

* Svelte 5

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

* Svelte 4

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