Field

Fields are used to add functionality to controls and to attach/group components and elements together

These components should be used as a direct child of Field:

  • Autocomplete
  • Checkbox Button
  • Datepicker
  • Input
  • Radio Button
  • Select
  • Taginput
  • Timepicker
  • Upload
  • .control elements (html class)

This email is invalid

This username is available

Password is too short
Password must have at least 8 characters

<template>
    <section>
        <b-field label="Name">
            <b-input value="Kevin Garvey"></b-input>
        </b-field>

        <b-field label="Email"
            type="is-danger"
            message="This email is invalid">
            <b-input type="email"
                value="john@"
                maxlength="30">
            </b-input>
        </b-field>

        <b-field label="Username"
            type="is-success"
            message="This username is available">
            <b-input value="johnsilver" maxlength="30"></b-input>
        </b-field>

        <b-field label="Password"
            type="is-warning"
            :message="['Password is too short', 'Password must have at least 8 characters']">
            <b-input value="123" type="password" maxlength="30"></b-input>
        </b-field>

        <b-field label="Subject">
            <b-select placeholder="Select a subject">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
            </b-select>
        </b-field>
    </section>
</template>

Object syntax

New! 0.7.0

You can also use object syntax for type and message props just like Vuejs class.

Username is not available

Password is too short
Password must have at least 8 characters

<template>
    <section>
        <b-checkbox v-model="hasError">Show errors</b-checkbox>

        <b-field label="Username"
            :type="{ 'is-danger': hasError }"
            :message="{ 'Username is not available': hasError }">
            <b-input value="johnsilver" maxlength="30"></b-input>
        </b-field>

        <b-field label="Password"
            :type="{ 'is-danger': hasError }"
            :message="[
                { 'Password is too short': hasError },
                { 'Password must have at least 8 characters': hasError }
            ]">
            <b-input value="123" type="password" maxlength="30"></b-input>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                hasError: true
            }
        }
    }
</script>

Addons

The above cited components are automatically attached together when inside a Field.

Use the expanded prop on the control to fill up the remaining space.

Note: Beware of its responsiveness, avoid large groups of addons since they don't break lines.

@gmail.com


<template>
    <section>
        <b-field>
            <b-input placeholder="Search..."
                type="search"
                icon="magnify">
            </b-input>
            <p class="control">
                <button class="button is-primary">Search</button>
            </p>
        </b-field>

        <b-field>
            <b-input placeholder="This is expanded" expanded></b-input>
            <p class="control">
                <span class="button is-static">@gmail.com</span>
            </p>
        </b-field>

        <hr>

        <b-field>
            <b-select placeholder="Currency">
                <option>$</option>
                <option>£</option>
                <option></option>
            </b-select>
            <b-input type="number" placeholder="0,00"></b-input>
            <p class="control">
                <button class="button is-success">Transfer</button>
            </p>
        </b-field>

        <b-field>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-bold"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-italic"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-underline"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-align-left"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-align-center"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon icon="format-align-right"></b-icon>
                </button>
            </p>
            <b-input placeholder="Search..." type="search" icon="magnify"></b-input>
        </b-field>

        <b-field>
            <p class="control">
                <button class="button is-primary">
                    Button
                </button>
            </p>
            <p class="control">
                <b-dropdown>
                    <button class="button is-primary" slot="trigger">
                        <b-icon icon="menu-down"></b-icon>
                    </button>

                    <b-dropdown-item>Action</b-dropdown-item>
                    <b-dropdown-item>Another action</b-dropdown-item>
                    <b-dropdown-item>Something else</b-dropdown-item>
                </b-dropdown>
            </p>
        </b-field>

        <b-field>
            <p class="control">
                <b-dropdown>
                    <button class="button" slot="trigger">
                        <span>Filters</span>
                        <b-icon icon="menu-down"></b-icon>
                    </button>

                    <b-dropdown-item value="open_issues">Open Issues and Pull Requests</b-dropdown-item>
                    <b-dropdown-item value="your_issues">Your Issues</b-dropdown-item>
                    <b-dropdown-item value="pull_requests">Your Pull Requests</b-dropdown-item>
                    <b-dropdown-item value="everything">Everything</b-dropdown-item>
                </b-dropdown>
            </p>
            <b-input icon="magnify" type="search" placeholder="Search..."></b-input>
        </b-field>
    </section>
</template>

Groups

You can group those components together with the grouped property.

Use the expanded prop on the control to fill up the remaining space.

<template>
    <section>
        <b-field grouped>
            <b-input placeholder="Search..."></b-input>
            <p class="control">
                <button class="button is-primary">Search</button>
            </p>
        </b-field>

        <b-field grouped>
            <b-input placeholder="Search..." expanded></b-input>
            <p class="control">
                <button class="button is-primary">Search</button>
            </p>
        </b-field>
    </section>
</template>

Nested groups

Nested Fields can be grouped as well, you have to use the expanded prop on the Field to fill up the remaining space.

<template>
    <b-field grouped>
        <b-field label="Personal title">
            <b-select>
                <option>Mr.</option>
                <option>Ms.</option>
            </b-select>
        </b-field>
        <b-field label="Name" expanded>
            <b-input></b-input>
        </b-field>
        <b-field label="Email" expanded>
            <b-input></b-input>
        </b-field>
    </b-field>
</template>

Responsive groups

Add the group-multiline prop to allow controls to fill up multiple lines. This is ideal for a long list of controls.

<template>
    <b-field grouped group-multiline>
        <b-input></b-input>
        <p class="control">
            <button class="button">First</button>
        </p>
        <p class="control">
            <button class="button">Second</button>
        </p>
        <p class="control">
            <button class="button">Third</button>
        </p>
        <p class="control">
            <button class="button">Fourth</button>
        </p>
        <p class="control">
            <button class="button">Fifth</button>
        </p>
        <p class="control">
            <button class="button">Sixth</button>
        </p>
        <p class="control">
            <button class="button">Seventh</button>
        </p>
        <p class="control">
            <button class="button">Eighth</button>
        </p>
    </b-field>
</template>

Positions

Add the position prop to modify its alignment.


<template>
    <section>
        <b-field position="is-centered">
            <b-input placeholder="Search..." type="search" icon="magnify">
            </b-input>
            <p class="control">
                <button class="button is-info">Search</button>
            </p>
        </b-field>

        <hr>

        <b-field grouped position="is-right">
            <b-input placeholder="Search..." type="search" icon="magnify">
            </b-input>
            <p class="control">
                <button class="button is-info">Search</button>
            </p>
        </b-field>
    </section>
</template>

Combining addons and groups

<template>
    <b-field grouped>
        <b-field label="Name" expanded>
            <b-field>
                <b-select placeholder="Title">
                    <option>Mr.</option>
                    <option>Ms.</option>
                </b-select>
                <b-input placeholder="Name" expanded></b-input>
            </b-field>
        </b-field>
        <b-field label="Email" expanded>
            <b-input placeholder="some@email.com"></b-input>
        </b-field>
    </b-field>
</template>

Horizontal

Add the horizontal prop for aligning label and control in horizontal forms.

Note: Each child element of a <b-field horizontal/> will be automatically wrapped inside a Field component.

Please enter a subject

<template>
    <section>
        <b-field horizontal label="Subject" type="is-danger" message="Please enter a subject">
            <b-input name="subject" expanded></b-input>
        </b-field>

        <b-field horizontal label="From">
            <b-input name="name" placeholder="Name" expanded></b-input>
            <b-input name="email" type="email" placeholder="nobody@nowhere.com" expanded></b-input>
        </b-field>

        <b-field horizontal label="Topic">
            <b-select placeholder="Select a topic">
                <option value="1">Bulma</option>
                <option value="2">Vue.js</option>
                <option value="3">Buefy</option>
            </b-select>
        </b-field>

        <b-field horizontal label="Message">
            <b-input type="textarea"></b-input>
        </b-field>

        <b-field horizontal><!-- Label left empty for spacing -->
            <p class="control">
                <button class="button is-primary">
                  Send message
                </button>
            </p>
        </b-field>

    </section>
</template>

Label classes

Add the custom-class prop to adjust the styling of the label.

This email is invalid

<template>
    <section>
        <b-field label="Small" custom-class="is-small">
            <b-input value="Kevin Garvey" size="is-small"></b-input>
        </b-field>
        <b-field label="Large" custom-class="is-large">
            <b-input value="Kevin Garvey" size="is-large"></b-input>
        </b-field>

        <b-field label="Danger"
            custom-class="has-text-danger"
            type="is-danger"
            message="This email is invalid">
            <b-input type="email"
                value="john@"
                maxlength="30">
            </b-input>
        </b-field>

        <b-field label="Multiple (small and success)"
            custom-class="is-small has-text-success"
            type="is-success"
            >
            <b-input value="johnsilver" maxlength="30" size="is-small"></b-input>
        </b-field>

        <b-field label="Computed (medium and primary)"
            :custom-class="classes"
            type="is-primary"
            >
            <b-input value="johnsilver" maxlength="30" size="is-medium"></b-input>
        </b-field>

    </section>
</template>

<script>
    export default {
        data() {
            return {
                firstClass: 'has-text-primary',
                secondClass: 'is-medium'
            }
        },
        computed: {
            classes() {
                return `${this.firstClass} ${this.secondClass}`
            }
        }
    }
</script>

API

Name
Description
Type
Values
Default
typeType (color) of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete String, Object is-white, is-black, is-light, is-dark, is-primary, is-info, is-success, is-warning, is-danger, and any other colors you've set in the $colors list on Sass
labelField label String
label-forSame as native for set on the label String
custom-classCSS classes to be applied on field label String
messageHelp message text String, Object, Array<String>, Array<Object>
groupedDirect child components/elements of Field will be grouped horizontally (see which ones at the top of the page) Boolean false
group-multilineAllow controls to fill up multiple lines, making it responsive Boolean false
positionWhich position should the addons appear, optional String is-centered, is-right
addonsField automatically attach controls together Boolean true
horizontalGroup label and control on the same line for horizontal forms Boolean false

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

Improve this page on GitHub