Textarea

A native textarea element that automatically works with Field.

Message

<script lang="ts">
	import { Textarea } from '@sveltery/base/textarea';
	import styles from './index.module.css';
</script>

<label class={styles.Label}>
	Message
	<Textarea placeholder="Write a message" rows={3} class={styles.Textarea} />
</label>

Usage guidelines

Form controls must have an accessible name: It can be created using a <label> element or the Field component. See the forms guide.

Anatomy

Import the component and use it as a single part:

Anatomy

<script lang="ts">
	import { Textarea } from '@sveltery/base/textarea';
</script>

<Textarea />

In a SvelteKit remote form, spread a field’s as('text') props onto it. TypeScript rejects the props of any other input type, because a textarea has no type.

API reference

defaultValue string | null —

Name: defaultValue
Description: The value an empty value starts from, and the value a form reset restores.
Type: string | null

value string | null —

Name: value
Description: The value of the textarea.
Type: string | null
Binding: bind:value

render Snippet<[props: HTMLTextareaAttributes, state: TextareaState, children: Snippet | undefined]> —

Name: render
Description: Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a snippet that receives the props to spread onto the element, the component's state, and the children to render.
Type: Snippet<[props: HTMLTextareaAttributes, state: TextareaState, children: Snippet | undefined]>

disabled boolean

Name: disabled
Description: Whether the component should ignore user interaction.
Type: boolean

touched boolean

Name: touched
Description: Whether the field has been touched.
Type: boolean

dirty boolean

Name: dirty
Description: Whether the field value has changed from its initial value.
Type: boolean

valid boolean | null

Name: valid
Description: Whether the field is valid. null means validity is not known yet.
Type: boolean | null

filled boolean

Name: filled
Description: Whether the field has a value.
Type: boolean

focused boolean

Name: focused
Description: Whether the field is focused.
Type: boolean

data-disabled

Present when the textarea is disabled.

data-valid

Present when the textarea is in a valid state (when wrapped in Field.Root).

data-invalid

Present when the textarea is in an invalid state (when wrapped in Field.Root).

data-dirty

Present when the textarea's value has changed (when wrapped in Field.Root).

data-touched

Present when the textarea has been touched (when wrapped in Field.Root).

data-filled

Present when the textarea is filled (when wrapped in Field.Root).

data-focused

Present when the textarea is focused (when wrapped in Field.Root).

Attribute	Description	-
`data-disabled`	Present when the textarea is disabled.
`data-valid`	Present when the textarea is in a valid state (when wrapped in Field.Root).
`data-invalid`	Present when the textarea is in an invalid state (when wrapped in Field.Root).
`data-dirty`	Present when the textarea's value has changed (when wrapped in Field.Root).
`data-touched`	Present when the textarea has been touched (when wrapped in Field.Root).
`data-filled`	Present when the textarea is filled (when wrapped in Field.Root).
`data-focused`	Present when the textarea is focused (when wrapped in Field.Root).