These components should be used as a direct child of Field:
.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>
# Label Position
Add the label-position prop to modify field style.
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
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 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.
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.
<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.
<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># Label slot
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 slot="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 slot="label">
Label with custom <span class="has-text-primary is-italic">style</span>
</template>
<b-input></b-input>
</b-field>
</section>
</template>Name | Description | Type | Values | 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-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 | 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 | - |
You can use these variables to customize this component.
Name | Default |
|---|---|
$floating-in-height | 3.25em |
This page is open source. Noticed a typo or something's unclear?