SelectField

Props

Prop	Type	Description
id	string	Unique identifier for the component. Default: generateId()
label	string	Label for the select field. Required.
name	string	Name attribute for the select field. Default: undefined
required	boolean	If the field is required. Default: false
disabled	boolean	If the field is disabled. Default: false
show	boolean	Show or hide the component without re-rendering. Default: true
options	Array<string> Array<{ label, value }>	Array of options for the select field. Default: []
value	string	Bound value for the select field. Default: ''
description	string	Description text displayed below the input field.

Example

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

<Panel heading="Inställningar">
  <SelectField name="select1" label="Select 1" options={['Värde 1', 'Värde 2', 'Värde 3']} />
  <SelectField
    name="select2"
    label="Select 2"
    options={[{ label: 'Value 1', value: 'value1' }, { label: 'Value 2', value: 'value2' }, { label: 'Value 3', value: 'value3' }]}
  />
</Panel>

Advanced

NOT RECOMENDED

Usually the usage of name is enough for 99% of use cases.

<script>
  import { Panel, SelectField } from '@soleil-se/config-svelte';
  import { onSave } from '@soleil-se/config-svelte/utils';

  const values = {
    select: '',
    ...window.CONFIG_VALUES
  };

  const options = ['Värde 1', 'Värde 2', 'Värde 3'];

  onSave(() => values);
</script>

<Panel heading="Inställningar">
  <SelectField bind:value={values.select} label="Select" {options} />
</Panel>

Slots

Default

Default slot after select.

<SelectField name="select1" label="Select 1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
  <p>Some text</p>
</SelectField>

Label

Slot for content in the label element.

Svelte 5

<SelectField name="select1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
  {#snippet label()}
    Custom <strong>label</strong>
  {/snippet}
</SelectField>

Svelte 4

<SelectField name="select1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
  <svelte:fragment slot="label">
    Custom <strong>label</strong>
  </svelte:fragment>
</SelectField>

Description

Slot for content in the description element to be used instead of the prop when HTML formatting is needed.

Svelte 5

<SelectField name="select1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
  {#snippet description()}
    Custom <strong>description</strong>
  {/snippet}
</SelectField>

Svelte 4

<SelectField name="select1" options={['Värde 1', 'Värde 2', 'Värde 3']} >
  <svelte:fragment slot="description">
    Custom <strong>description</strong>
  </svelte:fragment>
</SelectField>

Default value

Use the value attribute to set a default value:

<SelectField name="select1" label="Select 1" options={['Värde 1', 'Värde 2', 'Värde 3']} value="Värde 1" />