Select | Buval

Select

Select an item in a dropdown list. Use with Field to access all functionalities

The select class is a simple wrapper around the <select> HTML element, which gives the styling more flexibility and support for icons.

Several modifiers are supported which affect:

the color is available in all the different colors defined by the $colors Sass map.
the size: is-small, is-medium, is-large
the state

<div class="select">
    <select>
        <option>Select dropdown</option>
        <option>With options</option>
    </select>
</div>

Multiple select

You can style a multiple select dropdown, by using the is-multiple modifier, and by using the multiple HTML attribute.

<div class="select is-multiple">
    <select multiple size="8">
        <option value="Argentina">Argentina</option>
        <option value="Bolivia">Bolivia</option>
        <option value="Brazil">Brazil</option>
        <option value="Chile">Chile</option>
        <option value="Colombia">Colombia</option>
        <option value="Ecuador">Ecuador</option>
        <option value="Guyana">Guyana</option>
        <option value="Paraguay">Paraguay</option>
        <option value="Peru">Peru</option>
        <option value="Suriname">Suriname</option>
        <option value="Uruguay">Uruguay</option>
        <option value="Venezuela">Venezuela</option>
    </select>
</div>

With icons

You can append the modifier on a control:

has-icons-left

You also need to add a modifier on the icon:

icon is-left since has-icons-left is used

The size of the select will define the size of the icon container.

<div class="field">
    <div class="control has-icons-left">
        <div class="select">
            <select>
                <option selected>Country</option>
                <option>Select dropdown</option>
                <option>With options</option>
            </select>
        </div>
        <div class="icon is-small is-left">
            <i class="fas fa-globe"></i>
        </div>
    </div>
</div>

Simple

Grouped

Error

Something went wrong with this field

Rounded

Required

Disabled

Disabled option

Expanded

<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="user">
                <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" icon-pack="mdi">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </b-select>
        </b-field>

        <b-field>
            <b-select placeholder="Client" icon="account" icon-pack="mdi">
                <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">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </b-select>
        </b-field>

        <b-field>
            <b-select placeholder="Client" icon="user">
                <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	Value	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`	`fa`
`native-size`	Same as native `size`	Number	—	`4`
Any native attribute	—	—	—	—

Name	Description	Parameters
`input`	Triggers when value is changed	`value: Any`
`focus`	Triggers when input has received focus	`event: $event`
`blur`	Triggers when input has lost focus	`event: $event`
`[any].native`	Listen to any native event, e.g. `click.native`	`event: $event`

Name	Description	Parameters	Return
`checkHtml5Validity`	Check validation of HTML5 (add the message and type/color), also updates the `isValid` property		`isValid: Boolean`
`focus`	Set focus		—