Input Number
The Avonni Input Number component lets users enter a numeric value with optional formatting, range constraints, and step control. It ships in three presets — Currency, Number Input, and Percent — so you can drop in the right flavour for your use case without extra configuration.
Overview
The three presets share the same underlying component; they differ only in their default Formatter setting:
Currency — formats the value as a monetary amount using the locale currency symbol (formatter:
currency).Number Input — plain decimal number with no special symbol (formatter:
decimal).Percent — expresses the value as a percentage (formatter:
percent).
All three support range validation (minimum/maximum), step increments, required-field enforcement, read-only and disabled states, and fully customizable error messages.
Configuration
To configure the Input Number, select it on the canvas. The Edit Number Input panel opens on the right. The sections below mirror the configuration panel from top to bottom.
Properties
Label
The text label shown above (or beside) the input. Use a concise, descriptive label so users know what value is expected.
Value
The initial numeric value pre-filled into the input. Can be bound to a Salesforce field or a flow variable.
Placeholder
Ghost text displayed inside the field when it is empty, prompting users for a valid entry. Disappears as soon as the user starts typing.
Field Level Help
A help-text tooltip shown next to the label that explains the purpose or expected format of the input.
Variant
Controls how the label is positioned relative to the input field. Options:
Standard (default) — label above the input.
Label Hidden — label is visually hidden (still accessible to screen readers).
Label Inline — label sits to the left of the input on the same line.
Label Stacked — label floats above the field on focus.
Formatter
Determines how the number is displayed and formatted. The preset you chose sets this automatically, but you can change it at any time:
Currency — adds the locale currency symbol (used by the Currency preset by default).
Decimal — plain number formatting (used by the Number Input preset by default).
Percent — multiplies the value by 100 and appends a % sign.
Percent-Fixed — appends a % sign without multiplying (the value is shown as-is).
Step
The granularity of acceptable values. For example, 1 allows only whole numbers, 0.01 allows two decimal places, and any imposes no granularity constraint. Defaults to 1.
Message When Step Mismatch
Custom error message shown when the entered value does not align with the configured step increment.
Maximum
The highest value the input will accept. Values above this limit trigger a validation error.
Message When Range Overflow
Custom error text shown when the entered value exceeds the Maximum. Requires: Maximum to be set.
Minimum
The lowest value the input will accept. Values below this limit trigger a validation error.
Message When Range Underflow
Custom error text shown when the entered value falls below the Minimum. Requires: Minimum to be set.
Required
When enabled, the form cannot be submitted until the user enters a value.
Message When Value Missing
Custom error text shown when the field is left empty and Required is on. Requires: Required to be enabled.
Disabled
When enabled, the input is visible but cannot be interacted with.
Read Only
When enabled, the current value is displayed but cannot be edited. Found under the Advanced section of the panel.
Message When Bad Input
Custom error text shown when the entered value cannot be parsed as a valid number. Found under the Advanced section of the panel.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Interactions
Interactions define what happens when users interact with the Number Input. Configure them from the Interactions tab of the Edit Number Input panel.
Change
Fires when the user modifies the value and the input resolves to a valid number. Use this to update a variable, trigger navigation, refresh another component, or run any flow logic that depends on the entered number.
Styling
The Style tab gives you fine-grained control over the Input Number's appearance. Configure it from the Style tab of the Edit Number Input panel.
Controls the outer spacing around the component, creating space between it and other elements on the page.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's border and its content.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions for the component.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Styles the field label text.
Text Color: Set the label color.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the input field itself.
Background Color: Set the input's background color.
Text Color: Set the entered-value color.
Border Color / Border Radius: Customize the input border.
Spacing Horizontal Start / Spacing Horizontal End: Adjust the inner horizontal spacing of the input.
Last updated
Was this helpful?