Home Docs

SpinButton

A spin button (SpinButton) allows someone to incrementally adjust a value in small steps. It’s mainly used for numeric values, but other values are supported too.

Usage

Basic
Displays various basic configurations for the BitSpinButton, including placeholders, disabled state, minimum and maximum values, read-only mode and descriptions





Mode
Showcases the BitSpinButton with different button modes, including compact, inline and spread.



Label
Demonstrates various label configurations for BitSpinButton, including different label positions and custom label templates.

LabelPosition:







LabelTemplate:

Icons
Demonstrates BitSpinButton with different icons, including component icon and increment/decrement icons in various modes.

Component's Icon:




Increment & Decrement Icons:



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


Component's Style & Class:





Styles & Classes:


Suffix
Demonstrates the use of suffixes in BitSpinButton, including examples with different suffix values.


Binding
Use various binding scenarios with BitSpinButton, including one-way and two-way binding.

Events
Handle events in BitSpinButton, including increment, decrement, and change events.


ShowInput
Demonstrates hiding the input field in BitSpinButton while still allowing value changes.

Hidden input:

Validation
Demonstrates validation for BitSpinButton within a form, including required fields and custom validation messages.


RTL
Use BitSpinButton in right-to-left (RTL).


API

BitSpinButton 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 double? 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 BitSpinButtonClassStyles? null Custom CSS classes for different parts of the BitSpinButton.
DecrementAriaLabel string? null Accessible label text for the decrement button (for screen reader users).
DecrementIconName string? null Custom icon name for the decrement button.
DecrementTitle string? null The title to show when the mouse is placed on the decrement button.
DefaultValue double? null Initial value of the spin button.
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 spin button'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.
IncrementTitle string? null The title to show when the mouse is placed on the increment button.
IsInputReadOnly bool false If true, the input is readonly.
Label string string.Empty Descriptive label for the spin button, Label displayed above the spin button and read by screen readers.
LabelPosition BitLabelPosition BitLabelPosition.Top The position of the label in regards to the spin button.
LabelTemplate RenderFragment? null Custom Label content for spin button.
Max double? null Max value of the spin button. If not provided, the spin button has max value of double type.
Min double? null Min value of the spin button. If not provided, the spin button has minimum value of double type.
Mode BitSpinButtonMode BitSpinButtonMode.Compact Determines how the spinning buttons should be rendered.
OnBlur EventCallback<FocusEventArgs> Callback for when the control loses focus.
OnDecrement EventCallback<double> Callback for when the decrement button or down arrow key is pressed.
OnFocus EventCallback<FocusEventArgs> Callback for when focus moves into the input.
OnIncrement EventCallback<double> 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.
ShowInput bool true If false, the input is hidden.
Step double 1 Difference between two adjacent values of the spin button.
Styles BitSpinButtonClassStyles? null Custom CSS styles for different parts of the BitSpinButton.
Suffix string string.Empty A text is shown after the spin button value.
Title string? null A more descriptive title for the control, visible on its tooltip.
ValidationMessage string "The {DisplayName ?? FieldIdentifier.FieldName} field is not valid." The message format used for invalid values entered in the input.
BitSpinButton public members
Name
Type
Default value
Description
InputElement ElementReference The ElementReference to the input element of the BitSpinButton.
FocusAsync ValueTask Gives focus to the input element of the BitSpinButton.
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.
BitSpinButtonClassStyles properties
Name
Type
Default value
Description
Root string? null Custom CSS classes/styles for the root element of the spin button.
LabelContainer string? null Custom CSS classes/styles for the spin button's label container.
Icon string? null Custom CSS classes/styles for the spin button's icon.
Label string? null Custom CSS classes/styles for the spin button's label.
Container string? null Custom CSS classes/styles for the spin button's container.
DecrementButton string? null Custom CSS classes/styles for the spin button's decrement button container.
DecrementIconWrapper string? null Custom CSS classes/styles for the spin button's decrement icon wrapper.
DecrementIcon string? null Custom CSS classes/styles for the spin button's decrement icon.
Input string? null Custom CSS classes/styles for the spin button's input.
CompactButtonsWrapper string? null Custom CSS classes/styles for the spin button's buttons wrapper in Compact mode.
IncrementButton string? null Custom CSS classes/styles for the spin button's increment icon.
IncrementIconWrapper string? null Custom CSS classes/styles for the spin button's increment icon.
IncrementIcon string? null Custom CSS classes/styles for the spin button's increment icon.
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 0 Spinning buttons render inlined at the end of the input.
Spread 1 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.
  • On this page