NodeSelector

Wrapper for Sitevision input components used for selecting nodes.

Props

Prop	Type	Description
id	string	Input ID, generated automatically if not provided. Default: generateId()
name	string	Name attribute for the selector. Default: undefined
label	string	Field label. Default: undefined
description	string	Description for the node selector, displayed below the input field. Default: undefined
type	string	Type of the selector. Values: 'page' 'file' 'image' 'user' 'content-node' 'link' Default: 'page'
required	boolean	Whether the field is required. Default: false
disabled	boolean	Whether the field is disabled. Default: false
removable	boolean	Whether the selected value can be removed. Default: false
show	boolean	Show and hide the component without re-rendering. Default: true
selectable	Array<any>	Filter for selectable node types. Default: []
value	string	Value associated with the selector. Default: ''

For tags-selector use TagSelector.

Example

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

<Panel heading="Inställningar">
  <NodeSelector
    name="page"
    type="page"
    label="Sida"
  />
</Panel>

Advanced

NOT RECOMENDED

Usually the usage of name is enough for 99% of use cases.

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

  const { values } = $props();

  values = {
    page: '',
    ...values
  };

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

<Panel heading="Inställningar">
  <NodeSelector bind:value={values.page} label="Page" type="page" />
</Panel>

Slots

Default

Default slot after selector.

<NodeSelector name="page" label="Page" type="page" />
  <p>Some text.</p>
</NodeSelector>

Label

Slot for content in the label element.

Svelte 5

<NodeSelector name="page" type="page">
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</NodeSelector>

Svelte 4

<NodeSelector name="page" type="page">
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</NodeSelector>

Description

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

Svelte 5

<NodeSelector name="page" type="page">
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</NodeSelector>

Svelte 4

<NodeSelector name="page" type="page">
  <svelte:fragment slot="description">
    Custom <strong>description</strong>
  </svelte:fragment>
</NodeSelector>

Type prop shorthand (since 1.3.0)

You can omnit the -selector suffix for the type prop.

<NodeSelector name="page" type="page" label="Sida" />

Selectable node types

❗ Since SiteVision 7.0 ❗

Filter what types should be selectable. See available types here: https://developer.sitevision.se/docs/webapps/configuration/sitevision-components#h-Types

Accepts an Array or String.

<NodeSelector
  name="page"
  type="page"
  label="Sida"
  selectable="sv:page"
  selectable={['sv:page', 'sv:sitePage']}
/>