Edit

Share via

SpinButton control (preview)

  • Article

[This article is pre-release documentation and is subject to change.]

A control used to accept user input.

Note

Full documentation and source code found in the GitHub code components repository.

SpinButton control.

Important

  • This is a preview feature.
  • Preview features aren’t meant for production use and may have restricted functionality. These features are available before an official release so that customers can get early access and provide feedback.

Description

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.

This code component provides a wrapper around the Fluent UI SpinButton control for use in canvas & custom pages.

Key properties

Name Description
Label Descriptive label for the control.
IconName Name of the Fluent UI icon (see Fluent UI Icons).
Min Max value of the control. If not provided, the control has no maximum value.
Max Min value of the control. If not provided, the control has no minimum value.
Step Difference between two adjacent values of the control. This value is used to calculate the precision of the input if no precision is given. The precision calculated this way will always be >= 0.
Value Current value of the control.
DefaultValue Initial value of the control when first rendered.
Suffix Suffix to define any unit (e.g. cm, kg, ml)

Additional properties

Name Description
AccessibilityLabel Screen reader aria-label
InputEvent An event to send to the control. E.g. SetFocus. See below.
Theme Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps.

Behavior

Example

Connecting SpinButton to an Edit Form data card

  1. Unlock the data card
  2. Hide the default control for the field
  3. Add the SpinButton into the data card
  4. Update the Update property of the data card to reference the SpinButton.Value output property

Limitations

This code component can only be used in canvas apps and custom pages.