# TargetAudienceSelector

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

## Example

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


<TargetAudienceSelector
  name="audience"
  label="Target audience"
  description="This is a field description."
/>
```

## Props

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 target audience selector and validation message.

**App.svelte**

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


<TargetAudienceSelector name="audience">
  {#snippet label()}
    Välj <strong>målgrupp</strong>
  {/snippet}
  {#snippet description()}
    Innehåll som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</TargetAudienceSelector>
```