> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-number.md). # 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 (used by the Percent preset by default). #### 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](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) 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. {% tabs %} {% tab title="Margin" %} 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. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the component's border and its content. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} 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. {% endtab %} {% tab title="Border" %} 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. {% endtab %} {% tab title="Label" %} Styles the field label text. * **Text Color:** Set the label color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Input" %} 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. {% endtab %} {% endtabs %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/input-number.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.