Skip to content
BlazorUI

Inputs

NumberField

Bit.BlazorUINumberInput

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.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

TValue picks the numeric type (inferred from a bound value); a nullable one allows an empty field. The value commits on blur or Enter and parses with the invariant culture; text that is not a number is reported through validation, never dropped. Focus selects the text (NoSelectOnFocus turns that off). Keyboard: Up/Down step, PageUp/PageDown jump, Home/End jump to the bounds.





Binding

One-way with Value, two-way with @bind-Value, or uncontrolled with DefaultValue and OnChange.



last OnChange value: []

Spin buttons

Mode renders the buttons Compact (stacked), Inline (side by side) or Spread (one on each side); unset, there are none. Holding a button spins after ContinuousSpinDelay, every ContinuousSpinInterval ms. A mouse press keeps the caret in the input; a touch tap does not focus it, so no soft keyboard pops up. HideInput leaves a stepper only (Compact unless a Mode is given) whose buttons are the tab stops.






0

Min & Max

Min/Max clamp typed and spun values; unset, the range of the type applies. An explicit bound enables Home/End, sets aria-valuemin/max and makes the button that would pass it inert. NoClamp lets a typed out-of-range value through for a validator to report; stepping still stays inside.

value: [0]

value: [0]

value: [0]

value: [0]

Step, precision & snapping

Step is what a spin adds; a fractional one also sets the rounding. PageStep is the PageUp/PageDown jump (10 × Step by default). Precision rounds explicitly - negative rounds to tens, hundreds, ... SnapToStep puts typed values on the step grid, anchored at Min.

value: [0]

value: [0]

value: [0]

value: [0]

value: [2]

value: [0]

Numeric types

Every .NET numeric type and its nullable variant. A number past the type's range clamps to it (300 into a byte gives 255). The type picks the mobile keypad; use InputMode="BitInputMode.Text" when negatives must be typed on touch.

value: [5]

value: [1000000000000]

value: [0.05]

value: [-5]

Label position & template

LabelPosition puts the label on any side; LabelTemplate replaces it with your own markup.





Description, error & loading

Description is a hint under the field, ErrorMessage a rejection (paints the field, sets aria-invalid, announced politely), Invalid a rejection without a message, and Loading a busy indicator that keeps the field editable (LoadingAriaLabel is what is announced). Each has a template variant; AriaDescription adds screen-reader-only text.

Between 1 and 99 items per order.

We hold the room for 15 minutes.



Anything above 50% needs a manager's approval.

The hint wraps onto a line of its own.

Appearance

Underlined draws only a bottom rule, NoBorder removes the border, FullWidth fills the container.




Icon, prefix & suffix

IconName adds a glyph (named by IconAriaLabel). Prefix/Suffix show a unit or currency that is never part of the value, and are read out with the field. PrefixTemplate/SuffixTemplate take markup.


Distance:
km

Distance:
km

USD

Clear button

ShowClearButton shows an X whenever the input holds text, including text that failed to parse. It is not a tab stop - Escape does the same. Customize with ClearButtonIconName, ClearButtonAriaLabel or ClearButtonTemplate; OnClear reports it.




cleared: 0 time(s)

Number format & culture

NumberFormat takes a .NET format string (N0, C2, 000000) and is display-only: the bound value stays a number and editing shows it plain. Scaling formats like P are not supported. Culture pins the separators; unset, a format follows the thread culture and plain text stays invariant.






value: []

Input behavior

Immediate commits per keystroke (with DebounceTime/ThrottleTime). ReadOnly blocks every change; IsInputReadOnly blocks only typing. Shift + wheel spins a focused field (InvertMouseWheel, NoMouseWheel). EnterKeyHint labels the enter key of a virtual keyboard.

Value: []

Value: []

Value: []






NormalizeDigits

NormalizeDigits accepts Persian/Arabic digits and separators, in the input and in Min/Max/Step. DigitsNormalizer plugs in your own function.

Value:

Value:

Value:

Value:

Events

OnIncrement/OnDecrement fire for every spin, whatever the device; OnMinReached/OnMaxReached once per approach to an explicit bound. OnEnter runs after the typed text commits, OnEscape before the field clears. Key, click and focus events are surfaced too.

OnIncrement Counter: 0
OnDecrement Counter: 0

OnChange Counter: 0

[]

[]

Escape pressed 0 time(s)

Last key down: []
OnKeyUp Counter: 0
OnClick Counter: 0

Public API

IncrementAsync, DecrementAsync and ClearAsync do what the field's own controls do - bounds, snapping and callbacks included - and are safe from any thread. FocusAsync focuses the input (the increment button with HideInput).

value: [4]

Validation

Works with EditForm and data annotations. Unparsable text stays in the input with ParsingErrorMessage ({0} is the DisplayName). Pair NoClamp with [Range] to report rather than correct.




Accessibility

The input is an ARIA spinbutton: aria-valuenow/min/max stay in sync, aria-valuetext is added when the text differs from the number (AriaValueText overrides it), and aria-required/aria-readonly are written out. The buttons are named (IncrementAriaLabel, DecrementAriaLabel, ClearButtonAriaLabel), point aria-controls at the input, and step on an assistive technology's activation too; a step the input did not take focus for is announced through a live region. On touch, Compact buttons grow to the 24px minimum target. AriaSetSize/AriaPositionInSet place the field in a set.

Use the up and down arrow keys to adjust the volume between 0 and 10.


Cascading parameters

BitParams with a BitNumberFieldParams sets defaults for every number field inside it. A field's own parameters win; only unset ones are filled in.

cm
Between 0 and 500, in steps of 5.
cm
Between 0 and 500, in steps of 5.
m
Between 0 and 500, in steps of 5.

Background

Background picks the fill (Primary by default); Transparent blends into a colored surface.




Border

Border picks the border color (Primary by default). Transparent hides it but keeps its space, unlike NoBorder.




Accent

Accent colors the focus ring, the busy indicator, and the icon/prefix/suffix while focused. An invalid field still shows the error color. Focus a field to see it.

$

$

$

$

$

$

$

$

$

$

$

$

$

$

$

$

$

External Icons

Icon, IncrementIcon, DecrementIcon and ClearButtonIcon take a BitIconInfo for any external icon set (FontAwesome, Bootstrap Icons, ...).





Size

Size scales the height, text, icons and buttons together.

kg

kg

kg

Style & Class

Reach for the --bit-NumberField-* CSS variables first (listed in the API section): they inherit, so set them on :root, an ancestor or an instance's Style. Style/Class and Styles/Classes (per part, plus Focused) cover the rest.

CSS variables:

cm



Style & Class:



Styles & Classes:

The description is styleable too.

RTL

Dir or a cascading BitDir.Rtl mirrors the whole field.




کیلوگرم

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitNumberField CSS variables

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.

API

Every parameter, public member, sub-class and enum this component exposes.

BitNumberField 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.

BitNumberField 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.

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.
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.

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.
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.

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.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.