# Input

Wrapper for a HTML input field.

For multiline text, use [Textarea](/packages/config-svelte/components/textarea) instead of `type="textarea"`.

## Example

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


<Panel heading="Inställningar">
  <Input name="text" label="Text" description="This is a field description." />
</Panel>
```

## Props

| Prop             | Type                                                                                                 | Description                                                                                |
| ---------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
| `label`required  | `string \| Snippet`                                                                                  | Field label, a string or Svelte snippet.                                                   |
| `value`$bindable | `string \| number`                                                                                   | Field value.                                                                               |
| `description`    | `string \| Snippet`                                                                                  | Description shown below the field, a string or Svelte snippet.                             |
| `type`           | `InputType`                                                                                          | HTML input type, such as `'text'`, `'url'`, `'email'`, or `'number'`.**Default:** `'text'` |
| `name`           | `string`                                                                                             | Configuration key and HTML name attribute.                                                 |
| `required`       | `boolean`                                                                                            | Marks the field as required unless disabled or read-only.**Default:** `false`              |
| `disabled`       | `boolean`                                                                                            | Disables the field.**Default:** `false`                                                    |
| `readonly`       | `boolean`                                                                                            | Prevents editing while keeping the field focusable.**Default:** `false`                    |
| `show`           | `boolean`                                                                                            | Shows or hides the field without destroying it.**Default:** `true`                         |
| `class`          | `string`                                                                                             | CSS class added to the form-group wrapper.**Default:** `''`                                |
| `onInput`        | `function`Mer information```ts
(value: string | number, event: Event) => void
```                    | Called on the native input event with the updated value.                                   |
| `onChange`       | `function`Mer information```ts
(value: string | number, event: Event) => void
```                    | Called on the native change event with the updated value.                                  |
| `validate`       | `function`Mer information```ts
(context: ValidationContext<string | number>) => ValidationResult
``` | Custom validation function.                                                                |

Additional HTML input attributes, such as `placeholder`, `maxlength`, `pattern`, `min`, `max`, and `step`, are forwarded to the input element.

For `type="number"` and `type="range"`, input and change events convert the value to a number. Clearing a number input produces `0`.

### URL prefixing

When setting the type to `"url"`, the input will automatically prefix `https://` if the user does not provide it.

```svelte
<Input name="url" label="Webbadress" type="url" />
```

## Validation

By default, the field applies required-field and native browser validation, including constraints such as `type`, `pattern`, `min`, and `max`. A custom `validate` prop replaces the default and returns `{ success: boolean, message?: string }`.

Validation errors are displayed below the input 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 input and validation message.

**App.svelte**

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


<Input name="text">
  {#snippet label()}
    Ange <strong>text</strong>
  {/snippet}
  {#snippet description()}
    Text som används i <strong>appen</strong>.
  {/snippet}
  <p>Ytterligare information.</p>
</Input>
```

## Default value

Use `value` to set a default when no saved configuration value is available:

```svelte
<Input name="text" label="Text" value="Default text" />
```

## Related

* [Textarea](/packages/config-svelte/components/textarea) for multiline text.