Numberinput

A simple number input with controls

Input readonly

Disabled

Rounded

Quantity

Quantity is invalid

Rate

Rate is valid

<template>
    <section>
        <b-field>
            <b-numberinput v-model="number"></b-numberinput>
        </b-field>
 
        <b-field label="Input readonly">
            <b-numberinput :editable="false"></b-numberinput>
        </b-field>

        <b-field label="Disabled">
            <b-numberinput disabled></b-numberinput>
        </b-field>

        <b-field label="Rounded">
            <b-numberinput rounded></b-numberinput>
        </b-field>

        <b-field label="Loading">
            <b-numberinput loading></b-numberinput>
        </b-field>

        <b-field label="Quantity"
            type="is-danger"
            message="Quantity is invalid">
            <b-numberinput></b-numberinput>
        </b-field>

        <b-field label="Rate"
            type="is-success"
            message="Rate is valid">
            <b-numberinput></b-numberinput>
        </b-field>
    </section>
</template>

<script>
    export default {
        data() {
            return {
                number: 10
            }
        }
    }
</script>

# Types

Primary

Success

Error

Info

Warning

Light

Dark

<template>
    <section>
        <b-field label="Primary">
            <b-numberinput placeholder="No label"></b-numberinput>
        </b-field>

        <b-field label="Success">
            <b-numberinput type="is-success"></b-numberinput>
        </b-field>

        <b-field label="Error">
            <b-numberinput type="is-danger"></b-numberinput>
        </b-field>

        <b-field label="Info">
            <b-numberinput type="is-info"></b-numberinput>
        </b-field>

        <b-field label="Warning">
            <b-numberinput type="is-warning"></b-numberinput>
        </b-field> 

        <b-field label="Light">
            <b-numberinput type="is-light"></b-numberinput>
        </b-field> 

        <b-field label="Dark">
            <b-numberinput type="is-dark"></b-numberinput>
        </b-field> 
    </section>
</template>

# Min - Max

You can use the min and/or max props to limit the range.

Vote

Age

<template>
    <section>
        <b-field label="Vote">
            <b-numberinput min="0" max="10">
            </b-numberinput>
        </b-field>

        <b-field label="Age">
            <b-numberinput min="18">
            </b-numberinput>
        </b-field>
    </section>
</template>

# Steps

Decimal

<template>
    <section>
        <b-field>
            <b-numberinput step="5">
            </b-numberinput>
        </b-field>

        <b-field label="Decimal">
            <b-numberinput step="0.01">
            </b-numberinput>
        </b-field>
    </section>
</template>

# Sizes

Small

Default

Medium

Large

<template>
    <section>
        <b-field label="Small">
            <b-numberinput size="is-small">
            </b-numberinput>
        </b-field>

        <b-field label="Default">
            <b-numberinput placeholder="Default">
            </b-numberinput>
        </b-field>

        <b-field label="Medium">
            <b-numberinput size="is-medium">
            </b-numberinput>
        </b-field>

        <b-field label="Large">
            <b-numberinput size="is-large">
            </b-numberinput>
        </b-field>
    </section>
</template>

# Customization

Rounded controls

Compact

Compact and rounded controls

Grouped

Grouped and expanded

With Addons

With Addons and expanded

<template>
    <section>
        <b-field>
            <b-numberinput></b-numberinput>
        </b-field>
        <b-field label="Rounded controls">
            <b-numberinput controls-rounded></b-numberinput>
        </b-field>

        <b-field label="Compact">
            <b-numberinput controls-position="compact"></b-numberinput>
        </b-field>

        <b-field label="Compact and rounded controls">
            <b-numberinput controls-position="compact"
                controls-rounded>
            </b-numberinput>
        </b-field>

        <b-field label="Grouped">
            <b-field grouped>
                <p class="control">
                    <button class="button">Button</button>
                </p>
                <b-numberinput/>
            </b-field>
        </b-field>

        <b-field label="Grouped and expanded">
            <b-field grouped>
                <p class="control">
                    <button class="button">Button</button>
                </p>
                <b-numberinput expanded/>
            </b-field>
        </b-field>

        <b-field label="With Addons">
            <b-field>
                <p class="control">
                    <button class="button">Button</button>
                </p>
                <b-numberinput controlsPosition="compact"/>
            </b-field>
        </b-field>

        <b-field label="With Addons and expanded">
            <b-field>
                <p class="control">
                    <button class="button">Button</button>
                </p>
                <b-numberinput expanded controlsPosition="compact"/>
            </b-field>
        </b-field>
    </section>
</template>

# API

Name	Description	Type	Values	Default
`v-model`	Binding value	String, Number	—	—
`type`	Type (color) of the control, optional	String	`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	`is-primary`
`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`
`loading`	Add the loading state to the input	Boolean	—	`false`
`editable`	Editable input	Boolean	—	`true`
`icon-pack`	Icon pack to use	String	mdi, fa, fas, far, fab, fad, fal	`mdi`
`min`	Minimum allowed value	Number, String	—	—
`max`	Maximum allowed value	Number, String	—	—
`step`	Incremental number step	Number, String	—	—
`controls-rounded`	Show rounded controls	Boolean	—	`false`
`controls`	Showing controls(+/-)	Boolean	—	`true`
`controls-position`	Position of controls	String	`compact`	—
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`
`[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)		—

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

Improve this page on GitHub