Select

Choose one or more options from a dropdown list.

Basic Usage

Single

Current:

Using the label prop

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Single</div>
      <bp-select v-model="val" placeholder="Please select" style="width: 240px">
        <bp-option value="beijing">Beijing</bp-option>
        <bp-option value="shanghai">Shanghai</bp-option>
        <bp-option value="guangzhou">Guangzhou</bp-option>
        <bp-option value="shenzhen">Shenzhen</bp-option>
      </bp-select>
      <div class="value">Current: {{ val }}</div>
    </div>
    <div>
      <div class="label">Using the label prop</div>
      <bp-select v-model="val2" placeholder="Please select" style="width: 240px">
        <bp-option :value="1" label="Option 1" />
        <bp-option :value="2" label="Option 2" />
        <bp-option :value="3" label="Option 3" />
      </bp-select>
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref<number | "">("");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
.value {
  font-size: 13px;
  color: #4e5969;
  margin-top: 8px;
}
</style>

Multiple

Enable multi-select with multiple and optional max-tag-count.

Multiple

Option 1

Option 3

Show at most 2 tags

Option 1

Option 2

+2...

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Multiple</div>
      <bp-select v-model="val1" multiple placeholder="Please select" style="width: 240px">
        <bp-option :value="1">Option 1</bp-option>
        <bp-option :value="2">Option 2</bp-option>
        <bp-option :value="3">Option 3</bp-option>
        <bp-option :value="4">Option 4</bp-option>
        <bp-option :value="5">Option 5</bp-option>
      </bp-select>
    </div>
    <div>
      <div class="label">Show at most 2 tags</div>
      <bp-select v-model="val2" multiple :max-tag-count="2" placeholder="Please select" style="width: 240px">
        <bp-option :value="1">Option 1</bp-option>
        <bp-option :value="2">Option 2</bp-option>
        <bp-option :value="3">Option 3</bp-option>
        <bp-option :value="4">Option 4</bp-option>
      </bp-select>
    </div>
  </div>
</template>

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

const val1 = ref([1, 3]);
const val2 = ref([1, 2, 3, 4]);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Size

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

MiniSmallNormalLarge

<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-select v-model="val" :size placeholder="Please select" clearable style="width: 220px">
    <bp-option value="1">Option 1</bp-option>
    <bp-option value="2">Option 2</bp-option>
    <bp-option value="3">Option 3</bp-option>
    <bp-option value="4">Option 4</bp-option>
  </bp-select>
</template>

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

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

Clearable

Allow clearing the value with clearable.

<template>
  <bp-select v-model="val" placeholder="Please select" clearable style="width: 220px">
    <bp-option value="1">Option 1</bp-option>
    <bp-option value="2">Option 2</bp-option>
    <bp-option value="3">Option 3</bp-option>
    <bp-option value="4">Option 4</bp-option>
  </bp-select>
</template>

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

Disabled

Disable the select or individual options.

Disabled option

Disable the entire selector

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Disabled option</div>
      <bp-select v-model="val" placeholder="Please select" style="width: 240px">
        <bp-option value="a">Option A</bp-option>
        <bp-option value="b" disabled>Option B (disabled)</bp-option>
        <bp-option value="c">Option C</bp-option>
        <bp-option value="d" disabled>Option D (disabled)</bp-option>
      </bp-select>
    </div>
    <div>
      <div class="label">Disable the entire selector</div>
      <bp-select v-model="val2" disabled placeholder="Please select" style="width: 240px">
        <bp-option value="a">Option A</bp-option>
        <bp-option value="b">Option B</bp-option>
      </bp-select>
    </div>
  </div>
</template>

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

const val = ref("");
const val2 = ref("a");
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Select Props

v-model	Bound value	SelectValue	-	-
name	Picker name	String	-	-
placeholder	Placeholder	String	-	-
size	Select size	InputSize	default	-
disabled	Whether disabled	Boolean	false	-
clearable	Whether clearable	Boolean	false	-
multiple	Whether multiple	Boolean	false	-
max-tag-count	Max visible tags	Number	0	-

Option Props

value	Bound value	SelectValue	-	-
label	Display text	String	-	-
disabled	Whether disabled	Boolean	false	-

Select Events

change

Triggered when the selection changes

val: SelectValue

-

Select Methods

open	Open the dropdown	-	-	-
close	Close the dropdown	-	-	-

Select Slots

default

Option list

-

-

Option Slots

default

Option content

-

-