Numberinput

A simple number input with controls

Input with placeholder and min

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

Primary

Success

Error

Info

Warning

Light

Dark

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

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

Minimum step

<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

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>

# Alignment and position

Left

Right

Compact

Compact left

Compact right

<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

Rounded controls

Compact and rounded controls

Compact, rounded and right aligned controls

Grouped

Grouped and expanded

With addons

With addons and expanded

With addons, expanded and right aligned controls

<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-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	—	1
`min-step`	Minimum step-size allowed. Input value is validated to be integer multiple of `min-step`	Number, String	—	Defaults to value of `step`
`exponential`	The factor of incrementation on long press	Boolean, Number	Between `0` excluded and `10`, setting to `true` is equivalent to passing `true`	false
`controls`	Show controls (+/-)	Boolean	—	`true`
`controls-rounded`	Show rounded controls	Boolean	—	`false`
`controls-position`	Position of controls	String	`compact`	—
`controls-alignment`	Alignment of controls	String	`left`, `right`, `center`	`center`
`aria-minus-label`	Accessibility label for the minus button.	String	—	—
`aria-plus-label`	Accessibility label for the plus button.	String	—	—
`long-press`	Long press on the plus or minus button will increment/decrement the input value.	Boolean	—	`true`
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