Textarea

<Textarea> is a multi-line text input control. It is a wrapper around the native <textarea> element. The default events are forwarded from the input element.

Properties

Name
Default
Description
state
default
The state of the input. One of:
  • default
  • success
  • warning
  • error
rows
5
The number of rows to display.
cols
40
The number of columns to display.
block
false
Whether the textarea should be displayed as a block element.
textarea
A reference to the native <textarea> element (bindable).

All other properties are passed through to the native <textarea> element.

Slots

Name
Description
start
Content to be displayed at the start of the input.
end
Content to be displayed at the end of the input.

Examples

Basic

<Textarea 
    bind:value={myVal}
    placeholder="Enter some text"
/>

State

<Textarea placeholder="Default" />
<Textarea placeholder="Success" state="success" />
<Textarea placeholder="Warning" state="warning" />
<Textarea placeholder="Error" state="error" />

Block

<Textarea placeholder="Block Textarea" block />

Custom cols/rows

<Textarea placeholder="Custom cols/rows" cols={60} rows={10} />

Slots

<Textarea placeholder="Write a post">
    <IconPen slot="start" color="var(--text-light)" />
    <Loader slot="end" size="small" colorTrack="var(--accent-light)"/>
</Textarea>