NodeSelector

Generic wrapper for Sitevision input components used for selecting nodes.

Page

This is a field description.

Prefer the specialized wrappers for ordinary usage:

• PageSelector
• FileSelector
• ImageSelector
• UserSelector
• ContentNodeSelector
• LinkSelector

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

Example

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

<NodeSelector name="node" component="content-node" label="Innehåll" />

Props

Prop	Type	Description
component required	stringMer information 'page' | 'file' | 'image' | 'user' | 'content-node' | 'link' | string	Sitevision component.
label required	string | Snippet	Field label, a string or Svelte snippet.
value $bindable	string	Selected node ID. An initial Sitevision node object from the configuration is normalized to its ID.
displayName $bindable	string	Display name of the selected node, initialized from the configuration node’s display name or path when available.
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
removable	boolean	Whether the value can be cleared. Default: true
show	boolean	Shows or hides the selector without destroying it. Default: true
class	string	CSS class added to the form-group wrapper.
children	Snippet	Content rendered after the selector and validation message.
onChange	functionMer information (value: string, event: Event) => void	Called on a selection change.
validate	functionMer information (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 for more details.

The selector also reports if a saved node is marked as trashed or removed. Selecting another node clears that flag.
Validation errors are displayed below the selector and prevent saving.

For file-type validation with accept, use FileSelector.

Snippets

label and description accept text or Svelte snippets.
Default child content is rendered after the selector and validation message.

App.svelte

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

<NodeSelector name="node" component="image">
  {#snippet label()}
    Välj <strong>innehåll</strong>
  {/snippet}
  {#snippet description()}
    Innehåll som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</NodeSelector>