# Select

A select field for choosing a single option.

## Example

```svelte
<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[]`Mer information```ts
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`Mer information```ts
(value: string, event: Event) => void
```                    | Called on the native input event with the updated value.                                      |
| `onChange`       | `function`Mer information```ts
(value: string, event: Event) => void
```                    | Called on the native change event with the updated value.                                     |
| `validate`       | `function`Mer information```ts
(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](/packages/config-svelte/#validation) for more details.

## Snippets

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

**App.svelte**

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