# SelectField

![SelectField](/_astro/SelectField.ChpIo69x_xfQ0d.webp)

## 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

```svelte
<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.

```svelte
<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.

```svelte
<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

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

* Svelte 4

  ```svelte
  <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

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

* Svelte 4

  ```svelte
  <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:

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