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
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">
<b-input 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 placeholder="99" :min="95"></b-numberinput>
</b-field>
<b-field label="Add some tags" :label-position="labelPosition">
<b-taginput
: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
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.
What do you want to search?
What a beautiful email!!
<template>
<section>
<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="[email protected]"></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="[email protected]" 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 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 #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>
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 | — | — |
grouped | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page). Do not mix with horizontal because there is an issue that the validation error cannot be reset once it is set if combined with horizontal. | 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. Do not mix with grouped because there is an issue that the validation error cannot be reset once it is set if combined with grouped. | 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 |
| Bulma variables | Link |
This page is open source. Noticed a typo or something's unclear?