Automatic HTML5 validation on-blur.
You can use use-html5-validation prop to disable the default HTML5 validation.
Input
Get user Input. Use with Field to access all functionalities
This email is invalid
This username is available
0 / 200
<template>
<section>
<b-field label="Name">
<b-input v-model="name"></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">
<b-input type="password"
value="iwantmytreasure"
password-reveal>
</b-input>
</b-field>
<b-field label="Message">
<b-input maxlength="200" type="textarea"></b-input>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
name: 'John Silver'
}
}
}
</script>
This email is invalid
This username is available
0 / 200
<template>
<section>
<b-field label="Name" horizontal>
<b-input v-model="name"></b-input>
</b-field>
<b-field label="Email"
type="is-danger"
message="This email is invalid"
horizontal>
<b-input type="email"
value="john@"
maxlength="30">
</b-input>
</b-field>
<b-field label="Username"
type="is-success"
message="This username is available"
horizontal>
<b-input value="johnsilver" maxlength="30"></b-input>
</b-field>
<b-field label="Password" horizontal>
<b-input type="password"
value="iwantmytreasure"
password-reveal>
</b-input>
</b-field>
<b-field label="Message" horizontal>
<b-input maxlength="200" type="textarea"></b-input>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
name: 'John Silver'
}
}
}
</script>
# Types and states
You can have a message too
<template>
<section>
<b-field>
<b-input placeholder="No label"></b-input>
</b-field>
<b-field label="Rounded">
<b-input placeholder="No label" rounded></b-input>
</b-field>
<b-field label="Success" type="is-success">
<b-input placeholder="Success"></b-input>
</b-field>
<b-field label="Error"
type="is-danger"
message="You can have a message too">
<b-input placeholder="Error"></b-input>
</b-field>
<b-field label="Info" type="is-info">
<b-input placeholder="Info"></b-input>
</b-field>
<b-field label="Warning" type="is-warning">
<b-input placeholder="Warning"></b-input>
</b-field>
<b-field label="Disabled">
<b-input placeholder="Disabled" disabled></b-input>
</b-field>
<b-field label="Loading">
<b-input placeholder="Loading" loading></b-input>
</b-field>
</section>
</template>
# Icons
With Material Design Icons
With FontAwesome
<template>
<section>
<h3 class="subtitle">With Material Design Icons</h3>
<b-field>
<b-input placeholder="Search..."
type="search"
icon="magnify"
icon-clickable
@icon-click="searchIconClick">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Email"
v-model="email"
type="email"
icon="email"
icon-right="close-circle"
icon-right-clickable
@icon-right-click="clearIconClick">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Credit card"
icon="credit-card">
</b-input>
</b-field>
<h3 class="subtitle">With FontAwesome</h3>
<b-field>
<b-input placeholder="Search..."
type="search"
icon-pack="fas"
icon="search">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Email"
type="email"
icon-pack="fas"
icon="envelope">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Credit card"
icon-pack="far"
icon="credit-card">
</b-input>
</b-field>
</section>
</template>
<script>
export default {
data() {
return {
email: '',
}
},
methods: {
searchIconClick() {
alert('You wanna make a search?')
},
clearIconClick() {
this.email = '';
alert('Email cleared!')
}
}
}
</script>
# Validation
0 / 100
<template>
<section>
<b-field>
<b-input placeholder="Email" type="email"></b-input>
</b-field>
<b-field>
<b-input placeholder="Number"
type="number"
min="10"
max="20">
</b-input>
</b-field>
<b-field>
<b-input placeholder="User handle (custom validation for only lowercase)"
type="text"
required
validation-message="Only lowercase is allowed"
pattern="[a-z]*">
</b-input>
</b-field>
<b-field>
<b-input placeholder="URL" type="url"></b-input>
</b-field>
<b-field>
<b-input type="textarea"
minlength="10"
maxlength="100"
placeholder="Maxlength automatically counts characters">
</b-input>
</b-field>
</section>
</template>
# Password
You can use the password-reveal prop to add a button that reveals password.
<template>
<section>
<b-field>
<b-input type="password"
placeholder="Regular password input">
</b-input>
</b-field>
<b-field>
<b-input type="password"
placeholder="Password reveal input"
password-reveal>
</b-input>
</b-field>
</section>
</template>
# Lazy
You could make the binding lazy, comparable with v-model.lazy, see .lazy modifier. As v-model.lazy won't work with custom components like Buefy, you could use this property.
Value is:
<template>
<section>
<b-field>
<b-switch v-model="beLazy">Enable lazy</b-switch>
</b-field>
<b-field>
<b-input type="text"
:lazy="beLazy"
v-model="value"
placeholder="Input">
</b-input>
</b-field>
<p class="content">
Value is: {{value}}
</p>
</section>
</template>
<script>
export default {
data() {
return {
beLazy: false,
value: null
}
}
}
</script>
# Sizes
<template>
<section>
<b-field>
<b-input placeholder="Small"
size="is-small"
icon="account">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Default"
icon="account">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Medium"
size="is-medium"
icon="account">
</b-input>
</b-field>
<b-field>
<b-input placeholder="Large"
size="is-large"
icon="account">
</b-input>
</b-field>
</section>
</template>
# API
Name | Description | Type | Values | Default |
|---|---|---|---|---|
v-model | Binding value | String, Number | — | — |
lazy | Makes the binding lazy. Note: v-model.lazy won't work | Boolean | — | false |
type | Input type, like native | String | Any native input type, and textarea | text |
size | Vertical size of input, optional | String | is-small, is-medium, is-large | — |
expanded | Makes input full width when inside a grouped or addon field | Boolean | — | false |
password-reveal | Add the reveal password functionality | Boolean | — | false |
loading | Add the loading state to the input | Boolean | — | false |
icon-pack | Icon pack to use | String | mdi, fa, fas, far, fad, fal | mdi |
icon | Icon name to be added | String | — | — |
icon-right | Icon name to be added on the right side | String | — | — |
icon-clickable | Make the icon clickable | Boolean | — | false |
icon-right-clickable | Make the icon right clickable | Boolean | — | false |
maxlength | Same as native maxlength, plus character counter | String, Number | — | — |
has-counter | Show character counter when maxlength prop is passed | Boolean | — | true |
custom-class | CSS classes to be applied on input | String | — | — |
validation-message | The message which is shown when a validation error occurs | String | — | — |
| Any native attribute | — | — | — | — |
# Variables
You can use these variables to customize this component.
Name | Default |
|---|---|
| Bulma variables | Link |
This page is open source. Noticed a typo or something's unclear?