# Textarea

Wrapper for an HTML textarea for multiline text.

## Example

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


<Textarea name="textarea" label="Textarea" description="This is a field description." />
```

| 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.                |
| `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:** `''`                   |
| `rows`           | `number`                                                                            | Number of visible text rows.**Default:** `3`                                  |
| `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) => ValidationResult
``` | Custom validation function.                                                   |

Additional HTML textarea attributes, such as `placeholder`, `maxlength`, `minlength`, `cols`, and `wrap`, are forwarded to the textarea element.

Although `value` accepts a number as an initial value, input and change events always produce a string. Unlike [Input](/packages/config-svelte/components/input), Textarea does not apply an input action or URL prefixing.

## Validation

By default, the field applies required-field and native browser validation. A custom `validate` prop replaces the default and returns `{ success: boolean, message?: string }`.

Validation errors are displayed below the textarea and prevent saving. See [validation](/packages/config-svelte/#validation) for validation timing and composing validators.

## Snippets

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

**App.svelte**

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


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

## Default value

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

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

The value can also be bound with `bind:value` when managing values yourself. See the [advanced Input example](/packages/config-svelte/components/input/#default-value) for registering bound values with `onSave`.

## Related

* [Input](/packages/config-svelte/components/input) for single-line input fields.