Textarea

Displays a form textarea or a component that looks like a textarea.

Basic

Value:

Example

Auto Height

Automatically adjusts its height based on the content.

Example

Disabled

Example

With Label

Your Message

Your message will be copied to the support team.

Example

With Character Count

Bio

I am a software engineer based in San Francisco. I love building things for the web.

84 / 100

Example

With Clear Button

Example

Error State

Error State

Please enter a valid message.

Example

Sizes

Extra Small (xs)

Small (sm)

Default

Medium (md)

Large (lg)

Extra Large (xl)

2X Large (2xl)

Example

Resize Behavior

You can control the resize behavior using the resize prop.

No Resize (none)

Vertical (Default)

Horizontal

Example

Theming

You can customize the appearance of the textarea using Tailwind CSS classes or by overriding the CSS variables in your global CSS.

Global Theme Configuration

The BrTextarea component respects the global theme configuration provided by BrConfigProvider.

<script setup>
import { BrConfigProvider, BrTextarea } from '@breezeui/vue'

const theme = {
  primary: '#10b981', // Emerald 500
  radius: 0.75, // 0.75rem
}
</script>

<template>
  <BrConfigProvider :theme="theme">
    <BrTextarea placeholder="Themed Textarea" />
  </BrConfigProvider>
</template>

Tailwind Customization

You can also use class prop to add custom styles:

<BrTextarea class="border-purple-500 focus-visible:ring-purple-500 min-h-[150px]" />

API

Props

Prop	Type	Default	Description
modelValue	string | number	-	The value of the textarea.
defaultValue	string | number	-	The default value of the textarea.
disabled	boolean	false	Whether the textarea is disabled.
readonly	boolean	false	Whether the textarea is read-only.
placeholder	string	-	Placeholder text.
size	default | xs | sm | md | lg | xl | 2xl	default	The size of the textarea.
error	boolean	false	Whether to show error state.
clearable	boolean	false	Whether to show a clear button when input has value.
autoSize	boolean | object	false	Whether to automatically adjust height.
rows	number | string	3	The visible number of lines.
maxlength	number | string	-	The maximum number of characters allowed.
showCount	boolean	false	Whether to show character count (requires maxlength).
resize	none | vertical | horizontal | both	vertical	The resize behavior.

Events

Name	Payload	Description
update:modelValue	string | number	Emitted when textarea value changes.
clear	-	Emitted when the clear button is clicked.
input	Event	Emitted when the textarea value changes.
change	Event	Emitted when the textarea value changes (on blur).
focus	Event	Emitted when the textarea is focused.
blur	Event	Emitted when the textarea is blurred.