Home Docs

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.


Style & Class
Explores styling and class customization for BitNumberField, including component styles, custom classes, and detailed style options.


Component's Style & Class:





Styles & Classes:


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]
Events
Handle events in BitNumberField, including increment, decrement, and change events.

OnIncrement Counter: 0
OnDecrement Counter: 0

OnChange Counter: 0
Validation
Demonstrates validation for BitNumberField within a form, including required fields and custom validation messages.


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).
DecrementIconName string? null Custom icon name for the decrement button.
DefaultValue TValue? null Initial value of the number field.
IconAriaLabel string string.Empty The aria label of the icon for the benefit of screen readers.
IconName string? null Icon name for an icon to display alongside the number field's label.
IncrementAriaLabel string? null Accessible label text for the increment button (for screen reader users).
IncrementIconName string? null Custom icon name for the increment button.
InlineLabel bool false The position of the label in regards to the number field.
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.
NumberFormat string? null The format of the number in the number field.
OnBlur EventCallback<FocusEventArgs> Callback for when the control loses focus.
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.
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.
ShowButtons bool false Whether to show the increment and decrement buttons.
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
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 The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
InputWrapper string? null Custom CSS classes/styles for the wrapper of label and input in the number field.
Root string? null Custom CSS classes/styles for the number field's root element.
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.
  • On this page