NumberField
NumberInput
A NumberField allows you to enter any number type and format you want. It could be a decimal number or integer number with a suffix and so on. Also, give you the capability to show or hide increment and decrement keys.
Usage
Basic
Displays various basic configurations for the BitNumberField, including placeholders, disabled state, default values, step values, and required fields.
Label
Demonstrates various label configurations for BitNumberField, including different label positions and custom label templates.
Label position:
LabelTemplate:
Icons
Demonstrates BitNumberField with different icons, including component icon and increment/decrement icons in various modes.
Component's Icon:
Increment & Decrement Icons:
ShowClearButton
Showcasing BitNumberField with a clean button in various configurations, including custom button icon and show this button.
NumberFormat
Demonstrates various number formatting options for BitNumberField, including examples with different number formats.
Prefix & Suffix
Demonstrates the use of prefixes and suffixes in BitNumberField, including examples with different prefix and suffix values.
Distance:
km
Distance:
km
Distance:
km
Distance:
km
Binding
Demonstrates various binding scenarios with BitNumberField, including one-way and two-way binding.
Min & Max
Demonstrates setting minimum and maximum values in BitNumberField, including examples with various min and max constraints.
value: [0]
value: [0]
value: [0]
Precision
Specifies how many decimal places the value is rounded to.
HideInput
Demonstrates hiding the input field in BitNumberField while still allowing value changes.
Hidden input:
InvertMouseWheel
Reverse the default scrolling behavior when adjusting numerical value in a number field using the mouse wheel.
Events
Handle events in BitNumberField, including increment, decrement, and change events.
OnIncrement Counter: 0
OnDecrement Counter: 0
OnChange Counter: 0
NormalizeDigits
Enables culture-agnostic normalization of non-Latin decimal digits (e.g. Persian "۱۲۳" or Arabic "١٢٣")
and the Arabic decimal separator (٫) to their Latin equivalents before parsing. This makes the field accept
numbers typed from the various Persian/Arabic keyboard layouts that emit different Unicode code points.
Value:
Value:
Value:
For full control, provide a custom DigitsNormalizer function. It receives the raw input string and returns
the normalized string before parsing, taking precedence over NormalizeDigits. The example below normalizes
non-Latin digits and also strips spaces and thousand separators (both Latin "," and Persian "٬").
Value:
Validation
Demonstrates validation for BitNumberField within a form, including required fields and custom validation messages.
External Icons
Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon, IncrementIcon, and DecrementIcon parameters.
Component Icon (FontAwesome):
Increment & Decrement Icons (FontAwesome):
Component Icon (Bootstrap):
Increment & Decrement Icons (Bootstrap):
Style & Class
Explores styling and class customization for BitNumberField, including component styles, custom classes, and detailed style options.
Component's Style & Class:
Styles & Classes:
RTL
Use BitNumberField in right-to-left (RTL).
API
BitNumberField parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaDescription | string? | null | Detailed description of the input for the benefit of screen readers. |
| 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. |
| Classes | BitNumberFieldClassStyles? | null | Custom CSS classes for different parts of the BitNumberField. |
| 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. |
| 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. |
| HideInput | bool | false | If true, the input is hidden. |
| 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. |
| InvertMouseWheel | bool | false | Reverses the mouse wheel direction. |
| IsInputReadOnly | bool | false | If true, the input is readonly. |
| LabelPosition | BitLabelPosition | BitLabelPosition.Top | The position of the label in regards to the spin button. |
| Label | string | string.Empty | Descriptive label for the number field, Label displayed above the number field 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 | Min value of the number field. |
| Max | string? | null | Max value of the number field. |
| Mode | BitSpinButtonMode? | null | Determines how the spinning buttons should be rendered. |
| 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. |
| OnBlur | EventCallback<FocusEventArgs> | Callback for when the control loses focus. | |
| OnClear | EventCallback | Callback executed when the user clears the number field by either clicking 'X' or hitting escape. | |
| OnDecrement | EventCallback<TValue> | Callback for when the decrement button or down arrow key is pressed. | |
| 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. | |
| 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. |
| 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. |
| ShowClearButton | bool | false | Whether to shows the clear button when the BitNumberField has value. |
| Step | string? | null | Difference between two adjacent values of the number field. |
| 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. |
BitNumberField public members
| Name | Type | Default value | Description |
|---|---|---|---|
| InputElement | ElementReference | The ElementReference to the input element of the BitNumberField. | |
| FocusAsync | ValueTask | Gives focus 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. |
| 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. |
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. |
| 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. |
| 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. |
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. |
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. |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page