Textarea

Textarea lets you create accessible textareas. The API is pretty much the same as TextInput.

Same Markup as TextInput

Textarea has possibly the simplest markup you’ll ever see. The minimum you need is just name and label.

<Textarea name="message" label="Message" />

Message

Accessible hint text and error messages

Just use hint and error properties to add them.

<Textarea
  name="message"
  label="Message"
  hint="Write anything you want!"
/>

<Textarea
  name="message"
  label="Message"
  error="Please keep conversations here friendly and fun."
/>

Hint only

Message

Write anything you want!

Error only

Message Please keep conversations here friendly and fun.

Auto-growing textarea

Textarea can grow automatically according to its contents. To activate this feature, just set autogrow to true.

<Textarea
  name="message"
  label="Message"
  options={{ autogrow: true }}
/>

<Textarea
  name="message"
  label="Message"
  options={{ autogrow: true }}
  client:load
/>

Message

Give this a try!

Add items before or after the textarea

Like TextInput, Textarea comes with before and after slots for you to add on elements easily.

<Textarea name="message" label="Message">
  <button slot="after">Send</button>
</Textarea>

Before slot

Message

We get all the tiny details right too. Try it out: Focus on the send button and you’ll see a nice-looking outline that doesn’t include the divider!

Add items before or after the textarea

Like TextInput, Textarea comes with before and after slots for you to add on elements easily.

<Textarea name="message" label="Message">
  <button slot="after">Send</button>
</Textarea>

Before slot

Message

We get all the tiny details right too. Try it out: Focus on the send button and you’ll see a nice-looking outline that doesn’t include the divider!

Basic Usage

Textarea creates a textarea.

<script>
  import { Textarea } from '@splendidlabz/svelte'
</script>

<Textarea name="message" label="Message"/>

Hint Text

You can create hint text for each Textarea by adding a hint property.

<Textarea
  name="guide-message-2"
  label="Message"
  hint="Write anything you want!"
/>

Error Messages

You can create error messages for each Textarea by adding an error property.

<Textarea
  name="guide-message-error"
  label="Message"
  error="Please be civil 🤬"
/>

Default value

Use the value property to set a default value.

<Textarea
  name="fav-pokemon"
  label="Favourite Pokemon"
  value="Pikachu and Clefairy"
/>

Placeholders

Use the placeholder property to add a placeholder.

<Textarea
  name="fav-superheroes"
  label="List your favourite superheroes"
  placeholder="Anyone that resonates with you!"
/>

Readonly and Disabled states

Use readonly and disabled respectively to create and readonly and disabled states. These two states have a similar style (greyed out) but different behavior:

readonly will send data to the server when the form is submitted
disabled will not send data to the server when the form is submitted.

<!-- Readonly -->
<Textarea name="readonly" label="Disabled Textarea" readonly />

<!-- Disabled -->
<Textarea name="disabled" label="Readonly Textarea" disabled />

Other attributes

All other attributes will be added directly to the textarea element.

Auto-growing Textarea

If you set autogrow to true, Textarea will automatically grow in height as you type. This feature requires JavaScript.

<Textarea name="message" label="Message" options={{ autogrow: true }} />

<Textarea
  name="message"
  label="Message"
  options={{ autogrow: true }}
  client:load
/>

InputGroup and slots

To keep things consistent with TextInput, Textarea contains two slots: before and after.

before lets you create a prefix for the textarea
after lets you create a suffix for the textarea

<Textarea name="slot-message" label="Message">
  <span slot="before">Before</span>
  <span slot="after">after</span>
</Textarea>

Binding and Event Listeners

Note

The contents of this section will only work in a .svelte file and not inside an .astro file.

Binding

You can bind to the <textarea> element with ref. This is useful if you need the element when handling events.

<script>
  let textareaRef = null
</script>

<Textarea ref={textareaRef}>

Events

The following events are supported by Textarea right now:

input
change
focus
blur
keydown
keyup
keypress
click

You can listen to these the way Svelte handles event listeners.

<script>
  function handleInput(event) {
    console.log(event.target.value)
  }
</script>

<Textarea on:input={handleInput}>

Note

We forward the above events manually because Svelte 4 doesn’t have automatic event-forwarding capability. All events will be forwarded automatically when we migrate to Svelte 5.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Basic Styles

Textarea uses several styles from both Splendid Styles and Splendid Layouts. The easiest way to include all basic styles is to import all styles from both libraries:

// styles.scss
@use '@splendidlabz/layouts';
@use '@splendidlabz/styles';

/* styles.css */
@import '@splendidlabz/layouts';
@import '@splendidlabz/styles';

But if you wish to include only the necessary styles for Textarea, you can use the following rules:

// styles.scss
@use '@splendidlabz/styles/Forms/FormBase';
@use '@splendidlabz/styles/Forms/TextField';
@use '@splendidlabz/styles/Forms/Textarea';
@use '@splendidlabz/layouts/Layouts/Micro/Divider';
@use '@splendidlabz/layouts/Layouts/Micro/Stack';

/* styles.css */
@import '@splendidlabz/styles/Forms/FormBase';
@import '@splendidlabz/styles/Forms/TextField';
@import '@splendidlabz/styles/Forms/Textarea';
@import '@splendidlabz/layouts/css/Layouts/Micro/Divider';
@import '@splendidlabz/layouts/css/Layouts/Micro/Stack';

HTML Output

Basic

Like TextInput, Textarea creates the following HTML when label and name are used:

<div class="TextField Textarea">
  <label class="Label" for="message-id">Label</label>
  <div class="InputGroup">
    <textarea id="message-id" name="message" type="text" />
  </div>
</div>

With Hint

If hint is added, Textarea creates an additional Hint element and adds links the Hint element to the <textarea> with aria-describedby.

<div class="TextField Textarea">
  <label class="Label" for="message-id">Label</label>
  <div id="message-hint" class="Hint">Hint</div>
  <div class="InputGroup">
    <textarea
      id="message-id"
      name="message"
      type="text"
      aria-describedby="message-hint"
    />
  </div>
</div>

With Error

If error is added, Textarea creates an additional Error element (using <output>). It also links the error element to the <textarea> with aria-describedby:

<div class="TextField Textarea">
  <label class="Label" for="message-id">Label</label>
  <output id="message-error" class="Error" for="message-id">Error</output>
  <div class="InputGroup">
    <textarea id="message-id" name="message" aria-describedby="message-error" />
  </div>
</div>

With Hint and Error

If both hint and error are added, Textarea creates both hint and error elements, and links them both to the <textarea> with aria-describedby:

<div class="TextField Textarea">
  <label class="Label" for="message-id">Label</label>
  <output id="message-error" class="Error" for="message-id">Error</output>
  <div class="InputGroup">
    <textarea
      id="message-id"
      name="message"
      type="text"
      aria-describedby="message-hint name-error"
    />
  </div>
</div>

Before and After slots

If you added before or after slots, Textarea will create these elements inside InputGroup, before or after the <textarea> element.

<div class="TextField Textarea">
  <label class="Label" for="message-id">Label</label>
  <div class="InputGroup">
    <!-- Before slot -->
    <div slot="before">Before Slot Content</div>
    <div class="Divider-vertical"></div>

    <textarea
      id="message-id"
      name="message"
      type="text"
      aria-describedby="message-error"
    />

    <!-- After slot -->
    <div class="Divider-vertical"></div>
    <div slot="after">After Slot Content</div>
  </div>
</div>

Properties and Classes

The following classes are used by Textarea:

Class	Description
`Textarea`	Styles the Textarea container
`TextField`	Styles the Textarea container. Also used for `TextInput`
`Label`	Styles the label
`Hint`	Styles the hint element
`Error`	Styles for the error element
`InputGroup`	Styles the input group
`Field`	Styles for the `<textarea>` field.

The following properties can be used to add classes to Textarea.

Property	Description
`class`	Add classes to the `Textarea`
`styles`	Inline styles to the `Textarea`
`labelClass`	Add classes to the label
`hintClass`	Add classes to the hint element
`errorClass`	Add classes to the error element
`inputGroupclass`	Add classes to the input group
`fieldClass`	Add classes to the `<textarea>` field

All other custom properties will be passed directly into the <textarea> element.

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.

Slots

Name	Description
`before`	Inserts HTML before `<textarea>`
`after`	Inserts HTML after `<textarea>`

Properties

Use these properties to customize the Textarea component.

Property	Type	Description
`name`	`string`	Name of the textarea field (required)
`label`	`string`	The label
`hint`	`string`	Hint text
`error`	`string`	Error text
`value`	`string`	Textarea value
`placeholder`	`string`	Placeholder text
`disabled`	`boolean`	Adds the `disabled` state when present.
`readonly`	`boolean`	Adds the `readonly` state when present.
`required`	`boolean`	Adds the `required` state when present.
`ref`	`object`	Reference for the `<textarea>` element
`options`	`object`	Options for Textarea. See `options`

Types

Options

Configuration object Textarea component.

Property	Type	Default	Description
`autogrow`	`boolean`	`false`	Whether textarea should grow with content

Please login to view this content

Splendid Labz is free because we love developers and we want to contribute back to the ecosystem.

We only charge for access to the documentation to keep the project going. If you don't wish to pay, feel free to use the content from the features tab, our blogs or our videos as your guide.