Form input

Number input

Predictable numeric models, decimal-safe stepping, and consistent M3 controls.

Quantity

Playground

Configure the component and copy synchronized Vue code.

Quantity

Properties

Controls

Step

Slots

Vue

<m-number-input v-model="quantity" controls="split" :step="1" label="Quantity">
</m-number-input>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MNumberInput · All115 tokens

md-number-input

md-number-input-container-heightg($t, 'container.height')

Resolved value56rem

md-number-input-container-border-widthg($t, 'container.border.width')

Resolved value1rem

md-number-input-container-surfaceg($t, 'container.surface')

Resolved valuetransparent

md-number-input-label-max-widthg($t, 'label.max-width')

Resolved valuecalc(100% - 32rem)

md-number-input-adornment-sizeg($t, 'adornment.size')

Resolved value24rem

md-number-input-unit-menu-min-widthg($t, 'unit.menu.min-width')

Resolved value96rem

md-number-input-stepper-split-widthg($t, 'stepper.split.width')

Resolved value40rem

md-number-input-stepper-split-heightg($t, 'stepper.split.height')

Resolved value40rem

md-number-input-stepper-split-sizeg($t, 'stepper.split.size')

Resolved value24rem

md-number-input-stepper-stacked-widthg($t, 'stepper.stacked.width')

Resolved value30rem

md-number-input-stepper-stacked-heightg($t, 'stepper.stacked.height')

Resolved value44rem

md-number-input-stepper-stacked-sizeg($t, 'stepper.stacked.size')

Resolved value16rem

md-number-input-stepper-radius-sharpg($t, 'stepper.radius.sharp')

System token--sys-shape-corner-extra-small

md-number-input-stepper-radius-smallg($t, 'stepper.radius.small')

System token--sys-shape-corner-medium

md-number-input-stepper-radius-mediumg($t, 'stepper.radius.medium')

System token--sys-shape-corner-large

md-number-input-stepper-radius-largeg($t, 'stepper.radius.large')

System token--sys-shape-corner-extra-large

md-number-input-stepper-radius-pillg($t, 'stepper.radius.pill')

System token--sys-shape-corner-full

md-number-input-scrub-border-widthg($t, 'scrub.border.width')

Resolved value1rem

md-number-input-scrub-border-styleg($t, 'scrub.border.style')

Resolved valuedotted

md-number-input-density-compact-heightg($t, 'density.compact.height')

Resolved value44rem

md-number-input-density-compact-label-topg($t, 'density.compact.label.top')

Resolved value22rem

md-number-input-density-compact-label-raiseg($t, 'density.compact.label.raise')

Resolved value14rem

md-number-input-density-compact-label-transform-insideg($t, 'density.compact.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 14rem)) scale(0.75)

md-number-input-density-compact-label-transform-notchg($t, 'density.compact.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 22rem)) scale(0.75)

md-number-input-density-compact-stepper-splitg($t, 'density.compact.stepper.split')

Resolved value32rem

md-number-input-density-compact-stepper-stackedg($t, 'density.compact.stepper.stacked')

Resolved value36rem

md-number-input-density-default-heightg($t, 'density.default.height')

Resolved value56rem

md-number-input-density-default-label-topg($t, 'density.default.label.top')

Resolved value28rem

md-number-input-density-default-label-raiseg($t, 'density.default.label.raise')

Resolved value18rem

md-number-input-density-default-label-transform-insideg($t, 'density.default.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 18rem)) scale(0.75)

md-number-input-density-default-label-transform-notchg($t, 'density.default.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 28rem)) scale(0.75)

md-number-input-density-default-stepper-splitg($t, 'density.default.stepper.split')

Resolved value40rem

md-number-input-density-default-stepper-stackedg($t, 'density.default.stepper.stacked')

Resolved value44rem

md-number-input-density-comfortable-heightg($t, 'density.comfortable.height')

Resolved value64rem

md-number-input-density-comfortable-label-topg($t, 'density.comfortable.label.top')

Resolved value32rem

md-number-input-density-comfortable-label-raiseg($t, 'density.comfortable.label.raise')

Resolved value20rem

md-number-input-density-comfortable-label-transform-insideg($t, 'density.comfortable.label.transform.inside')

Resolved valuetranslateY(calc(-50% - 20rem)) scale(0.75)

md-number-input-density-comfortable-label-transform-notchg($t, 'density.comfortable.label.transform.notch')

Resolved valuetranslateY(calc(-50% - 32rem)) scale(0.75)

md-number-input-density-comfortable-stepper-splitg($t, 'density.comfortable.stepper.split')

Resolved value40rem

md-number-input-density-comfortable-stepper-stackedg($t, 'density.comfortable.stepper.stacked')

Resolved value48rem

md-number-input-outlined-frameg($t, 'outlined.frame')

Resolved value1rem

md-number-input-outlined-notch-font-sizeg($t, 'outlined.notch.font-size')

Resolved valuecalc(var(--md-sys-typescale-body-large-size) * 0.75)

md-number-input-rounded-sharpg($t, 'rounded.sharp')

System token--sys-shape-corner-none

md-number-input-rounded-smallg($t, 'rounded.small')

System token--sys-shape-corner-extra-small

md-number-input-rounded-mediumg($t, 'rounded.medium')

System token--sys-shape-corner-medium

md-number-input-rounded-largeg($t, 'rounded.large')

System token--sys-shape-corner-large

md-number-input-rounded-pillg($t, 'rounded.pill')

System token--sys-shape-corner-full

md-number-input-container-gapg($t, 'container.gap')

Resolved value4rem

md-number-input-container-padding-inlineg($t, 'container.padding.inline')

Resolved value16rem

md-number-input-label-leftg($t, 'label.left')

Resolved value16rem

md-number-input-label-split-leftg($t, 'label.split.left')

Resolved value60rem

md-number-input-label-split-notch-shiftg($t, 'label.split.notch.shift')

Resolved valuecalc(var(--ui-number-input-inset) - 60rem)

md-number-input-adornment-gapg($t, 'adornment.gap')

Resolved value8rem

md-number-input-unit-gapg($t, 'unit.gap')

Resolved value4rem

md-number-input-unit-padding-inlineg($t, 'unit.padding.inline')

Resolved value8rem

md-number-input-unit-padding-blockg($t, 'unit.padding.block')

Resolved value6rem

md-number-input-stepper-insetg($t, 'stepper.inset')

Resolved value4rem

md-number-input-scrub-padding-inlineg($t, 'scrub.padding.inline')

Resolved value12rem

md-number-input-scrub-gapg($t, 'scrub.gap')

Resolved value2rem

md-number-input-support-padding-inlineg($t, 'support.padding.inline')

Resolved value16rem

md-number-input-support-margin-topg($t, 'support.margin.top')

Resolved value4rem

md-number-input-density-compact-input-padding-topg($t, 'density.compact.input.padding.top')

Resolved value18rem

md-number-input-density-compact-input-padding-bottomg($t, 'density.compact.input.padding.bottom')

Resolved value4rem

md-number-input-density-compact-stepper-offsetg($t, 'density.compact.stepper.offset')

Resolved value7rem

md-number-input-density-default-input-padding-topg($t, 'density.default.input.padding.top')

Resolved value24rem

md-number-input-density-default-input-padding-bottomg($t, 'density.default.input.padding.bottom')

Resolved value8rem

md-number-input-density-default-stepper-offsetg($t, 'density.default.stepper.offset')

Resolved value8rem

md-number-input-density-comfortable-input-padding-topg($t, 'density.comfortable.input.padding.top')

Resolved value28rem

md-number-input-density-comfortable-input-padding-bottomg($t, 'density.comfortable.input.padding.bottom')

Resolved value10rem

md-number-input-density-comfortable-stepper-offsetg($t, 'density.comfortable.stepper.offset')

Resolved value9rem

md-number-input-filled-input-padding-topg($t, 'filled.input.padding.top')

Resolved value24rem

md-number-input-filled-input-padding-bottomg($t, 'filled.input.padding.bottom')

Resolved value8rem

md-number-input-outlined-insetg($t, 'outlined.inset')

Resolved valuemax(16rem, min(var(--ui-number-input-radius), var(--ui-number-input-height) / 2) + 4rem)

md-number-input-outlined-outline-padding-startg($t, 'outlined.outline.padding.start')

Resolved valuecalc(var(--ui-number-input-inset) - 5rem)

md-number-input-outlined-notch-padding-inlineg($t, 'outlined.notch.padding.inline')

Resolved value4rem

md-number-input-container-border-colorg($t, 'container.border.color')

System token--md-sys-color-outline

md-number-input-label-colorg($t, 'label.color')

System token--md-sys-color-on-surface-variant

md-number-input-label-required-colorg($t, 'label.required.color')

System token--md-sys-color-error

md-number-input-input-colorg($t, 'input.color')

System token--md-sys-color-on-surface

md-number-input-input-placeholder-colorg($t, 'input.placeholder.color')

System token--md-sys-color-on-surface-variant

md-number-input-adornment-colorg($t, 'adornment.color')

System token--md-sys-color-on-surface-variant

md-number-input-unit-colorg($t, 'unit.color')

System token--md-sys-color-on-surface-variant

md-number-input-stepper-colorg($t, 'stepper.color')

System token--md-sys-color-on-surface-variant

md-number-input-stepper-surfaceg($t, 'stepper.surface')

System token--md-sys-color-surface-container-high

md-number-input-stepper-filled-surfaceg($t, 'stepper.filled.surface')

System token--md-sys-color-on-surface

md-number-input-scrub-colorg($t, 'scrub.color')

System token--md-sys-color-primary

md-number-input-support-colorg($t, 'support.color')

System token--md-sys-color-on-surface-variant

md-number-input-filled-surfaceg($t, 'filled.surface')

System token--md-sys-color-surface-container-highest

md-number-input-filled-border-colorg($t, 'filled.border.color')

System token--md-sys-color-on-surface-variant

md-number-input-typography-labelg($t, 'typography.label')

Resolved valuebody-large

md-number-input-typography-inputg($t, 'typography.input')

Resolved valuebody-large

md-number-input-typography-supportg($t, 'typography.support')

Resolved valuebody-small

md-number-input-typography-unitg($t, 'typography.unit')

Resolved valuelabel-large

md-number-input-typography-scrubg($t, 'typography.scrub')

Resolved valuelabel-large

md-number-input-label-active-scaleg($t, 'label.active.scale')

Resolved value0.75

md-number-input-label-active-raise-filledg($t, 'label.active.raise.filled')

Resolved value18rem

md-number-input-unit-selected-colorg($t, 'unit.selected.color')

System token--md-sys-color-primary

md-number-input-stepper-disabled-colorg($t, 'stepper.disabled.color')

System token--md-sys-color-on-surface

md-number-input-layer-hoverg($t, 'layer.hover')

Resolved value0.08

md-number-input-layer-pressedg($t, 'layer.pressed')

Resolved value0.12

md-number-input-scrub-active-colorg($t, 'scrub.active.color')

System token--md-sys-color-primary

md-number-input-focused-border-colorg($t, 'focused.border.color')

System token--md-sys-color-primary

md-number-input-focused-label-colorg($t, 'focused.label.color')

System token--md-sys-color-primary

md-number-input-error-border-colorg($t, 'error.border.color')

System token--md-sys-color-error

md-number-input-error-colorg($t, 'error.color')

System token--md-sys-color-error

md-number-input-disabled-surfaceg($t, 'disabled.surface')

System token--md-sys-color-on-surface

md-number-input-disabled-border-colorg($t, 'disabled.border.color')

System token--md-sys-color-on-surface

md-number-input-disabled-colorg($t, 'disabled.color')

System token--md-sys-color-on-surface

md-number-input-filled-hover-surfaceg($t, 'filled.hover.surface')

System token--md-sys-color-on-surface

md-number-input-filled-hover-border-colorg($t, 'filled.hover.border.color')

System token--md-sys-color-on-surface

md-number-input-filled-disabled-surfaceg($t, 'filled.disabled.surface')

System token--md-sys-color-on-surface

md-number-input-outlined-hover-border-colorg($t, 'outlined.hover.border.color')

System token--md-sys-color-on-surface

MNumberInput API

Props, slots, and events are generated from the current public kit contract.

MNumberInput

Field family

src/runtime/components/ui/number-input

Props

NameTypeDefault

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

readonly

booleanfalse

variant

'filled' | 'outlined''filled'

rounded

'sharp' | 'small' | 'medium' | 'large' | 'pill''small'

labelPlacement

'top' | 'float' | 'inset' | 'hidden''float'

path

stringundefined

name

stringundefined

label

stringundefined

placeholder

stringundefined

helperText

stringundefined

error

booleanfalse

errorMessage

stringundefined

required

booleanfalse

autofocus

booleanfalse

autocomplete

stringundefined

density

'compact' | 'default' | 'comfortable''default' as MFieldDensity

min

numberundefined

max

numberundefined

step

number1

precisionDecimal places. Inferred from `step` when omitted.

numberundefined

locale

string'en-US'

useGrouping

booleantrue

controls

'split' | 'stacked' | 'scrub' | false'split'

clampPull committed values back inside `min`/`max`. Never applied per keystroke.

booleantrue

unitsUnits to choose from. With a list the unit zone becomes a menu bound to `v-model:unit`; without one it stays a static suffix. Picking a unit **relabels only** — the number is left exactly as it is. Converting 512 MiB into 0.5 GiB needs a scale the field does not have, and silently rescaling a value the user typed is worse than not converting.

MNumberInputUnit[]undefined

unitLabelAccessible name of the unit menu trigger.

stringMESSAGES.numberUnit

incrementLabelAccessible name of the increase control.

stringMESSAGES.numberIncrement

decrementLabelAccessible name of the decrease control.

stringMESSAGES.numberDecrement

Slots

Events

@incrementnumber

@decrementnumber

@invalidstring