# ListSelector

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

Prefer the specialized wrappers for ordinary usage:

* [PageList](/packages/config-svelte/components/pagelist)
* [FileList](/packages/config-svelte/components/filelist)
* [ImageList](/packages/config-svelte/components/imagelist)
* [UserList](/packages/config-svelte/components/userlist)
* [UserFieldList](/packages/config-svelte/components/userfieldlist)
* [TemplateList](/packages/config-svelte/components/templatelist)
* [TargetAudienceList](/packages/config-svelte/components/targetaudiencelist)
* [GeolocationList](/packages/config-svelte/components/geolocationlist)

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

## Example

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


<Panel heading="Inställningar">
  <ListSelector
    name="pages"
    component="page"
    label="Sidor"
    types={['sv:page', 'sv:sitePage']}
  />
</Panel>
```

## Props

| Prop                | Type                                                                                                                                      | Description                                                                                                             |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| `component`required | `Type`Mer information```ts
'page' | 'file' | 'image' | 'user' | 'userfield' | 'template' | 'target-audience' | 'geolocation' | string
``` | Sitevision component.                                                                                                   |
| `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.                                                                              |
| `types`             | `string \| string[]`                                                                                                                      | Restricts selectable node types.                                                                                        |
| `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.                                                                                                       |

Supported components are `'page'`, `'file'`, `'image'`, `'user'`, `'userfield'`, `'template'`, `'target-audience'`, and `'geolocation'`.

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

**App.svelte**

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


<ListSelector name="pages" component="page">
  {#snippet label()}
    Välj <strong>sidor</strong>
  {/snippet}
  {#snippet description()}
    Välj sidor att visa i <strong>listan</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</ListSelector>
```

## Related

* [PageList](/packages/config-svelte/components/pagelist), [FileList](/packages/config-svelte/components/filelist), [ImageList](/packages/config-svelte/components/imagelist), and other specialized lists reuse the inherited props documented above.

```svelte
<ListSelector
  name="pages"
  type="page-list"
  label="Sidor"
  selectable="sv:page"
  selectable={['sv:page', 'sv:sitePage']}
/>
```