SpinButton - bit BlazorUI
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

LabelPosition

LabelTemplate
Spin Icon
Min, Max & Step


Suffix

Controlled

Events

Validation

Implementation

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.
ChangeHandler EventCallback<BitSpinButtonAction>
DefaultValue double? null Initial value of the spin button.
DecrementButtonAriaLabel string? null Accessible label text for the decrement button (for screen reader users).
DecrementButtonIconName string ChevronDownSmall Custom icon name for the decrement button.
IconName string? null Icon name for an icon to display alongside the spin button's label.
IconAriaLabel string string.Empty The aria label of the icon for the benefit of screen readers.
IncrementButtonAriaLabel string? null Accessible label text for the increment button (for screen reader users).
IncrementButtonIconName string ChevronUpSmall Custom icon name for the increment button.
Label string string.Empty Descriptive label for the spin button, Label displayed above the spin button and read by screen readers.
LabelTemplate RenderFragment? null Shows the custom Label for spin button. 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 BitSpinButtonLabelPosition BitSpinButtonLabelPosition.Top The position of the label in regards to the spin button.
Min double? null Min value of the spin button. If not provided, the spin button has minimum value of double type.
Max double? null Max value of the spin button. If not provided, the spin button has max value of double type.
OnFocus EventCallback<FocusEventArgs> Callback for when focus moves into the input.
OnBlur EventCallback<FocusEventArgs> Callback for when the control loses focus.
OnChange EventCallback<double> Callback for when the spin button value change.
OnDecrement EventCallback<BitSpinButtonChangeEventArgs> Callback for when the decrement button or down arrow key is pressed.
OnIncrement EventCallback<BitSpinButtonChangeEventArgs> 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.
Step double 1 Difference between two adjacent values of the spin button.
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.
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.
BitSpinButtonLabelPosition enum
Name
Value
Description
Top 0 The label shows on the top of the spin button.
Left 1 The label shows on the left side of the spin button.
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).