Search documentation v0.6.1

Textarea

Multiline input field for large amounts of text

Source ↗️ Report Issue ↗️

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
How to use Textareas in Astro
---
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>
How to use Textareas in Svelte
<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>
How to use Textareas in React
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:

<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
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
PropPurpose
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 PropPurpose
onChange Attach on-change event listeners.
onKeyUp Attach on-keyup event listeners.

Request improvement for this page