ListSelector

Generic wrapper for Sitevision list components used for selecting multiple nodes.

Pages

This is a field description.

• Home
• Pages
• Subpage 1
• Subpage 2

Add...

Prefer the specialized wrappers for ordinary usage:

• PageList
• FileList
• ImageList
• UserList
• UserFieldList
• TemplateList
• TargetAudienceList
• GeolocationList

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

Example

<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	TypeMer information '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	functionMer information (value: string[]) => void	Called on a selection change.
validate	functionMer information (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 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

<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, FileList, ImageList, and other specialized lists reuse the inherited props documented above.

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