# NodeSelector

Wrapper for Sitevision [input components](https://developer.sitevision.se/docs/webapps/webapps-2/configuration/sitevision-components) used for selecting nodes.

![NodeSelector](/_astro/NodeSelector.CSkxmxjY_Z5OV4t.webp)

## 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](/packages/config-svelte/version-1/components/tagselector).

## Example

```svelte
<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.

```svelte
<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.

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

### Label

Slot for content in the label element.

* Svelte 5

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

* Svelte 4

  ```svelte
  <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

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

* Svelte 4

  ```svelte
  <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.

```svelte
<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.

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