Textarea

Multi-line text input.

Basic Usage

vue

<template>
  <bp-textarea v-model="txt" clearable placeholder="Enter content" />
</template>

<script setup lang="ts">
import { ref } from "vue";
const txt = ref("");
</script>

Character Limit

Limit length with maxlength and show a counter via show-limit.

Default character count mode

0/100

Note: Count all characters including Chinese, English, digits, and symbols

Separate Chinese/English count mode

中0英64/200

Note: Count Chinese and English characters separately; format is "CN X / EN Y / max"

Custom count rule - word count only

15/50

Note: Custom rule that counts English words only

Custom count rule - Chinese characters only

0/30

Note: Custom rule that counts Chinese characters only

Hide max length

中0英64

Note: No max length; only show current character count

vue

<template>
  <div class="word-count-demo">
    <div class="demo-section">
      <h3>Default character count mode</h3>
      <div class="demo-item">
        <bp-textarea
          v-model="defaultText"
          placeholder="Enter text"
          :maxlength="100"
          :rows="4"
          show-limit
        />
        <p>Note: Count all characters including Chinese, English, digits, and symbols</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Separate Chinese/English count mode</h3>
      <div class="demo-item">
        <bp-textarea
          v-model="mixedText"
          placeholder="Enter mixed Chinese/English text"
          :maxlength="200"
          :rows="4"
          show-limit
          word-count-mode="chinese-english"
        />
        <p>Note: Count Chinese and English characters separately; format is "CN X / EN Y / max"</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Custom count rule - word count only</h3>
      <div class="demo-item">
        <bp-textarea
          v-model="wordText"
          placeholder="Enter English text"
          :maxlength="50"
          :rows="4"
          show-limit
          word-count-mode="custom"
          :custom-word-count="countWords"
        />
        <p>Note: Custom rule that counts English words only</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Custom count rule - Chinese characters only</h3>
      <div class="demo-item">
        <bp-textarea
          v-model="chineseText"
          placeholder="Enter Chinese text"
          :maxlength="30"
          :rows="4"
          show-limit
          word-count-mode="custom"
          :custom-word-count="countChineseOnly"
        />
        <p>Note: Custom rule that counts Chinese characters only</p>
      </div>
    </div>
    
    <div class="demo-section">
      <h3>Hide max length</h3>
      <div class="demo-item">
        <bp-textarea
          v-model="noLimitText"
          placeholder="Enter text"
          :rows="4"
          show-limit
          word-count-mode="chinese-english"
        />
        <p>Note: No max length; only show current character count</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// Default mode
const defaultText = ref('');

// CN/EN mixed mode
const mixedText = ref('Hello World\nThis is a multi-line text example\nThis is a multi-line text example');

// Custom count - words
const wordText = ref('Hello world, this is a test\nThis is a multi-line textarea\nWith multiple sentences');

// Custom count - Chinese only
const chineseText = ref('This is Chinese text\nwith multiple lines\nfor testing Chinese character counting');

// No max length
const noLimitText = ref('Hello World\nThis is a multi-line text example\nThis is a multi-line text example');

/**
 * Custom counter: word count
 * @param value Input value
 * @returns Word count
 */
const countWords = (value: string): number => {
  // Match English words
  const words = value.match(/\b[a-zA-Z]+\b/g);
  return words ? words.length : 0;
};

/**
 * Custom counter: Chinese characters only
 * @param value Input value
 * @returns Chinese character count
 */
const countChineseOnly = (value: string): number => {
  const chineseRegex = /[\u4e00-\u9fa5]/g;
  const chineseMatches = value.match(chineseRegex) || [];
  return chineseMatches.length;
};
</script>

<style scoped>
.word-count-demo {
  margin: 0 auto;
}

.demo-section {
  margin-bottom: 30px;
}

.demo-item {
  margin-bottom: 10px;
}

.demo-item p {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
}

h2 {
  color: #333;
  margin-bottom: 20px;
}

h3 {
  color: #555;
  margin-bottom: 15px;
}
</style>

Status

Disable or lock input with disabled and readonly.

Text content

vue

<template>
  <bp-space>
    <bp-textarea v-model="txt" clearable placeholder="Enter content" />
    <bp-textarea readonly v-model="txt" placeholder="Enter content" />
    <bp-textarea disabled v-model="txt" placeholder="Enter content" />
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const txt = ref("Text content");
</script>

Textarea Props

v-model	Bound value	String	-	-
id	Input id	String	-	-
name	Input name	String	-	-
placeholder	Placeholder	String	-	-
size	Input size	InputSize	default	-
maxlength	Max length	Number	-	-
show-limit	Whether to show length limit	Boolean	false	-
word-count-mode	Word-count mode	WordCountMode	default	-
custom-word-count	Custom word-count function	Function	null	-
readonly	Whether readonly	Boolean	false	-
disabled	Whether disabled	Boolean	false	-
clearable	Whether clearable	Boolean	false	-
rows	Number of rows	Number	3	-

Textarea Events

input	Triggered on input	{ev: Event, value: String}	-
focus	Triggered on focus	ev: Event	-
blur	Triggered on blur	ev: Event	-
keypress	Triggered on keydown	ev: Event	-
keyup	Triggered on keyup	ev: Event	-

Textarea Slots

suffix

Suffix content

Textarea Methods

focus	Focus	-	-	-
blur	Blur	-	-	-
clear	Clear the input	-	-	-

Textarea ​

Basic Usage ​

Character Limit ​