# ListSelector

Wrapper for Sitevision [list components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#h-Listcomponents)

![ListSelector](/_astro/ListSelector.bRDl_leL_2dmJ1J.webp)

## Props

| Prop          | Type         | Description                                                                                                               |
| ------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------- |
| `id`          | `string`     | Input ID, generated if no property is provided, for component initialization and input label. **Default:** `generateId()` |
| `name`        | `string`     | Name is always required here since SiteVision uses this to initialize the component. **Default:** `undefined`             |
| `label`       | `string`     | Field label. **Default:** `undefined`                                                                                     |
| `description` | `string`     | Description for the list selector, displayed below the label. **Default:** `undefined`                                    |
| `type`        | `string`     | List component type. **Default:** `'page'`                                                                                |
| `value`       | `Array<any>` | Used if bound to value, falls back to provided values object when name attribute is used. **Default:** `[]`               |
| `required`    | `boolean`    | If the list is required. **Default:** `false`                                                                             |
| `disabled`    | `boolean`    | If the list is disabled. **Default:** `false`                                                                             |
| `sortable`    | `boolean`    | If the list is sortable (since Sitevision 9.1). **Default:** `false`                                                      |
| `show`        | `boolean`    | Show and hide the component without re-rendering. **Default:** `true`                                                     |
| `selectable`  | `Array<any>` | Selectable types. **Default:** `[]`                                                                                       |

### Type

Possible values for `type`:

* `page`
* `file`
* `image`
* `user`
* `userfield`

For `tags-selector` use [TagSelector](/packages/config-svelte/components/tagselector).

## Example

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


<Panel heading="Inställningar">
  <ListSelector name="pages" type="page" label="Sidor" />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the usage of `name` is enough for 99% of use cases.

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


  const values = {
    pages: '',
    ...window.CONFIG_VALUES
  };


  onSave(() => values);
</script>


<Panel heading="Inställningar">
  <ListSelector name="pages" bind:value={values.pages} label="Sidor" />
</Panel>
```

## Slots

### Default

Default slot after list.

```svelte
<ListSelector name="pages" type="page" label="Sidor" />
  <p>Some text.</p>
</ListSelector>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <ListSelector name="pages" type="page-list">
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </ListSelector>
  ```

* Svelte 4

  ```svelte
  <ListSelector name="pages" type="page-list">
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </ListSelector>
  ```

### Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

* Svelte 5

  ```svelte
  <ListSelector name="pages" type="page-list">
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </ListSelector>
  ```

* Svelte 4

  ```svelte
  <ListSelector name="pages" type="page-list">
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </ListSelector>
  ```

## Type prop shorthand (since 1.3.0)

You can omnit the `-list` suffix for the type prop.

```svelte
<ListSelector name="pages" type="page" label="Sidor" />
```

## Selectable types

Filter what types should be selectable. See available types here: <https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components#Listtypes>

Accepts an Array or String.

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