The Spin Edit allows you to display and edit numeric values. Users can press the spin buttons to change the editor's value, use the ARROW UP and ARROW DOWN keys, or type a new value in the edit box.

Spin Edit works with built-in .NET data types, including System.Decimal. The editor processes values directly on the server side, without converting them to or from JavaScript number types. This ensures that values users enter never lose precision because of type conversions.

The Spin Edit component supports different size modes. To specify the component's size in code, use the SizeMode property. To apply different size modes, use the drop-down list in the demo card's header.

You can bind the editor's Value property to a field. If a user changes the input value, the editor updates its Value property. Use the BindValueMode property to specify when the update should happen. The following modes are available:

• OnLostFocus (default) — The editor value is updated after the editor loses focus.
• OnInput — The editor value is updated whenever a user types.
• OnDelayedInput — The editor value is updated with a delay after a user makes changes.

Use the Increment property to specify the step by which the editor's value changes when a user clicks the spin buttons. The MinValue and MaxValue properties allow you to limit the editor's minimum and maximum values.

Do any of the following to clear the Spin Edit (set its value to null):

• Delete the value in the editor.
• Click the Clear button. This button is displayed when you set the ClearButtonDisplayMode property to Auto.

Use the NullText property to display placeholder text in the Spin Edit when its value is null.

Use the DisplayFormat property to format the Spin Edit's display value when the editor is not focused.

Spin Edit supports standard formats. See the Standard Numeric Format Strings and Custom Numeric Format Strings help topics for more information.

Our Spin Edit component supports masked input. If you specify a mask, the input box only accepts values in a specific numeric format.

To enable this functionality, assign the pattern to the component's Mask property. The DxNumericMaskProperties component specifies additional mask settings (such as culture). For more information about Numeric masks, refer to the following help topic: Numeric Masks.

Try the Mask and Culture settings to explore the different date-time mask modes.