Inputs
NumberField
Bit.BlazorUINumberInput
A NumberField (number input, spin button) edits a value of any .NET numeric type, with bounds, stepping and snapping, rounding, .NET formatting in any culture, spin buttons in three layouts, the full ARIA spinbutton keyboard set and EditForm validation.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
TValue picks the numeric type (inferred from a bound value); a nullable one allows an empty field.
The value commits on blur or Enter and parses with the invariant culture; text that is not a number is reported
through validation, never dropped. Focus selects the text (NoSelectOnFocus turns that off).
Keyboard: Up/Down step, PageUp/PageDown jump, Home/End jump to the bounds.
Binding
One-way with Value, two-way with @bind-Value, or uncontrolled with DefaultValue and
OnChange.
last OnChange value: []
Spin buttons
Mode renders the buttons Compact (stacked), Inline (side by side) or Spread (one on each
side); unset, there are none. Holding a button spins after ContinuousSpinDelay, every
ContinuousSpinInterval ms. A mouse press keeps the caret in the input; a touch tap does not focus it, so no
soft keyboard pops up.
HideInput leaves a stepper only (Compact unless a Mode is given) whose buttons are the tab stops.
0
Min & Max
Min/Max clamp typed and spun values; unset, the range of the type applies. An explicit bound enables
Home/End, sets aria-valuemin/max and makes the button that would pass it inert.
NoClamp lets a typed out-of-range value through for a validator to report; stepping still stays inside.
value: [0]
value: [0]
value: [0]
value: [0]
Step, precision & snapping
Step is what a spin adds; a fractional one also sets the rounding. PageStep is the PageUp/PageDown
jump (10 × Step by default). Precision rounds explicitly - negative rounds to tens, hundreds, ...
SnapToStep puts typed values on the step grid, anchored at Min.
value: [0]
value: [0]
value: [0]
value: [0]
value: [2]
value: [0]
Numeric types
Every .NET numeric type and its nullable variant. A number past the type's range clamps to it (300 into a
byte gives 255). The type picks the mobile keypad; use InputMode="BitInputMode.Text" when negatives
must be typed on touch.
value: [5]
value: [1000000000000]
value: [0.05]
value: [-5]
Label position & template
LabelPlacement puts the label on any side; LabelTemplate replaces it with your own markup.
Description, error & loading
Description is a hint under the field, ErrorMessage a rejection (paints the field, sets aria-invalid,
announced politely), Invalid a rejection without a message, and Loading a busy indicator that keeps
the field editable (LoadingAriaLabel is what is announced). Each has a template variant;
AriaDescription adds screen-reader-only text.
Between 1 and 99 items per order.
We hold the room for 15 minutes.
Anything above 50% needs a manager's approval.
The hint wraps onto a line of its own.
Appearance
Underlined draws only a bottom rule, NoBorder removes the border, FullWidth fills the container.
Icon, prefix & suffix
IconName adds a glyph (named by IconAriaLabel). Prefix/Suffix show a unit or currency that
is never part of the value, and are read out with the field. PrefixTemplate/SuffixTemplate take markup.
Distance:
km
Distance:
km
USD
Clear button
ShowClearButton shows an X whenever the input holds text, including text that failed to parse. It is not a
tab stop - Escape does the same. Customize with ClearButtonIconName, ClearButtonAriaLabel or
ClearButtonTemplate; OnClear reports it.
cleared: 0 time(s)
Number format & culture
NumberFormat takes a .NET format string (N0, C2, 000000) and is display-only: the bound value
stays a number and editing shows it plain. Scaling formats like P are not supported.
Culture pins the separators; unset, a format follows the thread culture and plain text stays invariant.
value: []
Input behavior
Immediate commits per keystroke (with DebounceTime/ThrottleTime). ReadOnly blocks every
change; IsInputReadOnly blocks only typing. Shift + wheel spins a focused field (InvertMouseWheel,
NoMouseWheel). EnterKeyHint labels the enter key of a virtual keyboard.
Value: []
Value: []
Value: []
NormalizeDigits
NormalizeDigits accepts Persian/Arabic digits and separators, in the input and in Min/Max/Step.
DigitsNormalizer plugs in your own function.
Value:
Value:
Value:
Value:
Events
OnIncrement/OnDecrement fire for every spin, whatever the device; OnMinReached/OnMaxReached
once per approach to an explicit bound. OnEnter runs after the typed text commits, OnEscape before
the field clears. Key, click and focus events are surfaced too.
OnIncrement Counter: 0
OnDecrement Counter: 0
OnChange Counter: 0
[]
[]
Escape pressed 0 time(s)
Last key down: []
OnKeyUp Counter: 0
OnClick Counter: 0
Public API
IncrementAsync, DecrementAsync and ClearAsync do what the field's own controls do - bounds,
snapping and callbacks included - and are safe from any thread. FocusAsync focuses the input (the increment
button with HideInput).
value: [4]
Validation
Works with EditForm and data annotations. Unparsable text stays in the input with ParsingErrorMessage
({0} is the DisplayName). Pair NoClamp with [Range] to report rather than correct.
Accessibility
The input is an ARIA spinbutton: aria-valuenow/min/max stay in sync, aria-valuetext is added when the text
differs from the number (AriaValueText overrides it), and aria-required/aria-readonly are written out.
The buttons are named (IncrementAriaLabel, DecrementAriaLabel, ClearButtonAriaLabel), point
aria-controls at the input, and step on an assistive technology's activation too; a step the input did not take
focus for is announced through a live region. On touch, Compact buttons grow to the 24px minimum target.
AriaSetSize/AriaPositionInSet place the field in a set.
Cascading parameters
BitParams with a BitNumberFieldParams sets defaults for every number field inside it. A field's own
parameters win; only unset ones are filled in.
cm
Between 0 and 500, in steps of 5.
cm
Between 0 and 500, in steps of 5.
m
Between 0 and 500, in steps of 5.
Background
Background picks the fill (Primary by default); Transparent blends into a colored surface.
Border
Border picks the border color (Primary by default). Transparent hides it but keeps its space, unlike
NoBorder.
Accent
Accent colors the focus ring, the busy indicator, and the icon/prefix/suffix while focused. An invalid field
still shows the error color. Focus a field to see it.
$
$
$
$
$
$
$
$
$
$
$
$
$
$
$
$
$
External Icons
Icon, IncrementIcon, DecrementIcon and ClearButtonIcon take a BitIconInfo for any
external icon set (FontAwesome, Bootstrap Icons, ...).
Size
Size scales the height, text, icons and buttons together.
kg
kg
kg
Style & Class
Reach for the --bit-NumberField-* CSS variables first (listed in the API section): they inherit, so set them
on :root, an ancestor or an instance's Style. They restyle the default, not a choice: an explicit
Accent, Background, Border or Size wins over the variables for what it sets. Style/Class and
Styles/Classes (per part, plus Focused) cover the rest.
CSS variables:
cm
Style & Class:
Styles & Classes:
The description is styleable too.
RTL
Dir or a cascading BitDir.Rtl mirrors the whole field.
کیلوگرم
CSS variables
The public custom properties this component reads off its root, for what no parameter covers.
Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property:
set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it,
or on the Style of one instance to restyle it - and any instance nested inside it, which inherits the value too; a parameter changes one alone,
as does the real CSS property on the instance's Style / Styles when that property does not inherit (opacity: 1 keeps
one disabled instance undimmed without undimming a disabled one inside it), while an inherited one such as color or
font-family also reaches the nested instances that do not set it themselves. Leave a variable unset and the component
falls back to the theme token beside it.
BitNumberField CSS variables
| Name | Default value | Description |
|---|---|---|
| --bit-NumberField-color | --bit-clr-fg-pri | Color of the value text. |
| --bit-NumberField-placeholder-color | --bit-clr-fg-sec | Color of the placeholder. |
| --bit-NumberField-background | --bit-clr-bg-pri | Fill of the field. The Background parameter wins over it. |
| --bit-NumberField-border-color | --bit-clr-brd-pri | Border color at rest. An invalid field takes the error color instead. The Border parameter wins over it. |
| --bit-NumberField-hover-border-color | --bit-clr-brd-pri-hover | Border color under a hovering pointer, on an editable field that is neither focused nor invalid. The Border parameter wins over it. |
| --bit-NumberField-border-width | --bit-shp-brd-width | Thickness of that border, and of the bottom rule of the Underlined variant. |
| --bit-NumberField-radius | --bit-shp-radius-control | Corner radius of the field, which its buttons follow. |
| --bit-NumberField-focus-color | --bit-clr-pri-focus | Color of the keyboard focus indicator - the ring, or the thicker bottom rule of the Underlined variant. The Accent parameter wins over it. While it is unset, the focus ring is the library's own --bit-shd-focus-ring, so replacing that token re-shapes it too. |
| --bit-NumberField-height | --bit-siz-ctrl-md | Height of the field. On a coarse pointer the Compact mode grows past it so each of its stacked buttons clears the 24px minimum pointer target. The Size parameter wins over it. |
| --bit-NumberField-padding-inline | spacing(1), in step with BitTextField | Room between the border and the value. The Size parameter wins over it. |
| --bit-NumberField-font-size | --bit-tpg-fs-sm | Size of the value text, and of the prefix and suffix beside it. The Size parameter wins over it. |
| --bit-NumberField-label-color | --bit-clr-fg-pri | Color of the label. |
| --bit-NumberField-label-font-size | --bit-tpg-fs-sm | Size of the label. The Size parameter wins over it. |
| --bit-NumberField-label-font-weight | --bit-tpg-field-label-font-weight | Weight of the label. |
| --bit-NumberField-required-color | --bit-clr-req | Color of the asterisk of a required field. |
| --bit-NumberField-description-color | --bit-clr-fg-pri | Color of the hint under the field. |
| --bit-NumberField-description-font-size | --bit-tpg-fs-2xs | Size of that hint, and of the error message. |
| --bit-NumberField-error-color | --bit-clr-err | Color of the error message, and of the border and focus indicator of an invalid field. |
| --bit-NumberField-icon-color | --bit-clr-fg-pri, --bit-clr-pri while focused | Color of the field's own icon. The Accent parameter wins over it while the field is focused. |
| --bit-NumberField-icon-size | --bit-siz-icon-md | Size of that icon. The Size parameter wins over it. |
| --bit-NumberField-affix-color | --bit-clr-fg-pri, --bit-clr-pri while focused | Color of the prefix and the suffix. The Accent parameter wins over it while the field is focused. |
| --bit-NumberField-affix-background | --bit-clr-bg-sec | Fill behind the prefix and the suffix. |
| --bit-NumberField-button-color | --bit-clr-fg-pri (spin), --bit-clr-fg-sec (clear) | Glyph color of the spin and clear buttons at rest. |
| --bit-NumberField-button-hover-color | --bit-clr-fg-pri-hover | The same while hovered (pointer devices only). |
| --bit-NumberField-button-hover-background | --bit-clr-bg-pri-hover | Fill of a hovered spin or clear button. |
| --bit-NumberField-button-active-color | --bit-clr-fg-pri-active | Glyph color of a pressed button, i.e. one being held down to spin continuously. |
| --bit-NumberField-button-active-background | --bit-clr-bg-pri-active | Fill of a pressed spin or clear button. |
| --bit-NumberField-button-inert-color | --bit-clr-fg-dis | Glyph color of a button that is disabled or sitting on the bound it steps towards. |
| --bit-NumberField-button-width | --bit-siz-ctrl-md, and spacing(3) for the stacked pair of the Compact mode | Width of a spin button and of the clear button. The stacked pair of the Compact mode is narrower than the single button of the other modes by default. The Size parameter wins over it. |
| --bit-NumberField-button-icon-size | --bit-tpg-fs-xs | Size of the glyph inside those buttons. The Size parameter wins over it. |
| --bit-NumberField-loading-color | --bit-clr-pri | Color of the busy indicator. The Accent parameter wins over it. |
| --bit-NumberField-spinner-size | the icon size plus the spinner stroke on each side (--bit-siz-icon-md plus two strokes) | Diameter of the default busy spinner. The Size parameter wins over it. |
| --bit-NumberField-spinner-color | the busy indicator's color | Color of the moving arc of the default busy spinner. The Accent parameter wins over it, and a disabled field greys it regardless. |
| --bit-NumberField-spinner-track-color | the arc color at 25% | Color of the ring the arc of the default busy spinner travels on. |
| --bit-NumberField-disabled-color | --bit-clr-fg-dis | Text, label, hint and glyph color of a disabled field. |
| --bit-NumberField-disabled-background | --bit-clr-bg-dis | Fill of a disabled field. |
API
Every parameter, public member, sub-class and enum this component exposes.
BitNumberField parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accent | BitColor? | null | The general color of the number field, used for its focus indicator and for the icon, prefix and suffix while the field is focused (Primary by default). An explicit value wins over the --bit-NumberField-* variables it paints (the focus color, the focused icon and affix colors, the loading and spinner colors); left unset, the accent is primary unless they say otherwise. |
| AriaDescription | string? | null | Detailed description of the input for the benefit of screen readers. It is rendered into a visually hidden element that the input references through its aria-describedby attribute. |
| AriaPositionInSet | int? | null | The position in the parent set (if in a set). |
| AriaSetSize | int? | null | The total size of the parent set (if in a set). |
| AriaValueNow | TValue? | null | Sets the control's aria-valuenow. Providing this only makes sense when using as a controlled component. |
| AriaValueText | string? | null | Sets the control's aria-valuetext. |
| Background | BitColorKind? | null | The color kind of the number field background (Primary by default). An explicit value wins over --bit-NumberField-background; left unset, the background is the primary kind unless it says otherwise. |
| Border | BitColorKind? | null | The color kind of the number field border (Primary by default). An explicit value wins over --bit-NumberField-border-color and --bit-NumberField-hover-border-color; left unset, the border is the primary kind unless they say otherwise. |
| Classes | BitNumberFieldClassStyles? | null | Custom CSS classes for different parts of the BitNumberField. |
| ContinuousSpinDelay | int | 400 | The delay in milliseconds before the value starts changing continuously while an increment/decrement button is held down. |
| ContinuousSpinInterval | int | 75 | The interval in milliseconds between two consecutive value changes while an increment/decrement button is held down. |
| Culture | CultureInfo? | null | The culture the value is written and read in. Left unset, a NumberFormat renders in the culture of the current thread while the plain (unformatted) value is written and parsed with the invariant culture. Setting it pins both to one culture, so the field shows and accepts that culture's separators regardless of the thread. The aria-valuenow/valuemin/valuemax attributes stay invariant either way, and the culture's rendering is announced through aria-valuetext. |
| DecrementAriaLabel | string? | null | Accessible label text for the decrement button (for screen reader users), useful for localization. Unset or blank, the button is named BitStrings.Current.DecreaseValue ("Decrease value" by default). |
| DecrementIcon | BitIconInfo? | null | Gets or sets the icon to display on the decrement button using custom CSS classes for external icon libraries. Takes precedence over DecrementIconName when both are set. |
| DecrementIconName | string? | null | Gets or sets the name of the icon for the decrement button from the built-in Fluent UI icons. For external icon libraries, use DecrementIcon instead. Unset, the button shows ChevronDownSmall. |
| DecrementTitle | string? | null | The title to show when the mouse is placed on the decrement button. |
| Description | string? | null | A hint rendered under the field, describing what is expected of it (e.g. the accepted range or the unit). Unlike AriaDescription it is visible, and the input references it through its aria-describedby attribute so it is announced along with the field. |
| DescriptionTemplate | RenderFragment? | null | A custom template rendered in place of the Description, referenced by the input through its aria-describedby attribute just the same. |
| DigitsNormalizer | Func<string?, string?>? | null | A custom function to normalize the raw input string before it gets parsed into the value. When provided, it takes precedence over NormalizeDigits and lets the developer plug in their own culture-specific or domain-specific transformation. |
| EnterKeyHint | string? | null | The action label of the enter key on a virtual keyboard (enterkeyhint), e.g. "done", "next", "go", "search" or "send". On a numeric soft keyboard the key is otherwise unlabeled. |
| ErrorMessage | string? | null | An error message rendered under the field, which also marks the field as invalid and is announced through a polite live region the moment it appears. It is the way to report what a validator outside of an EditContext found - a server-side check, a business rule - without having to build a form around the field. |
| ErrorMessageAriaLabel | string? | null | The text a screen reader is given for a rejection that has no text of its own: an ErrorMessageTemplate, which is free to render anything at all, or the forced Invalid state. It is announced through the live region the moment the rejection shows up - in place of the default "Invalid input" for a template, and only when it is set for the forced state - and the input references it through aria-describedby, so the same reason is read out on every later focus too. A plain ErrorMessage is its own text and never uses it. Give it the reason the template shows, in the language of the page: a template switching to another reason is only announced again when this text switches along with it. Cascaded through BitParams it reaches every number field under it, so set it there only as a generic replacement for "Invalid input". |
| ErrorMessageTemplate | RenderFragment? | null | A custom template rendered in place of the ErrorMessage, marking the field invalid and referenced by the input through its aria-describedby attribute just the same. It replaces the message for a screen reader as well: a template is free to render anything at all, so the live region announces ErrorMessageAriaLabel for it, or a bare "Invalid input" when that is not set. |
| FullWidth | bool | false | Stretches the number field to the full width of its container. By default the field only takes the width it needs, which keeps a stepper from spanning a whole form row. |
| HideInput | bool | false | Hides the text input element while keeping the increment/decrement buttons functional, turning the component into a stepper-only control. |
| IconAriaLabel | string? | null | The aria label of the icon for the benefit of screen readers. |
| Icon | BitIconInfo? | null | Gets or sets the icon to display alongside the number field using custom CSS classes for external icon libraries. Takes precedence over IconName when both are set. |
| IconName | string? | null | Gets or sets the name of the icon to display alongside the number field from the built-in Fluent UI icons. For external icon libraries, use Icon instead. |
| IncrementAriaLabel | string? | null | Accessible label text for the increment button (for screen reader users), useful for localization. Unset or blank, the button is named BitStrings.Current.IncreaseValue ("Increase value" by default). |
| IncrementIcon | BitIconInfo? | null | Gets or sets the icon to display on the increment button using custom CSS classes for external icon libraries. Takes precedence over IncrementIconName when both are set. |
| IncrementIconName | string? | null | Gets or sets the name of the icon for the increment button from the built-in Fluent UI icons. For external icon libraries, use IncrementIcon instead. Unset, the button shows ChevronDownSmall turned upside down. |
| IncrementTitle | string? | null | The title to show when the mouse is placed on the increment button. |
| InputMode | BitInputMode? | null | Overrides the virtual keyboard the browser shows for the input. By default it is Numeric for the integral types and Decimal for the fractional ones (float, double and decimal). Since neither of those keypads offers a minus sign on every platform, a field that has to accept negative values on touch devices is better served by Text, which brings up the full keyboard. |
| Invalid | bool | false | Marks the field as invalid without a message of its own, for a rejection that is already explained elsewhere (a summary at the top of the form, a message beside a group of fields). It paints the field and renders aria-invalid exactly as a failing validation does, and says nothing more to a screen reader unless ErrorMessageAriaLabel gives it a reason to announce. |
| InvertMouseWheel | bool | false | Reverses the direction of the value change when the user spins the value using the mouse wheel (the wheel only changes the value while the Shift key is held down, to keep normal page scrolling intact). |
| IsInputReadOnly | bool | false | Makes only the text input part read-only, preventing typing, while the value can still be changed using the increment/decrement buttons, the arrow keys and the mouse wheel (unlike ReadOnly, which blocks all of them). |
| LabelPlacement | BitPlacement? | null | The position of the label in regards to the field (Top by default). Only Top, Bottom, Start and End are honoured; any other value leaves the layout as it is with this unset. |
| Label | string? | null | Descriptive label for the number field, rendered next to it (per LabelPlacement) and read by screen readers. |
| LabelTemplate | RenderFragment? | null | Shows the custom Label for number field. If you don't call default label, ensure that you give your custom label an id and that you set the input's aria-labelledby prop to that id. |
| Min | string? | null | The minimum value of the number field. Values below it get clamped to it, both when typed and when spinning. It is a string to support any numeric type of the field; an unparsable value falls back to the type's MinValue. |
| Loading | bool | false | Shows a busy indicator inside the field, which is what tells the user that something is running against the value - a price being recalculated, a quantity being checked against stock. The field stays editable while it is on, so the typing and the stepping are never interrupted by it. |
| LoadingAriaLabel | string? | null | What a screen reader announces while Loading is on, useful for localization. Unset or blank, it is BitStrings.Current.Loading ("Loading" by default). It is announced whichever indicator is drawn, and along with any error message shown at the time, so a LoadingTemplate drawing a bare spinner of its own, or a rejected value being checked again, still tells an assistive technology that something is running. |
| LoadingTemplate | RenderFragment? | null | The custom content of the busy indicator, which replaces the default spinner. |
| Max | string? | null | The maximum value of the number field. Values above it get clamped to it, both when typed and when spinning. It is a string to support any numeric type of the field; an unparsable value falls back to the type's MaxValue. |
| Mode | BitSpinButtonMode? | null | Determines how the increment/decrement buttons render: Compact (stacked at the end of the input), Inline (side by side at the end) or Spread (one on each side). When null (default), no buttons render, while the value can still be changed using the arrow keys and the mouse wheel. |
| NoBorder | bool | false | Removes the border of the number field, which is what you want when it sits inside a surface that already provides one (a toolbar, a table cell or a card). |
| NoClamp | bool | false | Keeps values typed outside of the Min/Max range intact instead of clamping them to the nearest bound, so that a form validation (e.g. a [Range] data annotation) can report the out-of-range value to the user instead of it being silently corrected. Stepping with the increment/decrement buttons, the arrow keys or the mouse wheel still stays inside the range, and the Home/End keys still jump to the bounds. |
| NoMouseWheel | bool | false | Disables changing the value using the mouse wheel entirely (by default the value changes when the wheel is scrolled over the focused field while the Shift key is held down). |
| NoSelectOnFocus | bool | false | Disables the automatic select-all of the input's text when the field receives focus. |
| NormalizeDigits | bool | false | Normalizes non-Latin (e.g. Persian "۱۲۳" or Arabic "١٢٣") decimal digits to their Latin (0-9) equivalents before parsing. This is culture-agnostic and works for any Unicode decimal digit system. |
| NumberFormat | string? | null | The format of the number in the number field, using the standard or custom .NET numeric format strings (e.g. "N0", "C0" or "000000"). The formatting is applied whenever the value is committed, while the bound value stays a plain number. Value-scaling formats (like the percent "P" format) are not suitable, since the scaled display cannot be parsed back into the same value. |
| OnBlur | EventCallback<FocusEventArgs> | Callback for when the control loses focus. | |
| OnClear | EventCallback | Callback executed when the user clears the number field by clicking the clear button. | |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the input is clicked. | |
| OnDecrement | EventCallback<TValue> | Callback for when the decrement button or down arrow key is pressed. | |
| OnEnter | EventCallback<KeyboardEventArgs> | Callback for when the Enter key is pressed on the input. It is invoked after the typed text has been committed, so the bound value it observes is already the one the user just entered. | |
| OnEscape | EventCallback<KeyboardEventArgs> | Callback for when the Escape key is pressed on the input. It is invoked before the field clears itself (which it only does while a clear button is shown), so a handler is free to take the key for something else. | |
| OnFocus | EventCallback<FocusEventArgs> | Callback for when focus moves into the input. | |
| OnFocusIn | EventCallback<FocusEventArgs> | Callback for when focus moves into the input. | |
| OnFocusOut | EventCallback<FocusEventArgs> | Callback for when focus moves out of the input. | |
| OnIncrement | EventCallback<TValue> | Callback for when the increment button or up arrow key is pressed. | |
| OnKeyDown | EventCallback<KeyboardEventArgs> | Callback for when a key is pressed down on the input. It is invoked for every key, including the ones the field handles itself (the arrow keys, PageUp/PageDown, Home/End and Escape). | |
| OnKeyUp | EventCallback<KeyboardEventArgs> | Callback for when a key is released on the input. | |
| OnMaxReached | EventCallback<TValue> | Callback for when a step lands the value on (or beyond) the explicit Max, letting the consumer react to the ceiling being hit. It only fires for an explicit Max, and only on the step that reaches it. | |
| OnMinReached | EventCallback<TValue> | Callback for when a step lands the value on (or beyond) the explicit Min. It only fires for an explicit Min, and only on the step that reaches it. | |
| PageStep | string? | null | The amount by which the value changes when the user presses the PageUp/PageDown keys, providing a larger jump than the regular Step. It is a string to support any numeric type of the field; when not provided (or unparsable), PageUp/PageDown change the value by 10 times the Step. |
| ParsingErrorMessage | string | "The {0} field is not valid." | The message format used for invalid values entered in the input. |
| Placeholder | string? | null | Input placeholder text. |
| Precision | int? | null | How many decimal places the value should be rounded to. When not provided, the precision is derived from the fractional digits of the Step parameter (if any); otherwise no rounding is applied. A negative value rounds to a power of ten (e.g. -2 rounds to the nearest hundred). |
| Prefix | string? | null | Prefix displayed before the numeric field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the prefix. |
| PrefixTemplate | RenderFragment? | null | Shows the custom prefix for numeric field. |
| ClearButtonIcon | BitIconInfo? | null | Gets or sets the icon to display on the clear button using custom CSS classes for external icon libraries. Takes precedence over ClearButtonIconName when both are set. |
| ClearButtonIconName | string? | null | Gets or sets the name of the icon for the clear button from the built-in Fluent UI icons. For external icon libraries, use ClearButtonIcon instead. Unset, the button shows Cancel. |
| ClearButtonAriaLabel | string? | null | Accessible label text for the clear button (for screen reader users), useful for localization. Unset or blank, the button is named BitStrings.Current.ClearValue ("Clear value" by default), whatever a ClearButtonTemplate shows in it. |
| ClearButtonTemplate | RenderFragment? | null | A custom template rendered inside the clear button in place of its icon. The button itself - its accessible name, its click and Escape handling - stays the same. That name is ClearButtonAriaLabel, not the template: a template showing words (a visible "Reset") needs ClearButtonAriaLabel to contain them, or a voice-control user saying what they see finds no button. |
| ShowClearButton | bool | false | Whether to show the clear button whenever the field is showing something, resetting the value to null with a single click (most useful with nullable value types). "Showing something" covers a string the user typed that failed to parse as well as a real value, so the button is also there to wipe an entry that has to be corrected. It is not rendered while the field is read-only or empty. It stays out of the tab order (like the increment/decrement buttons), the Escape key being the keyboard equivalent of clicking it - a press that is the field's alone, so a Dialog, a Modal, a Panel or an Overlay around it closes on the next one. |
| Size | BitSize? | null | Sets the preset size (Small, Medium, Large) of the number field: the height of the control, its type scale, the size of its icons and the width of its buttons all follow it, so a field lines up with the other controls of the same size around it (Medium by default). An explicit value wins over the --bit-NumberField-* size variables (height, font sizes, inline padding, icon size, spinner size, button width and glyph size); left unset, the field is medium unless they say otherwise. |
| SnapToStep | bool | false | Snaps the committed value to the nearest multiple of the Step (anchored at the Min when one is provided), so typed values align to the same grid that the increment/decrement stepping produces. Without it, typed values are kept as-is (aside from min/max clamping and precision rounding). |
| Step | string? | null | The difference between two adjacent values of the number field, applied when spinning the value using the increment/decrement buttons, the Up/Down arrow keys or the mouse wheel. A fractional step (e.g. "0.01") also implies the rounding precision of the field, unless an explicit Precision is provided. It is a string to support any numeric type of the field; an unparsable value falls back to 1. |
| Styles | BitNumberFieldClassStyles? | null | Custom CSS styles for different parts of the BitNumberField. |
| Suffix | string? | null | Suffix displayed after the numeric field contents. This is not included in the value. Ensure a descriptive label is present to assist screen readers, as the value does not include the suffix. |
| SuffixTemplate | RenderFragment? | null | Shows the custom suffix for numeric field. |
| Title | string? | null | A more descriptive title for the control, visible on its tooltip. |
| Underlined | bool | false | Renders the number field with a single bottom rule instead of a full border, the classic "underlined" input variant. |
BitNumberField public members
| Name | Type | Default value | Description |
|---|---|---|---|
| ClearAsync | Task | Clears whatever the field is showing - a value or a string that failed to parse - and raises OnClear, exactly as the clear button and the Escape key do (without requiring ShowClearButton, since there is no button involved). It does nothing while the field is disabled or read-only. | |
| DecrementAsync | Task | Decrements the value by the Step, the mirror image of IncrementAsync. | |
| FocusAsync | ValueTask | Gives focus to the input element of the BitNumberField. | |
| IncrementAsync | Task | Increments the value by the Step, exactly as the increment button does - bounds, snapping, rounding and the OnIncrement/OnMaxReached callbacks all included. It does nothing while the field is disabled or read-only, or when the value already sits at the Max. | |
| InputElement | ElementReference | The ElementReference to the input element of the BitNumberField. |
BitTextInputBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AutoComplete | string? | null | Specifies the value of the autocomplete attribute of the input component. |
| AutoFocus | bool | false | Determines if the text input is auto focused on first render. |
| DebounceTime | int | 0 | The debounce time in milliseconds. |
| Immediate | bool | false | Change the content of the input field when the user write text (based on 'oninput' HTML event). |
| ThrottleTime | int | 0 | The throttle time in milliseconds. |
BitInputBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| DefaultValue | TValue? | null | The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback. |
| DisplayName | string? | null | Gets or sets the display name for this field. |
| InputHtmlAttributes | IReadOnlyDictionary<string, object>? | null | Gets or sets a collection of additional attributes that will be applied to the created element. |
| Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| NoValidate | bool | false | Disables the validation of the input. |
| OnChange | EventCallback<TValue?> | Callback for when the input value changes. | |
| ReadOnly | bool | false | Makes the input read-only. |
| Required | bool | false | Makes the input required. |
| Value | TValue? | null | Gets or sets the value of the input. This should be used with two-way binding. |
BitInputBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| InputElement | ElementReference | The ElementReference of the input element. | |
| FocusAsync() | () => ValueTask | Gives focus to the input element. | |
| FocusAsync(bool preventScroll) | (bool preventScroll) => ValueTask | Gives focus to the input element. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| Disabled | bool | false | Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. An attribute written on the component wins over an entry of the same name. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitIconInfo properties
Represents icon information for rendering icons in Bit BlazorUI components. Supports both built-in Fluent UI icons and custom/external icon libraries (e.g. FontAwesome, Bootstrap Icons). Use BitIconInfo.Css(string), BitIconInfo.Fa(string), or BitIconInfo.Bi(string) for external icons.
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. For external icons, this can be the full CSS class name if BaseClass and Prefix are empty. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitNumberFieldClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| ButtonsContainer | string? | null | Custom CSS classes/styles for the number field's buttons (increment and decrement) container. |
| DecrementButton | string? | null | Custom CSS classes/styles for the number field's decrement button. |
| DecrementIcon | string? | null | Custom CSS classes/styles for the number field's decrement icon. |
| DecrementIconContainer | string? | null | Custom CSS classes/styles for the number field's decrement icon container. |
| Description | string? | null | Custom CSS classes/styles for the number field's description. |
| DescriptionContainer | string? | null | Custom CSS classes/styles for the number field's description container. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the numeric field's error message. |
| ErrorMessageContainer | string? | null | Custom CSS classes/styles for the numeric field's error message container. |
| IncrementButton | string? | null | Custom CSS classes/styles for the number field's increment button. |
| IncrementIcon | string? | null | Custom CSS classes/styles for the number field's increment icon. |
| IncrementIconContainer | string? | null | Custom CSS classes/styles for the number field's increment icon container. |
| Label | string? | null | Custom CSS classes/styles for the number field's label. |
| Loading | string? | null | Custom CSS classes/styles for the numeric field's busy indicator. |
| Spinner | string? | null | Custom CSS classes/styles for the numeric field's default busy spinner, drawn when no LoadingTemplate is set. |
| LabelContainer | string? | null | Custom CSS classes/styles for the number field's label container. |
| Focused | string? | null | Custom CSS classes/styles for the number field's focus state. |
| Icon | string? | null | Custom CSS classes/styles for the number field's icon. |
| Input | string? | null | Custom CSS classes/styles for the number field's input. |
| InputContainer | string? | null | Custom CSS classes/styles for the container of label and input in the number field. |
| Root | string? | null | Custom CSS classes/styles for the number field's root element. |
| ClearButton | string? | null | Custom CSS classes/styles for the number field's clear button. |
| ClearButtonIcon | string? | null | Custom CSS classes/styles for the number field's clear button icon. |
| PrefixContainer | string? | null | Custom CSS classes/styles for the number field's prefix container. |
| Prefix | string? | null | Custom CSS classes/styles for the number field's prefix. |
| SuffixContainer | string? | null | Custom CSS classes/styles for the number field's suffix container. |
| Suffix | string? | null | Custom CSS classes/styles for the number field's suffix. |
BitPlacement enum
| Name | Value | Description |
|---|---|---|
| Top | 0 | The top edge. |
| Bottom | 1 | The bottom edge. |
| Start | 2 | The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top. |
| End | 3 | The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom. |
| Left | 4 | The left edge, in both reading directions. |
| Right | 5 | The right edge, in both reading directions. |
| Center | 6 | The middle of the axis, against neither edge. |
| TopAndBottom | 7 | Both edges of the block axis at once. |
| StartAndEnd | 8 | Both edges of the inline axis at once, following the reading direction the way Start and End do. |
BitInputMode enum
| Name | Value | Description |
|---|---|---|
| None | 0 | No virtual keyboard. For when the page implements its own keyboard input control. |
| Text | 1 | Standard input keyboard for the user's current locale. |
| Decimal | 2 | Fractional numeric input keyboard containing the digits and decimal separator for the user's locale. |
| Numeric | 3 | Numeric input keyboard, but only requires the digits 0–9. |
| Tel | 4 | A telephone keypad input, including the digits 0–9, the asterisk (*), and the pound (#) key. |
| Search | 5 | A virtual keyboard optimized for search input. |
| 6 | A virtual keyboard optimized for entering email addresses. | |
| Url | 7 | A keypad optimized for entering URLs. |
BitSpinButtonMode enum
| Name | Value | Description |
|---|---|---|
| Compact | 0 | Spinning buttons render as a compact stack at the end of the input. |
| Inline | 1 | Spinning buttons render inlined at the end of the input. |
| Spread | 2 | Spinning buttons render at the start and end of the input. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size. |
| Medium | 1 | The medium size. |
| Large | 2 | The large size. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitColorKind enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | The primary color kind. |
| Secondary | 1 | The secondary color kind. |
| Tertiary | 2 | The tertiary color kind. |
| Transparent | 3 | The transparent color kind. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.