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 with placeholder and min">
      <b-numberinput v-model="numberPlaceholder" placeholder="99" :min="95"></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,
      numberPlaceholder: undefined
    }
  }
}
</script>

# Types

<template>
  <section>
    <b-field label="Primary">
      <b-numberinput :placeholder="50"></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"
                aria-minus-label="Decrement by 5"
                aria-plus-label="Increment by 5">
            </b-numberinput>
        </b-field>

        <b-field label="Decimal">
            <b-numberinput 
                step="0.01"
                aria-minus-label="Decrement by 0.01"
                aria-plus-label="Increment by 0.01">
            </b-numberinput>
        </b-field>

        <b-field label="Minimum step">
            <b-numberinput 
                step="0.2"
                min-step="0.01"
                aria-minus-label="Decrement by 0.2"
                aria-plus-label="Increment by 0.2">
            </b-numberinput>
        </b-field>
    </section>
</template>

# Exponential increment

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

        <b-field>
            <b-numberinput step="1" :exponential=".5">
            </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>

# Alignment and position

<template>
    <section>
        <b-field>
            <b-numberinput></b-numberinput>
        </b-field>

        <b-field label="Left">
            <b-numberinput controls-alignment="left"></b-numberinput>
        </b-field>

        <b-field label="Right">
            <b-numberinput controls-alignment="right"></b-numberinput>
        </b-field> 

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

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

        <b-field label="Compact right">
            <b-numberinput controls-alignment="right" controls-position="compact"></b-numberinput>
        </b-field>
    </section>
</template>

# Customization

<template>
    <section>
        <b-field label="Rounded controls">
            <b-numberinput controls-rounded></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="Compact, rounded and right aligned controls">
            <b-numberinput 
                controls-alignment="right"
                controls-position="compact"
                controls-rounded></b-numberinput>
        </b-field>

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

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

        <b-field label="With addons">
            <b-field>
                <p class="control">
                    <b-button label="Button" />
                </p>
                <b-numberinput controls-position="compact"/>
            </b-field>
        </b-field>

        <b-field label="With addons and expanded">
            <b-field>
                <p class="control">
                    <b-button label="Button" />
                </p>
                <b-numberinput expanded controls-position="compact"/>
            </b-field>
        </b-field>


        <b-field label="With addons, expanded and right aligned controls">
            <b-field>
                <p class="control">
                    <b-button label="Button" />
                </p>
                <b-numberinput expanded controls-position="compact" controls-alignment="right" />
            </b-field>
        </b-field>
    </section>
</template>

# API

Name
Description
Type
Values
Default
v-modelBinding valueString, Number
typeType (color) of the control, optionalStringis-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, optionalStringis-small, is-medium, is-large
expandedMakes input full width when inside a grouped or addon fieldBooleanfalse
loadingAdd the loading state to the inputBooleanfalse
editableEditable inputBooleantrue
icon-packIcon pack to useStringmdi, fa, fas, far, fab, fad, falmdi
minMinimum allowed valueNumber, String
maxMaximum allowed valueNumber, String
stepIncremental number stepNumber, String1
min-stepMinimum step-size allowed. Input value is validated to be integer multiple of min-stepNumber, StringDefaults to value of step
exponentialThe factor of incrementation on long pressBoolean, NumberBetween 0 excluded and 10, setting to true is equivalent to passing truefalse
controlsShow controls (+/-)Booleantrue
controls-roundedShow rounded controlsBooleanfalse
controls-positionPosition of controlsStringcompact
controls-alignmentAlignment of controlsStringleft, right, centercenter
aria-minus-labelAccessibility label for the minus button.String
aria-plus-labelAccessibility label for the plus button.String
Any native attribute