SelectField

Props

export let id = generateId();
export let label;
export let name;
export let required = false;
export let disabled = false;
export let show = true;
export let options = [];
export let value = '';

Example

Standard

<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

<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 class="help-block">Some helpful text</p>
</SelectField>

Label

Slot for content in the label element.

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