# PageSelector

Select a page.\
This component wraps [NodeSelector](/packages/config-svelte/components/base/nodeselector) with `component="page"`.

## Example

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


<PageSelector name="page" label="Page" description="This is a field description." />
```

## Props

| Prop    | Type                                                                                                                                                                                                                                                                      | Description                           |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
| `types` | `PageNodeType \| PageNodeType[]`Mer information```ts
'sv:sitePage' | 'sv:page' | 'sv:article' | 'sv:archive' | 'sv:folder' | 'sv:link' | 'sv:structurePage' | 'sv:structureFolder' | 'sv:structureLink' | 'sv:collaborationGroupPage' | 'sv:collaborationGroupFolder'
``` | Restricts selectable page node types. |

Supported page node types include `'sv:sitePage'`, `'sv:page'`, `'sv:article'`, `'sv:archive'`, `'sv:folder'`, `'sv:link'`, `'sv:structurePage'`, `'sv:structureFolder'`, `'sv:structureLink'`, `'sv:collaborationGroupPage'`, and `'sv:collaborationGroupFolder'`.

The following props are inherited from the `NodeSelector` component.

| Prop                   | Type                                                                                        | Description                                                                                                       |
| ---------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| `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.                                                                        |
| `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`             | `function`Mer information```ts
(value: string, event: Event) => void
```                    | Called on a selection change.                                                                                     |
| `validate`             | `function`Mer information```ts
(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](/packages/config-svelte/#validation) for more details.

## Snippets

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

**App.svelte**

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


<PageSelector name="node">
  {#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>
</PageSelector>
```