Input

Basic text input for forms.

Basic Usage

vue

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

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

Status

Disable or lock input with disabled and readonly.

vue

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

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

Size

Supports 4 sizes: mini - mini, small - small, default - default, large - large.

MiniSmallNormalLarge

vue

<template>
  <bp-radio-group v-model="size" class="mb-5" type="button">
    <bp-radio value="mini">Mini</bp-radio>
    <bp-radio value="small">Small</bp-radio>
    <bp-radio value="default">Normal</bp-radio>
    <bp-radio value="large">Large</bp-radio>
  </bp-radio-group>

  <bp-input style="width: 240px" :size clearable placeholder="Enter content" />
</template>

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

const size = ref("default");
</script>

Character Limit

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

Default character count mode

0/50

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

Separate Chinese/English count mode

中0英10/100

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

Custom count rule - word count only

6/30

Note: Custom rule that counts English words only

Custom count rule - Chinese characters only

0/20

Note: Custom rule that counts Chinese characters only

Hide max length

中0英0

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-input
          v-model="defaultText"
          placeholder="Enter text"
          :maxlength="50"
          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-input
          v-model="mixedText"
          placeholder="Enter mixed Chinese/English text"
          :maxlength="100"
          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-input
          v-model="wordText"
          placeholder="Enter English text"
          :maxlength="30"
          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-input
          v-model="chineseText"
          placeholder="Enter Chinese text"
          :maxlength="20"
          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-input
          v-model="noLimitText"
          placeholder="Enter text"
          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');

// Custom count - words
const wordText = ref('Hello world, this is a test');

// Custom count - Chinese only
const chineseText = ref('This is Chinese text');

// No max length
const noLimitText = ref('');

/**
 * 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 {
  padding: 20px;
  max-width: 600px;
  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>

Prefix and Suffix

Add leading or trailing elements with prefix and suffix.

+86

vue

<template>
  <bp-space>
    <bp-input placeholder="Enter phone number">
      <template #prefix> +86 </template>
    </bp-input>
    <bp-input clearable placeholder="Enter content">
      <template #suffix>
        <IconSearch2Line />
      </template>
    </bp-input>
  </bp-space>
</template>

<script setup lang="ts">
import { IconSearch2Line } from "birdpaper-icon";
</script>

Password

Set type to password for masked input.

vue

<template>
  <bp-input v-model="psw" type="password" style="width: 180px" clearable placeholder="Enter password" />
</template>

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

Input Props

v-model	Bound value	String	-	-
id	Input id	String	-	-
name	Input name	String	-	-
type	Input type	InputType	text	-
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	-	-
show-password	Whether to show password toggle	Boolean	true	-
readonly	Whether readonly	Boolean	false	-
disabled	Whether disabled	Boolean	false	-
clearable	Whether clearable	Boolean	false	-
is-round	Whether rounded	Boolean	false	-
auto-focus	Whether autofocus	Boolean	false	-

Input 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	-
enter	Triggered on enter	{ev: Event, value: String}	-

Input Slots

default	Custom input content	-	-
prefix	Prefix element	-	-
suffix	Suffix element	-	-

Input Methods

focus	Focus	-	-	-
blur	Blur	-	-	-
triggerEye	Toggle password visibility	-	Visibility after toggle {Boolean}	-
clear	Clear the input	-	-	-

Input ​

Basic Usage ​

Status ​

Size ​

Character Limit ​