# NumberField
**Also known as:** NumberInput
## Description
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.
## 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). |
| 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). |
| Border | `BitColorKind?` | null | The color kind of the number field border (Primary by default). |
| 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). |
| 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. |
| 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. |
| 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. |
| 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). |
| 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. |
| 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. |
| 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). |
| LabelPosition | `BitLabelPosition?` | null | The position of the label in regards to the field (Top by default). |
| Label | `string?` | null | Descriptive label for the number field, rendered next to it (per LabelPosition) 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, in place of the default "Loading". It is announced whichever indicator is drawn, so a LoadingTemplate drawing a bare spinner of its own 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. |
| ClearButtonAriaLabel | `string?` | null | Accessible label text for the clear button (for screen reader users), useful for localization. |
| 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. |
| 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. |
| 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). |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| Id | `string?` | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | `bool` | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| 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. |
## 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. |
| 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. |
| 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. |
## Enums
### BitLabelPosition Enum
| Name | Value | Description |
| :--- | :--- | :---------- |
| Top | 0 | The label shows on the top of the spin button. |
| Start | 1 | The label shows on the start of the spin button. |
| End | 2 | The label shows on the end of the spin button. |
| Bottom | 3 | The label shows on the bottom of the spin button. |
### 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. |
| Email | 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 | Primary color kind. |
| Secondary | 1 | Secondary color kind. |
| Tertiary | 2 | Tertiary color kind. |
| Transparent | 3 | 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. |
## Sub Classes
### 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. |
| 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. |
## CSS Variables
Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance.
| 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` | The Background color kind | Fill of the field. |
| `--bit-NumberField-border-color` | The Border color kind | Border color at rest. An invalid field takes the error color instead. |
| `--bit-NumberField-hover-border-color` | The hover color of the Border color kind | Border color under a hovering pointer, on an editable field that is neither focused nor invalid. |
| `--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` | The Accent role's focus color | Color of the keyboard focus indicator - the ring, or the thicker bottom rule of the Underlined variant. |
| `--bit-NumberField-height` | Per Size, --bit-siz-ctrl-sm/md/lg | 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. |
| `--bit-NumberField-padding-inline` | Per Size, in step with BitTextField | Room between the border and the value. |
| `--bit-NumberField-font-size` | Per Size, from the type ramp | Size of the value text, and of the prefix and suffix beside it. |
| `--bit-NumberField-label-color` | --bit-clr-fg-pri | Color of the label. |
| `--bit-NumberField-label-font-size` | Per Size, from the type ramp | Size of the label. |
| `--bit-NumberField-label-font-weight` | --bit-tpg-fw-semibold | 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, the Accent while focused | Color of the field's own icon. |
| `--bit-NumberField-icon-size` | Per Size, --bit-siz-icon-sm/md/lg | Size of that icon. |
| `--bit-NumberField-affix-color` | --bit-clr-fg-pri, the Accent while focused | Color of the prefix and the suffix. |
| `--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` | Per Size and 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. |
| `--bit-NumberField-button-icon-size` | Per Size, from the type ramp | Size of the glyph inside those buttons. |
| `--bit-NumberField-loading-color` | the Accent | Color of the busy indicator. |
| `--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. |
## Examples
\n**Basic**:
```razor
This is custom Label
```
\n**Description, error & loading**:
```razor
Anything above 50% needs a manager's approval.
USD
```
\n**Clear button**:
```razor
×
Decrement
Increment
Clear
Focus
```
```csharp
private int? apiValue = 4;
private BitNumberField? apiNumberField;
```
\n**Validation**:
```razor
@if (string.IsNullOrEmpty(SuccessMessage))
{
Submit
}
else
{
@SuccessMessage
}
```
```csharp
public class BitNumberFieldValidationModel
{
[Required(ErrorMessage = "Enter an age")]
[Range(1, 150, ErrorMessage = "Nobody is that old")]
public int? Age { get; set; }
}
public class RangeModel
{
[Range(0, 100, ErrorMessage = "The percentage must be between 0 and 100")]
public int Percentage { get; set; }
}
private string SuccessMessage = string.Empty;
private BitNumberFieldValidationModel validationModel = new();
private RangeModel rangeModel = new();
private double? parsingErrorValue;
private async Task HandleValidSubmit()
{
SuccessMessage = "Form Submitted Successfully!";
await Task.Delay(3000);
SuccessMessage = string.Empty;
StateHasChanged();
}
private void HandleInvalidSubmit()
{
SuccessMessage = string.Empty;
}
```
\n**Accessibility**:
```razor
```
last OnChange value: [@uncontrolledValue]
```
```csharp
private double oneWayValue;
private double twoWayValue;
private int? uncontrolledValue;
```
\n**Spin buttons**:
```razor
value: [@minValue]
value: [@minMaxValue]
value: [@clampValue]
value: [@noClampValue]
```
```csharp
private int minValue;
private int minMaxValue;
private int clampValue;
private int noClampValue;
```
\n**Step, precision & snapping**:
```razor
value: [@stepValue]
value: [@fractionalStepValue]
value: [@pageStepValue]
value: [@negativePrecisionInputValue]
value: [@snapAnchoredValue]
value: [@snapFractionValue]
```
```csharp
private int stepValue;
private double fractionalStepValue;
private int pageStepValue;
private double negativePrecisionInputValue;
private int snapAnchoredValue = 2;
private double snapFractionValue;
```
\n**Numeric types**:
```razor
value: [@byteValue]
value: [@longValue]
value: [@decimalValue]
value: [@signedValue]
```
```csharp
private byte byteValue = 5;
private long longValue = 1_000_000_000_000;
private decimal decimalValue = 0.05m;
private int signedValue = -5;
```
\n**Label position & template**:
```razor
cleared: @clearedCounter time(s)
```
```csharp
private int clearedCounter;
```
\n**Number format & culture**:
```razor
value: [@germanValue]
```
```csharp
private double? germanValue;
private readonly CultureInfo germanCulture = CultureInfo.GetCultureInfo("de-DE");
```
\n**Input behavior**:
```razor
Value: [@immediateValue]
Value: [@immediateDecimalValue]
Value: [@debounceValue]
Value: @normalizeOffValue
Value: @normalizeOnValue
Value: @normalizeDecimalValue
Value: @customNormalizerValue
```
```csharp
private int? normalizeOffValue;
private int? normalizeOnValue;
private double? normalizeDecimalValue;
private int? customNormalizerValue;
// Maps any Unicode decimal digit to its Latin equivalent and strips spaces
// and thousand separators (Latin ',' and Persian '٬').
private string? CustomDigitsNormalizer(string? value)
{
if (string.IsNullOrEmpty(value)) return value;
var sb = new System.Text.StringBuilder(value.Length);
foreach (var c in value)
{
if (c is ' ' or ',' or '٬') continue;
var digit = System.Globalization.CharUnicodeInfo.GetDecimalDigitValue(c);
sb.Append(digit >= 0 ? (char)('0' + digit) : c);
}
return sb.ToString();
}
```
\n**Events**:
```razor
OnIncrement Counter: @onIncrementCounter
OnDecrement Counter: @onDecrementCounter
OnChange Counter: @onChangeCounter
[@boundMessage]
[@enterMessage]
Escape pressed @escapeCounter time(s)
Last key down: [@lastKey]
OnKeyUp Counter: @onKeyUpCounter
OnClick Counter: @onClickCounter
```
```csharp
private int onIncrementCounter;
private int onDecrementCounter;
private int onChangeCounter;
private int onKeyUpCounter;
private int onClickCounter;
private int escapeCounter;
private string? lastKey;
private string? boundMessage;
private string? enterMessage;
private int? enterValue;
private void HandleMinReached(int value)
{
boundMessage = $"Reached the minimum ({value}).";
}
private void HandleMaxReached(int value)
{
boundMessage = $"Reached the maximum ({value}).";
}
private void HandleEnter()
{
enterMessage = $"Submitted: {enterValue}.";
}
```
\n**Public API**:
```razor
value: [@apiValue]