NumericTextField - bit BlazorUI
Home Docs

NumericTextField

A NumericTextField 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

LabelPosition

LabelTemplate
Icons


Min & Max


Suffix

Controlled

Events

Style & Class


Visibility
Visible: [
]
Hidden: [ ]
Collapsed: [ ]
Validation

Implementation

BitNumericTextField 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.
ChangeHandler EventCallback<BitNumericTextFieldAction>
Classes BitNumericTextFieldClassStyles? null Custom CSS classes for different parts of the BitNumericTextField.
DefaultValue TValue? null Initial value of the numeric text field.
DecrementAriaLabel string? null Accessible label text for the decrement button (for screen reader users).
DecrementIconName string ChevronDownSmall Custom icon name for the decrement button.
IconName string? null Icon name for an icon to display alongside the numeric text field's label.
IconAriaLabel string string.Empty The aria label of the icon for the benefit of screen readers.
IncrementAriaLabel string? null Accessible label text for the increment button (for screen reader users).
IncrementIconName string ChevronUpSmall Custom icon name for the increment button.
Label string string.Empty Descriptive label for the numeric text field, Label displayed above the numeric text field and read by screen readers.
LabelTemplate RenderFragment? null Shows the custom Label for numeric text 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.
LabelPosition BitNumericTextFieldLabelPosition BitNumericTextFieldLabelPosition.Top The position of the label in regards to the numeric textfield.
Min TValue? null Min value of the numeric text field. If not provided, the numeric text field has minimum value.
Max TValue? null Max value of the numeric text field. If not provided, the numeric text field has max value.
OnChange EventCallback<TValue> Callback for when the numeric text field value change.
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.
OnBlur EventCallback<FocusEventArgs> Callback for when the control loses focus.
OnDecrement EventCallback<BitNumericTextFieldChangeValue<TValue>> Callback for when the decrement button or down arrow key is pressed.
OnIncrement EventCallback<BitNumericTextFieldChangeValue<TValue>> Callback for when the increment button or up arrow key is pressed.
Precision int? null How many decimal places the value should be rounded to.
Placeholder string? null Input placeholder text.
Step TValue? null Difference between two adjacent values of the numeric text field.
Styles BitNumericTextFieldClassStyles? null Custom CSS styles for different parts of the BitNumericTextField.
Suffix string string.Empty A text is shown after the numeric text field value.
ShowArrows bool false Whether to show the up/down spinner arrows (buttons).
Title string? null A more descriptive title for the control, visible on its tooltip.
ValidationMessage string The {0} field is not valid. The message format used for invalid values entered in the input.
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.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
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.
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.
BitNumericTextFieldChangeValue properties
Name
Type
Default value
Description
Value T?
MouseEventArgs MouseEventArgs?
KeyboardEventArgs KeyboardEventArgs?
BitNumericTextFieldClassStyles properties
Name
Type
Default value
Description
ButtonsContainer string? null Custom CSS classes/styles for the numeric text field's buttons (inecrement and decrement) container.
DecrementButton string? null Custom CSS classes/styles for the numeric text field's decrement button.
DecrementIcon string? null Custom CSS classes/styles for the numeric text field's decrement icon.
DecrementIconContainer string? null Custom CSS classes/styles for the numeric text field's decrement icon container.
IncrementButton string? null Custom CSS classes/styles for the numeric text field's increment button.
IncrementIcon string? null Custom CSS classes/styles for the numeric text field's increment icon.
IncrementIconContainer string? null Custom CSS classes/styles for the numeric text field's increment icon container.
Label string? null Custom CSS classes/styles for the numeric text field's label.
LabelContainer string? null Custom CSS classes/styles for the numeric text field's label container.
Focused string? null Custom CSS classes/styles for the numeric text field's focus state.
Icon string? null Custom CSS classes/styles for the numeric text field's icon.
Input string? null Custom CSS classes/styles for the numeric text field's input.
InputWrapper string? null Custom CSS classes/styles for the wrapper of label and input in the numeric text field.
Root string? null Custom CSS classes/styles for the numeric text field's root element.
BitNumericTextFieldLabelPosition enum
Name
Value
Description
Top 0 The label shows on the top of the numeric textfield.
Left 1 The label shows on the left side of the numeric textfield.
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).