Textarea

Wrapper for an HTML textarea for multiline text.

Textarea

This is a field description.

Example

<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	functionMer information (value: string | number, event: Event) => void	Called on the native input event with the updated value.
onChange	functionMer information (value: string | number, event: Event) => void	Called on the native change event with the updated value.
validate	functionMer information (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, 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 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

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

<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 for registering bound values with onSave.

Related

• Input for single-line input fields.