Field General

All generic form controls, designed for consistency

Buval supports the following native HTML form elements: <form> <button> <input> <textarea> and <label>.

The following CSS classes are supported:

label
input
textarea
select
checkbox
radio
button
help

To maintain the design evenly balanced, Buval provides a very useful control container with which you can wrap the form controls.
When combining several controls in a form, use the field class as a container, to keep the spacing consistent.

Complete form example

Name

Username

This username is available

This email is invalid

Subject

Message

I agree to the terms and conditions

Yes No

<div class="field">
    <label class="label">Name</label>
    <div class="control">
        <input class="input" type="text" placeholder="Text input">
    </div>
</div>

<div class="field">
    <label class="label">Username</label>
    <div class="control has-icons-left has-icons-right">
        <input class="input is-success" type="text" placeholder="Text input" value="buval">
        <span class="icon is-small is-left">
            <i class="fas fa-user"/>
        </span>
        <span class="icon is-small is-right">
            <i class="fas fa-check"/>
        </span>
    </div>
    <p class="help is-success">This username is available</p>
</div>

<div class="field">
    <label class="label">Email</label>
    <div class="control has-icons-left has-icons-right">
        <input class="input is-danger" type="email" placeholder="Email input" value="hello@">
        <span class="icon is-small is-left">
            <i class="fas fa-envelope"/>
        </span>
        <span class="icon is-small is-right">
            <i class="fas fa-exclamation-triangle"/>
        </span>
    </div>
    <p class="help is-danger">This email is invalid</p>
</div>

<div class="field">
    <label class="label">Subject</label>
    <div class="control">
        <div class="select">
            <select>
                <option>Select dropdown</option>
                <option>With options</option>
            </select>
        </div>
    </div>
</div>

<div class="field">
    <label class="label">Message</label>
    <div class="control">
        <textarea class="textarea" placeholder="Textarea"></textarea>
    </div>
</div>

<div class="field">
    <div class="control">
        <label class="checkbox">
            <input type="checkbox">
            I agree to the <a href="#">terms and conditions</a>
        </label>
    </div>
</div>

<div class="field">
    <div class="control">
        <label class="radio">
            <input type="radio" name="question">
            Yes
        </label>
        <label class="radio">
            <input type="radio" name="question">
            No
        </label>
    </div>
</div>

<div class="field is-grouped">
    <div class="control">
        <button class="button is-primary">Submit</button>
    </div>
    <div class="control">
        <button class="button is-primary is-light">Cancel</button>
    </div>
</div>

Form field

The field container is a simple container for:

a text label
a form control
an optional helptext

Label

This is a help text

This container allows form fields to be spaced consistently.

Name

<div class="field">
    <label class="label">Label</label>
    <div class="control">
        <input class="input" type="text" placeholder="Text input">
    </div>
    <p class="help">This is a help text</p>
</div>

<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>

<div class="field">
    <label class="label">Name</label>
    <div class="control">
        <input class="input" type="text" placeholder="e.g Alex Smith">
    </div>
</div>

<div class="field">
    <label class="label">Email</label>
    <div class="control">
        <input class="input" type="email" placeholder="e.g. alexsmith@gmail.com">
    </div>
</div>

Form control

The Buval control is a versatile block container meant to enhance single form controls. Because it has the same height as the element that it wraps, it can only contain the following Buval elements:

input
select
button
icon

This container gives the ability to:

keep the spacing consistent
combine form controls into a group
combine form controls into a list
append and prepend icons to a form control

<div class="control">
    <input class="input" type="text" placeholder="Text input">
</div>

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

<div class="control">
    <button class="button is-primary">Submit</button>
</div>

With icons

You can append one of 2 modifiers on a control:

has-icons-left
and/or has-icons-right

You also need to add a modifier on the icon:

icon is-left if has-icons-left is used
icon is-right if has-icons-right is used

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

<div class="field">
    <p class="control has-icons-left has-icons-right">
        <input class="input" type="email" placeholder="Email">
        <span class="icon is-small is-left">
            <i class="fas fa-envelope"></i>
        </span>
        <span class="icon is-small is-right">
            <i class="fas fa-check"></i>
        </span>
    </p>
</div>

<div class="field">
    <p class="control has-icons-left">
        <input class="input" type="password" placeholder="Password">
        <span class="icon is-small is-left">
            <i class="fas fa-lock"></i>
        </span>
    </p>
    </div>
    <div class="field">
    <p class="control">
        <button class="button is-success">
            Login
        </button>
    </p>
</div>

Form addons

#1: If you want to attach controls together, use the has-addons modifier on the field container:

#2: You can attach inputs, buttons, and dropdowns only. It can be useful to append a static button.

#3: Use the is-expanded modifier on the element you want to fill up the remaining space (in this case, the input):

#4: If you want a full width select dropdown, pair control is-expanded with select is-fullwidth.
Use the has-addons-centered or the has-addons-right modifiers to alter the alignment.

@gmail.com

Transfer

#1
<div class="field has-addons">
    <div class="control">
        <input class="input" type="text" placeholder="Find a repository">
    </div>
    <div class="control">
        <a class="button is-info">
            Search
        </a>
    </div>
</div>
#2
<div class="field has-addons">
    <p class="control">
        <input class="input" type="text" placeholder="Your email">
    </p>
    <p class="control">
        <a class="button is-static">
            @gmail.com
        </a>
    </p>
</div>
#3
<div class="field has-addons">
    <p class="control">
        <span class="select">
            <select>
                <option>$</option>
                <option>£</option>
                <option>€</option>
            </select>
        </span>
    </p>
<p class="control">
    <input class="input" type="text" placeholder="Amount of money">
</p>
<p class="control">
    <a class="button">
        Transfer
    </a>
</p>
</div>

<div class="field has-addons">
    <p class="control">
        <span class="select">
            <select>
                <option>$</option>
                <option>£</option>
                <option>€</option>
            </select>
        </span>
    </p>
    <p class="control is-expanded">
        <input class="input" type="text" placeholder="Amount of money">
    </p>
    <p class="control">
        <a class="button">
            Transfer
        </a>
    </p>
</div>
#4
<div class="field has-addons">
    <div class="control is-expanded">
        <div class="select is-fullwidth">
            <select name="country">
                <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>
    </div>
    <div class="control">
        <button type="submit" class="button is-primary">Choose</button>
    </div>
</div>

Form group

#1: If you want to group controls together, use the is-grouped modifier on the field container.

#2: Use the is-grouped-centered or the is-grouped-right modifiers to alter the alignment.

#3: Add the is-expanded modifier on the control element you want to fill up the remaining space with.

#4: Add the is-grouped-multiline modifier to allow controls to fill up multiple lines. This is ideal for a long list of controls.

#1
<div class="field is-grouped">
    <p class="control">
        <a class="button is-primary">
            Submit
        </a>
    </p>
    <p class="control">
        <a class="button is-light">
            Cancel
        </a>
    </p>
</div>
#2
<div class="field is-grouped is-grouped-centered">
    <p class="control">
        <a class="button is-primary">
            Submit
        </a>
    </p>
    <p class="control">
        <a class="button is-light">
            Cancel
        </a>
    </p>
</div>
<div class="field is-grouped is-grouped-right">
    <p class="control">
        <a class="button is-primary">
            Submit
        </a>
    </p>
    <p class="control">
        <a class="button is-light">
            Cancel
        </a>
    </p>
</div>
#3
<div class="field is-grouped">
    <p class="control is-expanded">
        <input class="input" type="text" placeholder="Find a repository">
    </p>
    <p class="control">
        <a class="button is-info">
            Search
        </a>
    </p>
</div>
#4
<div class="field is-grouped is-grouped-multiline">
    <p class="control"><a class="button">One</a></p>
    <p class="control"><a class="button">Two</a></p>
    <p class="control"><a class="button">Three</a></p>
    <p class="control"><a class="button">Four</a></p>
    <p class="control"><a class="button">Five</a></p>
    <p class="control"><a class="button">Six</a></p>
    <p class="control"><a class="button">Seven</a></p>
    <p class="control"><a class="button">Eight</a></p>
    <p class="control"><a class="button">Nine</a></p>
    <p class="control"><a class="button">Ten</a></p>
    <p class="control"><a class="button">Eleven</a></p>
    <p class="control"><a class="button">Eleven</a></p>
    <p class="control"><a class="button">Thirteen</a></p>
    </div>

Horizontal form

If you want a horizontal form control, use the is-horizontal modifier on the field container, in which you include:

field-label for the side label
field-body for the input/select/textarea container

You can use is-grouped or has-addons for the child elements.

To preserve the vertical alignment of labels with each type and size of control, the field-label comes with 4 size modifiers:

is-small
is-normal for any input or button
is-medium
is-large

From

+62

Do not enter the first zero

Department

Already a member?

Yes No

Subject

This field is required

Question

<div class="field is-horizontal">
    <div class="field-label is-normal">
        <label class="label">From</label>
    </div>
    <div class="field-body">
        <div class="field">
            <p class="control is-expanded has-icons-left">
                <input class="input" type="text" placeholder="Name">
                <span class="icon is-small is-left">
                    <i class="fas fa-user"></i>
                </span>
            </p>
        </div>
        <div class="field">
            <p class="control is-expanded has-icons-left has-icons-right">
                <input class="input is-success" type="email" placeholder="Email" value="alex@smith.com">
                <span class="icon is-small is-left">
                    <i class="fas fa-envelope"></i>
                </span>
                <span class="icon is-small is-right">
                    <i class="fas fa-check"></i>
                </span>
            </p>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label"></div>
    <div class="field-body">
        <div class="field is-expanded">
            <div class="field has-addons">
                <p class="control">
                <a class="button is-static">+62</a>
                </p>
                <p class="control is-expanded">
                    <input class="input" type="tel" placeholder="Your phone number">
                </p>
            </div>
            <p class="help">Do not enter the first zero</p>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label is-normal">
        <label class="label">Department</label>
    </div>
    <div class="field-body">
        <div class="field is-narrow">
            <div class="control">
                <div class="select is-fullwidth">
                    <select>
                        <option>Business development</option>
                        <option>Marketing</option>
                        <option>Sales</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label">
        <label class="label">Already a member?</label>
    </div>
    <div class="field-body">
        <div class="field is-narrow">
            <div class="control">
                <label class="radio">
                    <input type="radio" name="member">
                    Yes
                </label>
                <label class="radio">
                    <input type="radio" name="member">
                    No
                </label>
            </div>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label is-normal">
        <label class="label">Subject</label>
    </div>
    <div class="field-body">
        <div class="field">
            <div class="control">
                <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">
            </div>
            <p class="help is-danger">
                This field is required
            </p>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label is-normal">
        <label class="label">Question</label>
    </div>
    <div class="field-body">
        <div class="field">
            <div class="control">
                <textarea class="textarea" placeholder="Explain how we can help you"></textarea>
            </div>
        </div>
    </div>
</div>

<div class="field is-horizontal">
    <div class="field-label">
        <!-- Left empty for spacing -->
    </div>
    <div class="field-body">
        <div class="field">
            <div class="control">
                <button class="button is-primary">
                Send message
                </button>
            </div>
        </div>
    </div>
</div>

Disabled form

You can disable part or a whole form by wrapping a set of controls in a fieldset with a disabled HTML attribute.

Name

<fieldset disabled>
    <div class="field">
        <label class="label">Name</label>
        <div class="control">
            <input class="input" type="text" placeholder="e.g Kesya Novela">
        </div>
    </div>

    <div class="field">
        <label class="label">Email</label>
        <div class="control">
            <input class="input" type="email" placeholder="e.g. kesyanovela@gmail.com">
        </div>
    </div>
</fieldset>

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)

Name

5 / 30

This email is invalid

Username

10 / 30

This username is available

Password

3 / 30

Password is too short
Password must have at least 8 characters

Subject

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

Label Position

New! 0.7.8

Add the label-position prop to modify field style.

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

On Border Inside

Name

5 / 30

This email is invalid

Username

10 / 30

This username is available

Password

3 / 30

Password is too short
Password must have at least 8 characters

Subject

Message

0 / 200

Also works for grouped field and with addons.

Search...

<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 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"
                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 value="johnsilver" maxlength="30"></b-input>
        </b-field>

        <b-field label="Password"
            :label-position="labelPosition"
            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"
            :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>

        <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

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

Show errors

Username

10 / 30

Username is not available

Password

3 / 30

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="search">
            </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 pack="fas" icon="bold"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon pack="fas" icon="italic"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon pack="fas" icon="underline"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon pack="fas" icon="align-left"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon pack="fas" icon="align-center"></b-icon>
                </button>
            </p>
            <p class="control">
                <button class="button">
                    <b-icon pack="fas" icon="align-right"></b-icon>
                </button>
            </p>
            <b-input placeholder="Search..." type="search" icon="search"></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="caret-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="caret-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="search" 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.

Personal title

Name

<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="search">
            </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="search">
            </b-input>
            <p class="control">
                <button class="button is-info">Search</button>
            </p>
        </b-field>
    </section>
</template>

Combining addons and groups

Name

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

Subject

Please enter a subject

From

Topic

Message

<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">Buval</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.

Small

Large

Danger

5 / 30

This email is invalid

Multiple (small and success)

10 / 30

Computed (medium and primary)

10 / 30

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

Label slot

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

With tooltip

Label with custom style

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

        <b-field>
            <template slot="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	Value	Default
`type`	Type (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-mix`, `is-info`, `is-success`, `is-warning`, `is-danger`, and any other colors you've set in the `$colors` list on Sass	—
`label`	Field label	String	—	—
`label-for`	Same as native `for` set on the label	String	—	—
`custom-class`	CSS classes to be applied on field label	String	—	—
`message`	Help message text (can contain HTML). Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities. Only use HTML interpolation on trusted content and never on user-provided content.	String, Object, Array<String>, Array<Object>	—	—
`grouped`	Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page)	Boolean	—	`false`
`group-multiline`	Allow controls to fill up multiple lines, making it responsive	Boolean	—	`false`
`position`	Which position should the addons appear, optional	String	`is-centered`, `is-right`	—
`addons`	Field automatically attach controls together	Boolean	—	`true`
`horizontal`	Group label and control on the same line for horizontal forms	Boolean	—	`false`
`label-position`	Position of label	String	`inside`, `on-border`	-

Name slot	Description	Props (if no)
`label`	Custom label	-

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$control-radius`	size	`$radius`
`$control-radius-small`	size	`$radius-small`
`$control-padding-vertical`	size	`calc(0.5em - #{$control-border-width})`
`$control-padding-horizontal`	size	`calc(0.75em - #{$control-border-width})`
`$label-color`	color	`$grey-darker`
`$label-weight`	font-weight	`$weight-bold`
`$help-size`	size	`$size-small`
`$floating-in-height`	size	`3.25em`