Hoppa till innehåll
Markdown

VirtualGroupSelector

Select a virtual group.
This component wraps DropdownSelector with component="virtual-group".

<script>
import { VirtualGroupSelector } from '@soleil-se/config-svelte';
</script>
<VirtualGroupSelector
name="group"
label="Virtual group"
description="This is a field description."
/>

The following props are inherited from the DropdownSelector component.

PropTypeDescription
label
required
string | Snippet

Field label, a string or Svelte snippet.

value
$bindable
string

Selected node ID.

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
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
(value: string, event: Event) => void

Called on a selection change.

validate
function
(context: ValidationContext<string>) => ValidationResult

Custom validator.

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.

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

App.svelte
<script>
import { VirtualGroupSelector } from '@soleil-se/config-svelte';
</script>
<VirtualGroupSelector name="group">
{#snippet label()}
Välj <strong>grupp</strong>
{/snippet}
{#snippet description()}
Innehåll som används i <strong>appen</strong>.
{/snippet}
<p>Ytterligare information.</p>
</VirtualGroupSelector>