Select
Select an item in a dropdown list. Use with Field to access all functionalities
Something went wrong with this field
<template>
<section>
<b-field label="Simple">
<b-select placeholder="Select a name">
<option
v-for="option in data"
:value="option.id"
:key="option.id">
{{ option.user.first_name }}
</option>
</b-select>
</b-field>
<b-field label="Grouped">
<b-select placeholder="Select a character" icon="account">
<optgroup label="Black Sails">
<option value="flint">Flint</option>
<option value="silver">Silver</option>
<option value="vane">Vane</option>
<option value="billy">Billy</option>
<option value="jack">Jack</option>
</optgroup>
<optgroup label="Breaking Bad">
<option value="heisenberg">Heisenberg</option>
<option value="jesse">Jesse</option>
<option value="saul">Saul</option>
<option value="mike">Mike</option>
</optgroup>
<optgroup label="Game of Thrones">
<option value="tyrion-lannister">Tyrion Lannister</option>
<option value="jamie-lannister">Jamie Lannister</option>
<option value="daenerys-targaryen">Daenerys Targaryen</option>
<option value="jon-snow">Jon Snow</option>
</optgroup>
</b-select>
</b-field>
<b-field
label="Error"
type="is-danger"
message="Something went wrong with this field">
<b-select placeholder="Select a character">
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field label="Rounded">
<b-select placeholder="Select a character" rounded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field label="Required">
<b-select placeholder="Select a character" required>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field label="Loading">
<b-select placeholder="Select a character" loading>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field label="Disabled">
<b-select placeholder="Select a character" disabled>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field label="Disabled option">
<b-select placeholder="Select a character">
<option value="flint">Flint</option>
<option value="silver" disabled>Silver</option>
</b-select>
</b-field>
<b-field
label="Expanded">
<b-select placeholder="Select a character" expanded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
</section>
</template>
<script>
const data = require('@/data/sample.json')
export default {
data() {
return { data }
}
}
</script>
# Multiple
selected: []
<template>
<section>
<p class="content"><b>selected</b>: {{ selectedOptions }}</p>
<b-field>
<b-select
multiple
native-size="8"
v-model="selectedOptions">
<option value="flint">Flint</option>
<option value="silver">Silver</option>
<option value="vane">Vane</option>
<option value="billy">Billy</option>
<option value="jack">Jack</option>
<option value="heisenberg">Heisenberg</option>
<option value="jesse">Jesse</option>
<option value="saul">Saul</option>
<option value="mike">Mike</option>
</b-select>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
selectedOptions: []
}
}
}
</script>
# Icons
With Material Design Icons
With FontAwesome
<template>
<section>
<h3 class="subtitle">With Material Design Icons</h3>
<b-field>
<b-select placeholder="Country" icon="earth">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</b-select>
</b-field>
<b-field>
<b-select placeholder="Client" icon="account">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</b-select>
</b-field>
<h3 class="subtitle">With FontAwesome</h3>
<b-field>
<b-select
placeholder="Country"
icon="globe"
icon-pack="fas">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</b-select>
</b-field>
<b-field>
<b-select
placeholder="Client"
icon="user"
icon-pack="fas">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</b-select>
</b-field>
</section>
</template>
# Sizes
<template>
<section>
<b-field>
<b-select
placeholder="Small"
size="is-small"
expanded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field>
<b-select
placeholder="Default"
expanded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field>
<b-select
placeholder="Medium"
size="is-medium"
expanded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
<b-field>
<b-select
placeholder="Large"
size="is-large"
expanded>
<option value="flint">Flint</option>
<option value="silver">Silver</option>
</b-select>
</b-field>
</section>
</template>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | Any | — | — |
size | Size of the select, optional | String | is-small, is-medium, is-large | — |
placeholder | Text when nothing is selected | String | — | — |
loading | Add the loading state to the Select | Boolean | — | false |
expanded | Select will be expanded (full-width) | Boolean | — | false |
icon | Icon name to be added | String | — | — |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
native-size | Same as native size | Number | — | 4 |
| Any native attribute | — | — | — | — |
This page is open source. Noticed a typo or something's unclear?