Input

Get user Input. Use with Field to access all functionalities

This email is invalid

This username is available

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

# 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">
            </b-input>
        </b-field>

        <b-field>
            <b-input placeholder="Email"
                type="email"
                icon="email">
            </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>

# Validation

Automatic HTML5 validation on-blur.

New! 0.7.2

You can use use-html5-validation prop to disable the default HTML5 validation.

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

# 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-modelBinding value String, Number
typeInput type, like native String Any native input type, and textareatext
sizeVertical size of input, optional String is-small, is-medium, is-large
expandedMakes input full width when inside a grouped or addon field Boolean false
password-revealAdd the reveal password functionality Boolean false
loadingAdd the loading state to the input Boolean false
iconIcon name to be added String
icon-packIcon pack to use String mdi, fa, fas, far, fad, falmdi
maxlengthSame as native maxlength, plus character counter String, Number
has-counterShow character counter when maxlength prop is passed Boolean true
custom-classCSS classes to be applied on input String
validation-messageThe message which is shown when a validation error occurs String
Any native attribute

This page is open source. Noticed a typo or something's unclear?

Improve this page on GitHub