# DropdownSelector

Generic wrapper for Sitevision [select components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components) used for selecting nodes.

Prefer the specialized wrappers for ordinary usage:

* [MetadataSelector](/packages/config-svelte/components/metadataselector)
* [TemplateSelector](/packages/config-svelte/components/templateselector)
* [Oauth2ConfigurationSelector](/packages/config-svelte/components/oauth2configurationselector)
* [VirtualGroupSelector](/packages/config-svelte/components/virtualgroupselector)
* [SearchIndexSelector](/packages/config-svelte/components/searchindexselector)
* [FontSelector](/packages/config-svelte/components/fontselector)
* [ColorSelector](/packages/config-svelte/components/colorselector)
* [LLMConfigurationSelector](/packages/config-svelte/components/llmconfigurationselector)
* [TargetAudienceSelector](/packages/config-svelte/components/targetaudienceselector)

Use `DropdownSelector` when you need to configure the selector component directly.

## Example

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


<DropdownSelector name="metadata" component="metadata" label="Metadata" />
```

## Props

| Prop                | Type                                                                                                                                                                                       | Description                                                                                                          |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
| `component`required | `string`Mer information```ts
'metadata' | 'template' | 'oauth2-configuration' | 'virtual-group' | 'search-index' | 'font' | 'color' | 'llm-configuration' | 'target-audience' | string
``` | Sitevision component.                                                                                                |
| `label`required     | `string \| Snippet`                                                                                                                                                                        | Field label, a string or Svelte snippet.                                                                             |
| `value`$bindable    | `string`                                                                                                                                                                                   | Selected node ID.                                                                                                    |
| `types`             | `string \| string[]`                                                                                                                                                                       | Filters selectable types for components that support filtering. Accepts one type, array or a comma-separated string. |
| `name`              | `string`                                                                                                                                                                                   | Configuration key and HTML name attribute.                                                                           |
| `description`       | `string \| Snippet`                                                                                                                                                                        | Description shown below the field, a string or Svelte snippet.                                                       |
| `required`          | `boolean`                                                                                                                                                                                  | Set the field as required.**Default:** `false`                                                                       |
| `disabled`          | `boolean`                                                                                                                                                                                  | Disables the field.**Default:** `false`                                                                              |
| `show`              | `boolean`                                                                                                                                                                                  | Shows or hides the selector without destroying it.**Default:** `true`                                                |
| `class`             | `string`                                                                                                                                                                                   | CSS class added to the form-group wrapper.                                                                           |
| `children`          | `Snippet`                                                                                                                                                                                  | Content rendered after the selector and validation message.                                                          |
| `onChange`          | `function`Mer information```ts
(value: string, event: Event) => void
```                                                                                                                   | Called on a selection change.                                                                                        |
| `validate`          | `function`Mer information```ts
(context: ValidationContext<string>) => ValidationResult
```                                                                                                | Custom validator.                                                                                                    |

For custom options, use [CustomSelector](/packages/config-svelte/components/customselector).\
For tags, use [TagSelector](/packages/config-svelte/components/tagselector).

## Validation

By default, the component applies standard required-field validation. A custom `validate` prop replaces that default and returns `{ success: boolean, message?: string }`.\
Validation errors are displayed below the component and prevent saving.

See [validation](/packages/config-svelte/#validation) for more details.

## Snippets

`label` and `description` accept text or Svelte snippets.\
Default child content is rendered after the select and validation message.

**App.svelte**

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


<DropdownSelector name="metadata" component="metadata">
  {#snippet label()}
    Välj <strong>metadata</strong>
  {/snippet}
  {#snippet description()}
    Välj metadata för <strong>innehållet</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</DropdownSelector>
```