# UserSelector

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

## Example

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


<UserSelector name="user" label="User" description="This is a field description." />
```

## Props

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 { UserSelector } from '@soleil-se/config-svelte';
</script>


<UserSelector 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>
</UserSelector>
```