Numeric, currency and percentage entry with localised formatting, tabular numerals, and strict value semantics.
Plain numeric entry. No symbol, no rounding unless decimals is set.
Currency formatting with symbol from Intl.NumberFormat.
Value is the displayed magnitude. 12.5 displays 12.50% and submits 12.5 — never 0.125.
negative-style="parens" shows (1,234.00) while value stays -1234.
Increment/decrement buttons. 20px tall each on fine pointers; 44x44 side by side on touch.
Three-step scale: sm (32px), md (40px, default), lg (48px).
min/max violations set rangeUnderflow/rangeOverflow. This example uses the invalid attribute to force the display for the Percy snapshot — invalid is author-forced and does not clear on its own; the component's own live range check does (see the next example).
Type a value below 10 or above 100, then leave the field — validate-on="input" here shows the error as you type, past the first change. Type a number back in range and the red clears immediately.
Focusable, submitted, not editable. Surface uses --theme-background-secondary.
Not focusable, not submitted. Opacity reduced.
Four stacked inputs with values of different magnitudes. Tabular numerals and right alignment keep decimal points in a column.
The same components in dark theme. Toggle the theme switch in the toolbar to compare.