Select

Introduction to using the Select dropdown component

Select illustrative diagram

Select dropdown used to allow users to further filter selected data, or like radio buttons, to choose a specific value. Clicking the button opens a floating area containing a series of options. It looks similar to a Dropdown, but the main difference is that when an option in Select is clicked, the value becomes the option content and the floating area closes.

Theme color

<bpa-select v-model="value" :options="options" theme="primary" />

Size

<bpa-select v-model="value" :options="options" size="small" />

Placeholder text

<bpa-select v-model="value" :options="options" placeholder="placeholder"/>

Disabled

<bpa-select v-model="value" :options="options" disabled/>

Hide clear button

<bpa-select v-model="value" :options="options" disabledClear/>

Prefix and suffix

<bpa-select v-model="value" :options="options">
  <template v-slot:prefix>prefix</template>
  <template v-slot:affix>affix</template>
</bpa-select>

If the outer layer has position: fixed

To prevent the outer position state from affecting the popup position of the dropdown, add the fixed correction.

<bpa-select v-model="value" :options="options" fixed @click="onClick"/>

Inside bpa-form-item

When used inside the form item bpa-form-item, they need to be used together.

<bpa-form-item labelFor="bpa-select-{id}-btn">
    <bpa-select v-model="value" :options="options" :id="{id}" @click="onClick"/>
</bpa-form-item>

Customize the width of the dropdown popup

<bpa-select v-model="value" :options="options" optionWidth="100px" @click="onClick"/>

Multi-select mode

<!-- show all options -->
<bpa-select v-model="value" :options="options" multiple /> 

<!-- show first option, others using "n+" -->
<bpa-select v-model="value" :options="options" multiple="accordion" /> 

Option group

{
  label: 'First group',
  type: 'group',
    options: [
      { label: 'label10', value: '10' },
      { label: 'label20', value: '20' },
      { label: 'label30', value: '30' }
    ]
  }
}

Search options inside the dropdown

<bpa-select v-model="value" :options="options" multiple :toolbar="['search']"/>

By default autocomplete filtering of options starts after 0.8 seconds. To search manually: use "@search"

Attributes

Name	Value	Type	Default	Required	Note
id		String	random
size	small, large	String
v-model		String
options		Array<{ label: string, value: any }> | Array<{ label: string, type: 'group', options: Option[] >
disabled		Boolean	false
disabledClear		Boolean	false		Hide clear button
placeholder		String	Please select / select
theme	primary, success, warning, danger, primary-ghost, success-ghost, warning-ghost, danger-ghost	String
optionWidth		String
fixed		Boolean	false
v-slot:prefix					Custom area before the placeholder text
v-slot:affix					Custom area before the placeholder text
toolbar		Array<'search'>			Toolbar, currently supports search functionality
multiple		'accordion' or undefined			Multi-select, no value needed; to collapse options provide the value accordion
listboxClass		String			You can add a classname to the listbox

Events

Name	Parameters	Description
search	keyword	When the search input value changes
input

Demo