Input & Textarea

Get user Input. Use with Field to access all functionalities

The input CSS class is meant for <input> HTML elements. The following type attributes are supported:

type="text"
type="password"
type="email"
type="tel"

Several modifiers are supported which affect:

the color is available in all the different colors defined by the $colors Sass map.
the size: is-small, is-medium, is-large
the state

The textarea CSS class is the multiline version of input element

<input class="input" type="text" placeholder="Text input">

<textarea class="textarea" placeholder="e.g. Hello world"/>

States

This content is readonly

<div class="control">
    <input class="input" type="text" placeholder="Normal input">
</div>

<div class="control">
    <textarea class="textarea" placeholder="Normal textarea"/>
</div>

<div class="control">
    <input class="input is-hovered" type="text" placeholder="Hovered input">
</div>

<div class="control">
    <textarea class="textarea is-hovered" placeholder="Hovered textarea"/>
</div>

<div class="control">
    <input class="input is-focused" type="text" placeholder="Focused input">
</div>

<div class="control">
    <textarea class="textarea is-focused" placeholder="Focused textarea"/>
</div>

<div class="control is-loading">
    <input class="input" type="text" placeholder="Loading input">
</div>

<div class="control is-loading">
    <textarea class="textarea" placeholder="Loading textarea"/>
</div>

<div class="control">
    <input class="input" type="text" placeholder="Disabled input" disabled>
</div>

<div class="control">
    <textarea class="textarea" placeholder="Disabled textarea" disabled></textarea>
</div>

<div class="control">
    <input class="input" type="text" value="This text is readonly" readonly>
</div>

<div class="control">
    <textarea class="textarea" readonly>This content is readonly</textarea>
</div>

<div class="control">
    <input class="input is-rounded" type="text" placeholder="Rounded input">
</div>

<div class="control">
    <input class="input is-static" type="email" value="me@example.com" readonly>
</div>

<div class="control">
    <textarea class="textarea" placeholder="10 lines of textarea" rows="10"/>
</div>

<div class="control">
    <textarea class="textarea has-fixed-size" placeholder="Fixed size textarea"/>
</div>

Name

5 / 30

This email is invalid

Username

10 / 30

This username is available

Password

Message

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>

Types and states

Rounded

Success

Error

You can have a message too

Info

Warning

Disabled

<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="search"
                icon-clickable
                @icon-click="searchIconClick">
            </b-input>
        </b-field>

        <b-field>
            <b-input placeholder="Email"
                v-model="email"
                type="email"
                icon="envelope"
                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.

New! 0.7.2

You can use use-html5-validation prop to disable the default HTML5 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>

Sizes

<template>
    <section>
        <b-field>
            <b-input placeholder="Small"
                size="is-small"
                icon="user">
            </b-input>
        </b-field>

        <b-field>
            <b-input placeholder="Default"
                icon="user">
            </b-input>
        </b-field>

        <b-field>
            <b-input placeholder="Medium"
                size="is-medium"
                icon="user">
            </b-input>
        </b-field>

        <b-field>
            <b-input placeholder="Large"
                size="is-large"
                icon="user">
            </b-input>
        </b-field>
    </section>
</template>

API

Name	Description	Type	Value	Default
`v-model`	Binding value	String, Number	—	—
`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`	`fa`
`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	—	—	—	—

Name	Description	Parameters
`input`	Triggers when value is changed	`value: String\|Number`
`focus`	Triggers when input has received focus	`event: $event`
`blur`	Triggers when input has lost focus	`event: $event`
`icon-click`	Triggers when the icon is clickable and have been clicked	`event: $event`
`icon-right-click`	Triggers when the right icon is clickable and have been clicked	`event: $event`
`[any].native`	Listen to any native event, e.g. `click.native`	`event: $event`

Name	Description	Parameters	Return
`checkHtml5Validity`	Check validation of HTML5 (add the message and type/color), also updates the `isValid` property		`isValid: Boolean`
`focus`	Set focus (internally uses the native `.select()` method)		—

Variables #

You can use these variables to customize, Simply set one or multiple of these variables before importing Buval. Learn how.

Name	Type	Default
`$input-color`	color	`$text-strong`
`$input-background-color`	color	`$scheme-main`
`$input-border-color`	color	`$border`
`$input-height`	size	`$control-height`
`$input-shadow`	size	`inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05)`
`$input-placeholder-color`	function	`bulmaRgba($input-color, 0.3)`
`$input-hover-color`	color	`$text-strong`
`$input-hover-border-color`	color	`$border-hover`
`$input-focus-color`	color	`$text-strong`
`$input-focus-border-color`	color	`$link`
`$input-focus-box-shadow-size`	size	`0 0 0 0.125em`
`$input-focus-box-shadow-color`	function	`bulmaRgba($link, 0.25)`
`$input-disabled-color`	color	`$text-light`
`$input-disabled-background-color`	color	`$background`
`$input-disabled-border-color`	color	`$background`
`$input-disabled-placeholder-color`	function	`bulmaRgba($input-disabled-color, 0.3)`
`$input-arrow`	color	`$link`
`$input-icon-color`	color	`$border`
`$input-icon-active-color`	color	`$text`
`$input-radius`	size	`$radius`
`$textarea-padding`	size	`$control-padding-horizontal`
`$textarea-max-height`	size	`40em`
`$textarea-min-height`	size	`8em`