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
Value
Default
v-modelBinding value String, Number ——
typeType (color) of the control, optional String is-white, is-black, is-light, is-dark, is-primary, is-mix, 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, falfa
minMinimum allowed value Number, String ——
maxMaximum allowed value Number, String ——
stepIncremental number step Number, String ——
controls-roundedShow rounded controls Boolean —false
controlsShowing controls(+/-) Boolean —true
controls-positionPosition of controls String compact—
Any native attribute— — ——