NumberField
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 | ChevronDownSmall | 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 | ChevronUpSmall | 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 |
|---|---|---|---|
| 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. |
| 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