Textarea

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

Component Features

📏 Multiple Sizes: Supports xs, sm, md, lg, xl, 2xl, default size specs.
📐 Auto Height: Supports autoSize prop to automatically adjust height based on content.
❌ Clearable: Supports displaying a clear button.
⚠️ Error State: Supports error prop to display error state.
📝 Character Count: Supports showCount and maxlength props for character counting.
🔄 Resize Control: Supports resize prop controlling resize behavior (none/vertical/horizontal/both).
📝 Readonly & Disabled: Supports readonly and disabled props.
🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

Basic

<script setup>
import { ref } from 'vue'
const text = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrTextarea v-model="text" placeholder="Type your message here." />
    <p class="text-xs text-muted-foreground">Value: {{ text }}</p>
  </div>
</template>

Auto Height

Automatically adjusts its height based on the content.

<script setup>
import { ref } from 'vue'
const message = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrTextarea 
      v-model="message" 
      placeholder="Type many lines to see auto resize..." 
      auto-size 
    />
  </div>
</template>

Disabled

<template>
<div class="space-y-2">
  <BrTextarea disabled placeholder="Disabled Textarea" />
</div>
</template>

With Label

<template>
<div class="grid w-full gap-1.5">
  <BrLabel for="message-2">Your Message</BrLabel>
  <BrTextarea id="message-2" placeholder="Type your message here." />
  <p class="text-sm text-muted-foreground">
    Your message will be copied to the support team.
  </p>
</div>
</template>

With Character Count

<script setup>
import { ref } from 'vue'
const bio = ref('I am a software engineer based in San Francisco. I love building things for the web.')
</script>

<template>
  <div class="space-y-2">
    <BrLabel for="bio">Bio</BrLabel>
    <BrTextarea 
      id="bio" 
      v-model="bio" 
      placeholder="Tell us about yourself." 
      :maxlength="100" 
      show-count 
    />
  </div>
</template>

With Clear Button

<template>
<div class="space-y-2">
  <BrTextarea placeholder="Type to see clear button" clearable />
</div>
</template>

Error State

<template>
<div class="grid w-full gap-1.5">
  <BrLabel for="message-error">Error State</BrLabel>
  <BrTextarea id="message-error" placeholder="Type here..." error />
  <p class="text-sm text-destructive">
    Please enter a valid message.
  </p>
</div>
</template>

Sizes

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

<template>
  <div class="grid w-full gap-4">
    <div class="grid w-full gap-1.5">
      <BrLabel>Extra Small (xs)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="xs" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Small (sm)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="sm" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Default</BrLabel>
      <BrTextarea placeholder="Type your message here." />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Medium (md)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="md" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Large (lg)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="lg" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>Extra Large (xl)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="xl" />
    </div>
    <div class="grid w-full gap-1.5">
      <BrLabel>2X Large (2xl)</BrLabel>
      <BrTextarea placeholder="Type your message here." size="2xl" />
    </div>
  </div>
</template>

Resize Behavior

You can control the resize behavior using the resize prop.

<template>
<div class="grid w-full gap-4">
  <div class="grid w-full gap-1.5">
    <BrLabel>No Resize (none)</BrLabel>
    <BrTextarea placeholder="Cannot resize" resize="none" />
  </div>
  <div class="grid w-full gap-1.5">
    <BrLabel>Vertical (Default)</BrLabel>
    <BrTextarea placeholder="Resize vertically" resize="vertical" />
  </div>
  <div class="grid w-full gap-1.5">
    <BrLabel>Horizontal</BrLabel>
    <BrTextarea placeholder="Resize horizontally" resize="horizontal" />
  </div>
</div>
</template>

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.


<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.

#Textarea

#Component Features

#Basic

#Auto Height

#Disabled

#With Label

#With Character Count

#With Clear Button

#Error State

#Sizes

#Resize Behavior

#Theming

#Global Theme Configuration

#Tailwind Customization

#API

#Props

#Events