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>

        <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-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
icon-packIcon pack to use String mdi, fa, fas, far, fab, fad, falmdi
minMinimum allowed value Number, String
maxMaximum 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