NumberField

Numeric input with increment/decrement controls and FormField chrome.

Introduction

Use NumberField when you need increment/decrement steppers, numeric onChange callbacks, and enforced min, max, and step behavior.

Use TextField with type="number" only for a plain numeric input without stepper UI—browser spinners and validation behavior vary by platform, and onChange returns a string rather than a number.

Import

import { NumberField } from "@bridge-ui/vue/Components/NumberField";

import { NumberField } from "@bridge-ui/react/Components/NumberField";

Basic usage

Use the stepper buttons or type a value directly. In React, bind with value and onChange (which receives the numeric value). In Vue, use v-model. For uncontrolled usage with an initial value, use defaultValue in React or default-value in Vue.

Control variants

Use controlVariant to place the increment and decrement controls: stacked (default) stacks chevrons in a column at the end, inline places them in a row at the end, and split uses minus/plus icons on opposite sides and occupies the start slot (start / startIcon).

Min, max, and step

Constrain the allowed range with min and max, and set the increment with step (default 1).

Validation

Set error and errorMessage to show invalid styling and an error message below the field.

TextField, Slider

Accessibility

NumberField follows the FormField accessibility pattern. Stepper buttons include accessible labels for increment and decrement actions.

Label, helper text, and error message are linked via controlId and aria-describedby.
When error is true, the input receives aria-invalid="true".

Anatomy

NumberField composes FormField around a numeric input and stepper controls. Placement depends on controlVariant:

FormField (root)
├── Header — label, optional corner text, required indicator
├── Container — variant shell
│   ├── stacked (default) — Input, then increment above decrement at the end
│   ├── inline — Input, then increment and decrement in a row at the end
│   └── split — Decrement occupies the start slot, Input, Increment at the end
└── Footer — description or error message

API

Prop	Type	Default	Description
default-value	number	—	Initial value for uncontrolled usage (without v-model).
v-model	number	—	Two-way binding for the numeric value.

Prop	Type	Default	Description
defaultValue	number	—	Initial value for uncontrolled usage.
onChange	(value: number) => void	—	Called with the parsed numeric value.
value	number	—	Numeric value. Use with onChange for controlled state.

NumberField-specific

Prop	Type	Default	Description
classes	NumberFieldClasses	—	Classes for the number field.
controlVariant	"inline" \| "split" \| "stacked"	"stacked"	Layout of increment and decrement controls. split uses minus/plus icons and occupies the start slot.
max	number	—	Maximum value.
min	number	—	Minimum value.
step	number	1	Step increment value.

Inherited from FormField

Prop	Type	Default	Description
classes	FormFieldClasses	—	Class overrides per part.
color	FormFieldColor	"primary"	Color applied to the field control.
controlId	string	—	Associates labels and helper text with the control. Auto-generated when omitted.
corner	string	—	Secondary label text at the inline end of the header row.
customProps	FormFieldCustomProps	—	Props for each part. label accepts Label props (without children); error label colors come from Label.
description	string	—	Helper text below the control. Hidden when error and an error message are set, unless showDescriptionOnError.
disabled	boolean	false	Whether the control is disabled.
end	string	—	Inline-end text inside the field (suffix).
endIcon	IconSource	—	Icon at the inline end.
error	boolean	false	Applies invalid styling. Hides description when an error message is shown, unless showDescriptionOnError.
errorIcon	IconSource	"alert"	Icon shown when invalid and showErrorIcon is enabled.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Does not reserve the error row. That row is also omitted while a description is shown.
label	string	—	Primary label text above the control.
readonly	boolean	false	Whether the control is read-only.
required	boolean	false	Shows a red asterisk on the label.
rounded	FormFieldRounded	"md"	Border radius of the field control.
showDescriptionOnError	boolean	false	Keeps the description visible while the field is invalid.
showErrorIcon	boolean	true	Shows an error icon when invalid.
size	FormFieldSize	"md"	Typography and control sizing.
slots	FormFieldSlots	—	React slots. Vue: #label, #corner, default, #description, #errorMessage, #start, #end.
start	string	—	Inline-start text inside the field (prefix).
startIcon	IconSource	—	Icon at the inline start.
variant	FormFieldVariant	"outline"	Visual variant of the field shell.