# TargetAudienceList

Select and order target audiences.\
This component wraps [ListSelector](/packages/config-svelte/components/base/listselector) with `component="target-audience"`.

## Example

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


<TargetAudienceList
  name="audiences"
  label="Target audiences"
  description="This is a field description."
/>
```

## Props

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

| Prop             | Type                                                                                          | Description                                                                                                             |
| ---------------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `label`required  | `string \| Snippet`                                                                           | Field label, a string or Svelte snippet.                                                                                |
| `value`$bindable | `string[]`                                                                                    | Selected node IDs. Initial Sitevision node objects from the configuration are normalized to their IDs.**Default:** `[]` |
| `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`                                                                                 |
| `sortable`       | `boolean`                                                                                     | Allows selected items to be reordered. Requires Sitevision 9.1 or later.**Default:** `false`                            |
| `show`           | `boolean`                                                                                     | Shows or hides the list without destroying it.**Default:** `true`                                                       |
| `class`          | `string`                                                                                      | CSS class added to the form-group wrapper.**Default:** `''`                                                             |
| `children`       | `Snippet`                                                                                     | Content rendered after the list and validation message.                                                                 |
| `onChange`       | `function`Mer information```ts
(value: string[]) => 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 list and validation message.

**App.svelte**

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


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