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

        <b-field label="Username"
            type="is-success"
            message="This username is available">
            <b-input model-value="johnsilver" maxlength="30"></b-input>
        </b-field>

        <b-field label="Password">
            <b-input type="password"
                model-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

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

        <b-field label="Username"
            type="is-success"
            message="This username is available"
            horizontal>
            <b-input model-value="johnsilver" maxlength="30"></b-input>
        </b-field>

        <b-field label="Password" horizontal>
            <b-input type="password"
                model-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

Automatic HTML5 validation on-blur.

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

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

# Filter

You could transform or restrict input values on the fly.

<template>
    <section>
        <b-field label="Filter: only numbers">
            <b-input v-model="name" :filter="inputFilter"></b-input>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                name: ''
            }
        },
        methods: {
            inputFilter (value) {
                return value.replace(/[^0-9]/g, '')
            }
        }
    }
</script>

# API

Name
Description
Type
Values
Default
v-modelBinding valueString, Number
lazyMakes the binding lazy. Note: v-model.lazy won't workBooleanfalse
typeInput type, like nativeStringAny native input type, and textareatext
sizeVertical size of input, optionalStringis-small, is-medium, is-large
expandedMakes input full width when inside a grouped or addon fieldBooleanfalse
password-revealAdd the reveal password functionalityBooleanfalse
loadingAdd the loading state to the inputBooleanfalse
icon-packIcon pack to useStringmdi, fa, fas, far, fad, falmdi
iconIcon name to be addedString
icon-rightIcon name to be added on the right sideString
icon-clickableMake the icon clickableBooleanfalse
icon-right-clickableMake the icon right clickableBooleanfalse
maxlengthSame as native maxlength, plus character counterString, Number
has-counterShow character counter when maxlength prop is passedBooleantrue
custom-classCSS classes to be applied on inputString
validation-messageThe message which is shown when a validation error occursString
filterTransform or restrict input values on the fly.Functionnull
Any native attribute

# Variables

You can use these variables to customize this component.

Name
Default
Bulma variablesLink