Textarea

Multiline input field for large amounts of text

Use the Textarea component to provide a multi-line input field where users can enter larger amounts of text. Unlike a standard input field, which is typically single-line, a textarea allows for more extensive text entry, such as paragraphs or multiple lines of content.

Preview

0 words

---
import { Textarea } from 'webcoreui/astro'
---

<Textarea
    placeholder="Leave us a message"
    className="message"
/>
<span class="word-count">0 words</span>

<script>
    const textarea = document.querySelector('.message')
    const wordCountElement = document.querySelector('.word-count')

    let wordCount = 0

    textarea.addEventListener('keyup', e => {
        wordCount = e.target.value
            ? e.target.value.trim().split(/\s+/).length
            : 0

        wordCountElement.innerText = `${wordCount} words`
    })
</script>

<script>
    import { Textarea } from 'webcoreui/svelte'

    let wordCount = 0
</script>

<Textarea
    placeholder="Leave us a message"
    onKeyUp={e => {
        wordCount = e.target.value
            ? e.target.value.trim().split(/\s+/).length
            : 0
    }}
/>
<span>{wordCount} words</span>

import React, { useState } from 'react'
import { Textarea } from 'webcoreui/react'

const Component = () => {
    const [wordCount, setWordCount] = useState(0)

    return (
        <React.Fragment>
            <Textarea
                placeholder="Leave us a message"
                onKeyUp={e => {
                    setWordCount(e.target.value
                        ? e.target.value.trim().split(/\s+/).length
                        : 0
                    )
                }}
            />
            <span>{wordCount} words</span>
        </React.Fragment>
    )
}

export default Component

Labeled Textarea

Textareas can also be created with labels using the label prop. Optionally, additional text can be displayed using the subText prop:

Bug Report

Please include relevant links and images.

<Textarea
    placeholder="Describe your bug"
    label="Bug Report"
/>
<Textarea
    placeholder="Describe your bug"
    label="Bug Report"
    subText="Please include relevant links and images."
/>

States

You can modify the default state of your textareas by using the disabled and value props:

Textarea with default value

Disabled textarea

<Textarea
    label="Textarea with default value"
    value="This textarea has a default value"
/>
<Textarea
    label="Disabled textarea"
    disabled={true}
    value="This textarea has a default value, but it's disabled."
/>

API

type TextareaProps = {
    label?: string
    placeholder?: string
    subText?: string
    value?: string
    disabled?: boolean
    className?: string
}

type SvelteTextareaProps = {
    onChange?: (e: any) => any
    onKeyUp?: (e: any) => any
} & TextareaProps

type ReactTextareaProps = {
    onChange?: (e: any) => any
    onKeyUp?: (e: any) => any
} & TextareaProps

Prop	Purpose
`label`	Set a label for the textarea.
`placeholder`	Set a placeholder for the textarea.
`subText`	Specify additional text below the textarea. The string can include HTML tags.
`value`	Set a default value for the textarea.
`disabled`	Disable the textarea.
`className`	Pass additional CSS classes for the textarea.

Svelte & React Prop	Purpose
`onChange`	Attach on-change event listeners.
`onKeyUp`	Attach on-keyup event listeners.

<- Tabs Theme Switcher ->

Request improvement for this page