Textarea

A simple textarea component with support for easy labels and placeholders.

Usage

'Read the “', Usage, '” section'

Preview

Label

Code

TextareaExample.astro

---
import { Textarea } from '@studiocms/ui/components/Button';
---

<Textarea label='Label' placeholder='Placeholder' />

Disabled

'Read the “', Disabled, '” section'

You can disable the textarea altogether by using the disabled prop.

Preview

Label

Code

DisabledTextareaExample.astro

---
import { Textarea } from '@studiocms/ui/components/Button';
---

<Textarea label='Label' placeholder='Placeholder' disabled />

Form Support

'Read the “', Form Support, '” section'

Textareas have full form support. You can use the isRequired and name attributes as needed.

The first one does what it says it does, while the latter sets the name attribute so you can access the textarea in, for example, the FormData returned by a submission. Here’s an example showing how to set both of them:

Preview

Label *

Code

FormTextareaExample.astro

---
import { Textarea } from '@studiocms/ui/components/Button';
---

<Textarea label='Label' placeholder='Placeholder' isRequired name='example-textarea' />

Note

If no name is set, a random one is generated for the component.