Select

A select field for choosing a single option.

Select an option

This is a field description.

Example

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

  const stringOptions = ['First option', 'Second option', 'Third option'];
  const objectOptions = [
    { label: 'First option', value: 'first' },
    { label: 'Second option', value: 'second' },
    { label: 'Third option', value: 'third' }
  ];
</script>

<Select
  name="select1"
  label="Select an option"
  description="This is a field description."
  options={stringOptions}
/>

<Select
  name="select2"
  label="Select an option"
  description="This is a field description."
  options={objectOptions}
/>

Props

Prop	Type	Description
`label`	`string \| Snippet`	Field label, a string or Svelte snippet.
`value` $bindable	`string`	Selected option value. Default: `''`
`description`	`string \| Snippet`	Description shown below the field, a string or Svelte snippet.
`name`	`string`	Configuration key and HTML name attribute.
`required`	`boolean`	Requires an option to be selected. Default: `false`
`disabled`	`boolean`	Disables the select. Default: `false`
`show`	`boolean`	Shows or hides the select without destroying it. Default: `true`
`options`	`Option[]` `string \| { label: string, value: string }`	Available options as strings or objects with `label` and `value` properties. Default: `[]`
`class`	`string`	CSS class added to the form-group wrapper. Default: `''`
`children`	`Snippet`	Content rendered after the select and validation message.
`onInput`	`function` `(value: string, event: Event) => void`	Called on the native input event with the updated value.
`onChange`	`function` `(value: string, event: Event) => void`	Called on the native change event with the updated value.
`validate`	`function` `(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 for more details.

Snippets

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

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

<Select name="status">
  {#snippet label()}
    Välj <strong>status</strong>
  {/snippet}
  {#snippet description()}
    Välj en <strong>status</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</Select>