Input

Basic form input component, supports both input and textarea.

Basic Usage

Input content：

<template>
  <div>
    <div style="margin-bottom: 10px">Input content：{{ value }}</div>
    <b-input v-model="value" placeholder="Please enter some text..." class="input-item"></b-input>
  </div>
</template>

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

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Icon and Clearable

Set clearable to show a clear button. Use icon to set an icon.

<template>
  <b-space>
    <b-input v-model="value" icon="eye-fill" class="input-item"></b-input>
    <b-input v-model="value1" clearable class="input-item"></b-input>
  </b-space>
</template>

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

const value = ref('')
const value1 = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Disabled and Readonly

Set disabled to disable the input. Set readonly for read-only mode.

<template>
  <div>
    <b-input v-model="value" placeholder="disabled" disabled class="input-item"></b-input>
    <b-input v-model="value1" placeholder="readonly" readonly class="input-item"></b-input>
  </div>
</template>

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

const value = ref('Disabled text')
const value1 = ref('Readonly input')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Combo Usage

Two methods are provided for inserting icons.

Props：

 

Slots：

 

prepend/append：

 

 

<template>
  <div>
    <p>Props：</p>
    <div>
      <b-input prefix="bulb-fill" clearable placeholder="Enter name" style="width: auto"></b-input>
      &nbsp;
      <b-input suffix="search" clearable placeholder="Enter text" style="width: auto"></b-input>
    </div>
    <p>Slots：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter name" style="width: auto">
        <template #prefix>
          <b-icon name="bulb-fill"></b-icon>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter text" clearable style="width: auto">
        <template #suffix>
          <b-icon name="search"></b-icon>
        </template>
      </b-input>
    </div>
    <p>prepend/append：</p>
    <div style="margin-top: 6px">
      <b-input placeholder="Enter text" style="width: auto" clearable>
        <template #prepend>
          <b-button>prepend</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
      &nbsp;
      <b-input placeholder="Enter name" style="width: auto" clearable>
        <template #prepend>
          <b-select v-model="type" clearable style="width: 100px">
            <b-option lable="email" value="email"></b-option>
            <b-option lable="phone" value="phone"></b-option>
          </b-select>
        </template>
        <template #append>
          <b-button>append</b-button>
        </template>
      </b-input>
    </div>
  </div>
</template>

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

const type = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Search

Search state can be configured.

<template>
  <div>
    <b-input v-model="value" search placeholder="Please enter some text..." class="input-item"></b-input>
  </div>
</template>

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

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Password Input

When entering a password, show/hide toggle is usually needed. An icon toggle will be displayed.

<template>
  <div>
    <b-input v-model="value" show-password-toggle type="password" class="input-item"></b-input>
  </div>
</template>

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

const value = ref('')
</script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Sizes

Three additional sizes are available: large, small, and mini.

<template>
  <b-row :gutter="10">
    <b-col span="6">
      <b-input size="large" clearable placeholder="large input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input clearable placeholder="default input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="small" clearable placeholder="small input"></b-input>
    </b-col>
    <b-col span="6">
      <b-input size="mini" clearable placeholder="mini input"></b-input>
    </b-col>
  </b-row>
</template>

Textarea

Set type="textarea" to enable textarea mode.

<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input
        type="textarea"
        :autosize="{ minRows: 2, maxRows: 6 }"
        placeholder="Auto size, draggable, max 6 rows"
      ></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="4" placeholder="Resize disabled, default 4 rows" no-resize></b-input>
    </div>
  </div>
</template>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Word Count

Set show-word-count to enable the word count display.

0/10

0

<template>
  <div flex="box:mean">
    <div class="input-item">
      <b-input :maxlength="10" show-word-count></b-input>
    </div>
    <div class="input-item">
      <b-input type="textarea" :rows="2" no-resize show-word-count></b-input>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
.input-item {
  width: 300px;
  margin-right: 20px;
}
</style>

Props

Parameter	Description	Type	Options	Default
type	Input type	string	text / password / textarea / url / email / date (Date) / number / tel	—
value	Bound value, supports v-model two-way binding	String / Number	—	—
size	Input size	large / small / default / mini	—	default
placeholder	Placeholder text	String	—	—
clearable	Show clear button	Boolean	—	false
disabled	Disabled state	Boolean	—	false
readonly	Read-only mode	Boolean	—	false
maxlength	Maximum input length	Number	—	—
icon	Suffix icon, only effective in text type	String	—	—
prefix	inputPrefix icon	String	—	—
suffix	inputSuffix icon	String	—	—
search	Whether to show as a search input	Boolean	—	false
rows	Default number of rows for textarea. Only effective in textarea mode	Number	—	2
autosize	Auto-resize height based on content. Only effective in textarea mode. Can pass an object, e.g.,	Boolean/Object	—	false
number	Convert user input to Number type	Boolean	—	false
autofocus	Auto focus	Boolean	—	false
autocomplete	Native autocomplete attribute. Accepted values: off, on	String	—	off
element-id	Set an id on the form element. See Form usage.	String	—	—
wrap	Native wrap attribute. Accepted values: hard, soft. Only effective in textarea mode	String	—	soft
no-resize	Disable textarea resize. Only effective in textarea mode	Boolean	—	false
show-word-count	Show word count. Only effective in textarea mode	Boolean	—	false
validate (Date)Event	Whether to trigger validation. Mainly for form usage. Select and other components also use this internally, set to false	Boolean	—	true

Input events

Method Name	Description	Return Value
enter	Triggers when Enter key is pressed	—
click	Triggers when the icon is clicked (requires icon prop)	—
change	Triggers when data changes	event
focus	Triggers when input gains focus	—
blur	Triggers when input loses focus	—
keyup	Native keyup event	event
keydown	Native keydown event	event
keypress	Native keypress event	event
search	Available when search is enabled. Triggers on search icon click or Enter key press	value
clear	Available when clearable is enabled. Triggers when the clear button is clicked	—

Input slot

Name	Description
prepend	Prepend content. Only effective in text type
append	Append content. Only effective in text type
prefix	inputPrefix icon
suffix	inputSuffix icon

Input methods

Method Name	Description	Return Value
focus	Manually focus the input	—