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 model-value="Kevin Garvey"></b-input>
        </b-field>

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

        <b-field label="Username"
            type="is-success"
            message="This username is available">
            <b-input model-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 model-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>

# Label Position

Since0.7.8

Add the label-position prop to modify field style.

You can set the defaultFieldLabelPosition constructor option to override the default style

This email is invalid

This username is available

Password is too short
Password must have at least 8 characters

My first tagMy second tag

Also works for grouped field and with addons.

<template>
    <section>
        <div class="block">
            <b-radio v-model="labelPosition"
                native-value="on-border">
                On Border
            </b-radio>
            <b-radio v-model="labelPosition"
                native-value="inside">
                Inside
            </b-radio>
        </div>

        <b-field label="Name" :label-position="labelPosition">
            <b-input model-value="Kevin Garvey"></b-input>
        </b-field>

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

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

        <b-field label="Password"
            :label-position="labelPosition"
            type="is-warning">
            <b-input model-value="123" type="password" maxlength="30"></b-input>
            <template #message>
                <div>Password is too short</div>
                <div>Password must have at least 8 characters</div>
            </template>
        </b-field>

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

        <b-field label="Message"
            :label-position="labelPosition">
            <b-input maxlength="200" type="textarea"></b-input>
        </b-field>

        <b-field label="Find a JS framework" :label-position="labelPosition">
            <b-autocomplete
                rounded
                :data="['jQuery', 'Vue', 'React']"
                placeholder="e.g. jQuery"
                icon="magnify"
                clearable
                @select="option => selected = option">
                <template #empty>No results found</template>
            </b-autocomplete>
        </b-field>

        <b-field label="Select a date" :label-position="labelPosition">
            <b-datepicker
                placeholder="Click to select..."
                icon="calendar-today"
                trap-focus>
            </b-datepicker>
        </b-field>

        <b-field label="Select datetime" :label-position="labelPosition">
            <b-datetimepicker
                rounded
                placeholder="Click to select..."
                icon="calendar-today"
                horizontal-time-picker>
            </b-datetimepicker>
        </b-field>

        <b-field label="Number!" :label-position="labelPosition">
            <b-numberinput laceholder="99" :min="95"></b-numberinput>
        </b-field>

        <b-field label="Add some tags" :label-position="labelPosition">
            <b-taginput
                :model-value="['My first tag', 'My second tag']"
                ellipsis
                icon="label"
                placeholder="Add a tag">
            </b-taginput>
        </b-field>

        <b-field label="Select time" :label-position="labelPosition">
            <b-timepicker
                rounded
                placeholder="Click to select..."
                icon="clock">
            </b-timepicker>
        </b-field>

        <hr>
        <p class="title is-6">Also works for grouped field and with addons.</p>

        <b-field label="Search..." :label-position="labelPosition" grouped>
            <b-input placeholder="Search..." type="search"></b-input>
            <p class="control">
                <b-button class="button is-primary">Search</b-button>
            </p>
        </b-field>

        <b-field label="Search..." :label-position="labelPosition">
            <b-input placeholder="Search..." type="search"></b-input>
            <p class="control">
                <b-button class="button is-primary">Search</b-button>
            </p>
        </b-field>
    </section>
</template>

<script>
export default {
    data() {
        return {
            labelPosition: 'on-border'
        }
    }
}
</script>


# Object syntax

Since0.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 model-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 model-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.

What do you want to search?

@gmail.com

What a beautiful email!!


<template>
    <section>
        <b-field label="for test">
            <b-input v-for="item in [0, 1, 2, 3]" :key="item" :placeholder="item"></b-input>
        </b-field>
        <b-field label="for test">
            <b-input v-for="item in [0]" :key="item" :placeholder="item"></b-input>
            <b-input placeholder="etc"></b-input>
        </b-field>
        <b-field message="What do you want to search?">
            <b-input placeholder="Search..."
                type="search"
                icon="magnify">
            </b-input>
            <p class="control">
                <b-button type="is-primary" label="Search" />
            </p>
        </b-field>

        <b-field message="What a beautiful email!!">
            <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">
                <b-button type="is-success" label="Transfer" />
            </p>
        </b-field>

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

        <b-field>
            <p class="control">
                <b-button label="Button" type="is-primary" />
            </p>
            <p class="control">
                <b-dropdown>
                    <template #trigger>
                        <b-button type="is-primary" icon-left="menu-down" />
                    </template>

                    <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>
                    <template #trigger>
                        <b-button label="Filters" icon-right="menu-down" />
                    </template>

                    <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.

What do you want to search?

What do you want to search?

<template>
    <section>
        <b-field grouped message="What do you want to search?">
            <b-input placeholder="Search..."></b-input>
            <p class="control">
                <b-button label="Search" type="is-primary" />
            </p>
        </b-field>

        <b-field grouped message="What do you want to search?">
            <b-input placeholder="Search..." expanded></b-input>
            <p class="control">
                <b-button label="Search" type="is-primary" />
            </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">
            <b-button label="First" />
        </p>
        <p class="control">
            <b-button label="Second" />
        </p>
        <p class="control">
            <b-button label="Third" />
        </p>
        <p class="control">
            <b-button label="Fourth" />
        </p>
        <p class="control">
            <b-button label="Fifth" />
        </p>
        <p class="control">
            <b-button label="Sixth" />
        </p>
        <p class="control">
            <b-button label="Seventh" />
        </p>
        <p class="control">
            <b-button label="Eighth" />
        </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">
                <b-button label="Search" type="is-info" />
            </p>
        </b-field>

        <hr>

        <b-field grouped position="is-right">
            <b-input placeholder="Search..." type="search" icon="magnify">
            </b-input>
            <p class="control">
                <b-button label="Search" type="is-info" />
            </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">
                <b-button label="Send message" type="is-primary" />
            </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 model-value="Kevin Garvey" size="is-small"></b-input>
        </b-field>
        <b-field label="Large" custom-class="is-large">
            <b-input model-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"
                model-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 model-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 model-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>

# Label slot

Since0.7.6

Use the label slot for complex labels with HTML content or components. Note it overrides the label prop.

<template>
    <section>
        <b-field
            custom-class="is-medium"
            horizontal>
            <template #label>
               With tooltip
                <b-tooltip type="is-dark" label="Help text here for explanation">
                    <b-icon size="is-small" icon="help-circle-outline"></b-icon>
                </b-tooltip>
            </template>
            <b-input size="is-medium"></b-input>
        </b-field>

        <b-field>
            <template #label>
                Label with custom <span class="has-text-primary is-italic">style</span>
            </template>
            <b-input></b-input>
        </b-field>
    </section>
</template>

# 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 AutocompleteString, Objectis-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 labelString
label-forSame as native for set on the labelString
custom-classCSS classes to be applied on field labelString
messageHelp message textString, Object, Array, Array
groupedDirect child components/elements of Field will be grouped horizontally (see which ones at the top of the page)Booleanfalse
group-multilineAllow controls to fill up multiple lines, making it responsiveBooleanfalse
positionWhich position should the addons appear, optionalStringis-centered, is-right
addonsField automatically attach controls togetherBooleantrue
horizontalGroup label and control on the same line for horizontal formsBooleanfalse
label-positionPosition of labelStringinside, on-border-

# Variables

You can use these variables to customize this component.

Name
Default
$floating-in-height3.25em
Bulma variablesLink