# MetadataSelector

Select a metadata definition.\
This component wraps [DropdownSelector](/packages/config-svelte/components/base/dropdownselector) with `component="metadata"`.

## Example

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


<MetadataSelector
  name="metadata"
  label="Metadata"
  description="This is a field description."
/>


<MetadataSelector
  name="metadata"
  label="Metadata"
  types={['sv:metadataTextDefinition', 'sv:metadataLinkDefinition']}
/>
```

## Props

| Prop    | Type                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Description                                         |
| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- |
| `types` | `MetadataNodeType \| MetadataNodeType[]`Mer information```ts
'sv:metadataDateDefinition' | 'sv:metadataUserDefinition' | 'sv:metadataDirectoryDefinition' | 'sv:metadataTextDefinition' | 'sv:metadataSingleDefinition' | 'sv:metadataMultipleDefinition' | 'sv:metadataSystemLinkDefinition' | 'sv:metadataSystemIntegerDefinition' | 'sv:metadataSystemTextDefinition' | 'sv:metadataSystemDefinition' | 'sv:metadataLinkDefinition' | 'sv:metadataTextPortletDefinition' | 'sv:metadataImagePortletDefinition' | 'sv:metadataKeywordDefinition' | 'sv:metadataRelatedInformationDefinition' | 'sv:metadataMediaPortletDefinition' | 'sv:metadataSingleTagDefinition' | 'sv:metadataMultipleTagDefinition' | 'sv:metadataSingleTargetAudienceDefinition' | 'sv:metadataMultipleTargetAudienceDefinition' | 'sv:metadataGeolocationDefinition' | 'sv:metadataModuleDefinition'
``` | Restricts the selectable metadata definition types. |

The following props are inherited from the `DropdownSelector` component.

| Prop             | Type                                                                                        | Description                                                           |
| ---------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `label`required  | `string \| Snippet`                                                                         | Field label, a string or Svelte snippet.                              |
| `value`$bindable | `string`                                                                                    | Selected node ID.                                                     |
| `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.                                                     |

## 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 metadata selector and validation message.

**App.svelte**

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


<MetadataSelector name="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>
</MetadataSelector>
```