# 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/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']}
/>
```