Numberinput

A simple number input with controls

Quantity is invalid

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

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

<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

<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

<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

<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>
    </section>
</template>

API

Name
Description
Type
Values
Default
v-modelBinding value String, Number
typeType (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 Sassis-primary
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
loadingAdd the loading state to the input Boolean false
editableEditable input Boolean true
minMinimum allowed value Number, String
maxMaxinimum allowed value Number, String
stepIncremental number step Number, String
controls-roundedShow rounded controls Boolean false
controls-positionPosition of controls String compact
Any native attribute

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

Improve this page on GitHub