# InputField

Wrapper for input fields.\
Automatically prefixes https\:// if field type is `url`.

![InputField](/_astro/InputField.IlCxpHdX_1BFT5o.webp)

## Props

| Prop          | Type      | Description                                                                                         |
| ------------- | --------- | --------------------------------------------------------------------------------------------------- |
| `id`          | `string`  | Input ID, generated if no property is provided, needed for input label. **Default:** `generateId()` |
| `label`       | `string`  | Field label. **Default:** `undefined`                                                               |
| `description` | `string`  | Description for the input field, displayed below the input field. **Default:** `undefined`          |
| `type`        | `string`  | HTML input field types, e.g., `text`, `textarea`, `url`. **Default:** `'text'`                      |
| `name`        | `string`  | Name attribute. **Default:** `undefined`                                                            |
| `required`    | `boolean` | If the field is required. **Default:** `false`                                                      |
| `disabled`    | `boolean` | If the field is disabled. **Default:** `false`                                                      |
| `readonly`    | `boolean` | If the field is readonly. **Default:** `false`                                                      |
| `show`        | `boolean` | Show and hide the component without re-rendering. **Default:** `true`                               |
| `maxlength`   | `number`  | Max length of input. **Default:** `undefined`                                                       |
| `pattern`     | `string`  | Validation pattern. **Default:** `undefined`                                                        |
| `rows`        | `number`  | Number of rows if `textarea`. **Default:** `3`                                                      |
| `value`       | `string`  | Used if bound to value. **Default:** `''`                                                           |

## Example

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


<Panel heading="Inställningar">
  <InputField name="text" label="Text" />
</Panel>
```

Advanced**

> **NOT RECOMENDED**
>
> Usually the usage of `name` is enough for 99% of use cases.

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


  let { values } = $props();


  values = {
    text: '',
    ...values
  };


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


<Panel heading="Inställningar">
  <InputField bind:value={values.text} label="Text" />
</Panel>
```

## Slots

### Default

Default slot after input field.

```svelte
<InputField name="text" label="Text">
  <p class="help-block">Some helpful text</p>
</InputField>
```

### Label

Slot for content in the label element.

* Svelte 5

  ```svelte
  <InputField name="text">
    {#snippet label()}
      Custom <strong>label</strong>
    {/snippet}
  </InputField>
  ```

* Svelte 4

  ```svelte
  <InputField name="text">
    <svelte:fragment slot="label">
      Custom <strong>label</strong>
    </svelte:fragment>
  </InputField>
  ```

### Description

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

* Svelte 5

  ```svelte
  <InputField name="text">
    {#snippet description()}
      Custom <strong>description</strong>
    {/snippet}
  </InputField>
  ```

* Svelte 4

  ```svelte
  <InputField name="text">
    <svelte:fragment slot="description">
      Custom <strong>description</strong>
    </svelte:fragment>
  </InputField>
  ```

## Default value

Use the value attribute to set a default value:

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