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-modelBinding value Any
sizeSize of the select, optional String is-small, is-medium, is-large
placeholderText when nothing is selected String
loadingAdd the loading state to the Select Boolean false
expandedSelect will be expanded (full-width) Boolean false
iconIcon name to be added String
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
native-sizeSame as native size Number 4
Any native attribute

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub