Numeric Field

BsNumericField is a form field component that let users enter numeric text into an UI.

Overview

BsNumericField component mimics the HTML5 <input type="number"> behaviour. This means that you can add attributes like required, readonly, or disabled and it will react to them to give the best experience. You can also use v-model directive to create two-way data bindings on the model-value property.

Additionally, you can use keyboard UP/DOWN arrow to increment or decrement the value.

IMPORTANT

Do not use the model-value property when using v-model.

Style Variants

You can style <bs-numeric-field> to your own preference or use a style variant based on Google Material Design 2 or Material Design 3 specifications.

Default

You can style <bs-numeric-field> that follows Google Material Design 2 specifications by using floating-label property explicitly.

Filled

Use filled property explicitly to enable <bs-numeric-field> with solid fill style. And when combined with floating-label property, <bs-numeric-field> will have a style that follows the Google Material Design 3 specifications.

Outlined

Use outlined property explicitly to enable <bs-numeric-field> with outline style. And when combined with floating-label property, <bs-numeric-field> will have a style that follows the Google Material Design 3 specifications.

Filled Rounded

Combine filled property and rounded property explicitly to enable <bs-numeric-field> with rounded pill solid style.

Added in v2.0.5

Outlined Rounded

Combine outlined property and rounded property explicitly to enable <bs-numeric-field> with rounded pill outline style.

Added in v2.0.5

Action Buttons

The BsNumericField has two variants of action buttons to increment/decrement the numeric value.

Updated in v2.2.0

Spin Buttons

The Spin action buttons is the default action buttons. They can be placed on the left or right side (default).

Plus-Minus Buttons

The Plus-Minus action buttons can be enabled by setting the value of action-button property to plus-minus. They can be placed on the left, right (default) or both side.

Clearable

Define the clear-button property explicitly, so that the field value can be cleared easily.

Help Text

The help-text property on <bs-numeric-field> adds an help text beneath the numeric field. And define the persistent-help-off property explicitly to make the help text visible only when the numeric field is focused.

Updated in v2.2.0

Unit Price

Type the product price per-unit

Unit Price

Unit Price

Type the product price per-unit

Unit Price

Unit Price

Type the product price per-unit

Unit Price

Icons

The properties prepend-icon, prepend-icon-outer, append-icon and append-icon-outer provides the ability to add icon to <bs-numeric-field>.

Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled. Suffix _filled and _outlined_filled will display the same icon style variant.

INFO

Since v2.1.0, Google Material Icons are replaced with Google Material Symbols.

Prefixes and Suffixes

The prefix and suffix properties allows you to prepend and append inline non-modifiable text before or after the input field.

Added in v2.0.10

Unit price

Weight

Unit price

Weight

Unit price

Weight

Usage Example

The following is an example that demonstrate more advanced use of the <bs-numeric-field> with form validation.

CSS Variables

As CSS technology evolves, Vue MDBootstrap introduces local CSS variables on .md-field and global CSS variables for better customization.

Updated in v2.2.0

Local CSS

.md-field {
  --md-field-border-width: 1px;
  --md-field-border-color: #{colors.$gray-400};
  --md-field-border-radius: #{vars.$text-field-border-radius};
  --md-field-hover-border-color: currentColor;
  --md-field-active-border-width: 2px;
  --md-field-active-border-color: var(--md-field-active-indicator);
  --md-field-color-bg: currentColor;

  --md-field-outline-bg: transparent;
  --md-field-outline-hover-bg: transparent;
  --md-field-outline-focus-bg: transparent;
  --md-field-outline-border-radius: var(--md-field-border-radius);

  --md-field-control-height: #{vars.$text-field-height};
  --md-field-label-color: currentColor;
  --md-field-label-font-weight: var(--font-weight-medium);
  --md-field-inline-text-font-weight: var(--font-weight-medium);
  --md-field-floating-label-color: var(--md-field-label-color);

  --md-field-padding-start: #{vars.$text-field-padding-start};
  --md-field-padding-end: #{vars.$text-field-padding-end};
  --md-field-padding-top: #{vars.$text-field-padding-top};
  --md-field-padding-bottom: #{vars.$text-field-padding-bottom};
  --md-field-classic-padding-top: #{vars.$text-field-classic-padding-top};
  --md-field-classic-padding-bottom: #{vars.$text-field-classic-padding-bottom};
}

Global CSS

:root {
  --md-field-primary-indicator: oklch(0.458 0.23 304.441);
  --md-field-accent-indicator: oklch(0.743 0.102 303.276);
  --md-field-active-indicator: var(--md-field-primary-indicator);
  --md-field-button-active-bg: oklch(0.154 0 89.876 / 0.25);
  --md-field-button-hover-bg: oklch(0.431 0 89.876 / 0.2);
  --md-field-button-hover-color: oklch(0.209 0 89.876);
  --md-field-button-color: currentColor;
  --md-field-disabled-opacity: 0.4;
  --md-field-readonly-opacity: 0.55;
  --md-caret-size: 5px;
}

API Reference

Property	Type	Default	Description
action-button	String	'up-down'	Shows Up-Down or Plus-Minus action buttons which is used to increment/decrement the numeric value. Valid values are: up-down, plus-minus. Updated in v2.2.0
action-button-placement	String	'right'	Sets the Up-Down or Plus-Minus action buttons placement, valid values: left, right and both.
action-icon-variant	String	'outlined'	Sets the action icon style variant. Valid values are: outlined, rounded, sharp, filled, outlined_filled, rounded_filled, and sharp_filled. Updated in v2.1.0
append-icon	String		Sets icon to display at the inner right side. Updated in v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
append-icon-outer	String		Sets icon to display at the outer right side. Updated in v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
autocomplete	Boolean|String	false	Sets browsers autocomplete predictions on/off.
autofocus	Boolean	false	Autofocus field when this component is mounted.
clear-button	Boolean	false	Sets auto show the clear button.
disabled	Boolean	false	Enable/disable the component and the <input> element.
filled	Boolean	false	Create the component with solid fill style appearance. See Google Material Design for details.
floating-label	Boolean	false	Create the component with floating field label. See Google Material Design for details.
help-text	String		The help text to display below the field component.
id	String		Sets <input> element ID attribute. This property value is auto generates.
locale	String		Defaults locale to be used to format the displayed numeric value. Default is using browser locale.
max-fraction	Number	3	Sets the maximum allowed fraction or decimal digits for the displayed value.
max-value	Number		Sets the maximum allowed value.
min-value	Number		Sets the minimum allowed value.
model-value v-model	Number		Monitored by v-model to maintain this field value. v2.0.0
name	String		Sets <input> element name attribute.
outlined	Boolean	false	Create the component with outline style appearance. See Google Material Design spec.
persistent-help-text deprecated	Boolean	true	Use persistent-help-off instead. Updated in v2.2.0
persistent-help-off	Boolean	false	Prevents help text from being visible when the component is not focused. v2.2.0
placeholder	String		Sets the field placeholder.
prefix	String		Prepend inline non-modifiable text before the input field. v2.0.10
prepend-icon	String		Sets icon to display at the inner left side. Updated in v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
prepend-icon-outer	String		Sets icon to display at the outer left side. Updated in v2.1.0 Use any valid android icon name from Google Material Symbols with or without a suffix. Valid suffixes are: _outlined, _rounded, _sharp, _filled, _outlined_filled, _rounded_filled, and _sharp_filled.
readonly	Boolean	false	Put the component in readonly state and sets the <input> element readonly attribute.
required	Boolean	false	Sets <input> element required attribute.
rounded	Boolean	false	Create the component with rounded-pill style appearance. v2.0.5
step	Number	1.0	Sets the increment/decrement steps value.
suffix	String		Append inline non-modifiable text after the input field. v2.0.10
use-grouping	Boolean	true	Format the displayed numeric value with digit grouping.
validation-icon	Boolean	false	Display validation icon or not, when this field has been validated. v2.0.0
validator	TValidator		The configuration options to integrate external validator plugin to validate this field value. v2.0.0

Name	Arguments	Description
blur	(evt:FocusEvent)	Triggers when cursor leave the <input> element.
clear		Fired after this field value is cleared.
focus	(evt:FocusEvent)	Triggers when cursor entered the <input> element.
keydown	(evt:KeyboardEvent)	Triggers when cursor is still in the <input> element and keyboard key is pressed.
update:model-value	(value:Number)	Used to update the model-value property. v2.0.0

Name	Description
default	The outlet slot used to place the field label.
append-inner	The outlet slot used to place custom icon or component at the inner right side. v2.0.0
append-outer	The outlet slot used to place custom icon or component at the outer right side. v2.0.0
help-text	The outlet slot used for custom help text. v2.0.0
prepend-inner	The outlet slot used to place custom icon or component at the inner left side. v2.0.0
prepend-outer	The outlet slot used to place custom icon or component at the outer left side. v2.0.0

TValidator

The validator configuration option has properties as described below:

Property	Type	Description
validators	Record<String, Boolean>	External validator plugin validation result.
messages	Record<String, Boolean>	Validation message for each validation types.
hasError	Boolean	An indicator that tells the field value pass the validation or not.
dirty	Boolean	Value comes from validator plugin that indicate the field is dirty or not.

All properties are mandatory.

NOTE

Vue MDBootstrap does not include form validation by default, we leave that up to the 3rd party form validation plugin. As of now, Vuelidate has been fully tested with our component library.