This component is not supported for Google Ads, Google AdMob, AMPHTML ads, video ads, or image ads.
The Number Input component lets you add a field where users can enter a number. In some browsers, users can also increase or decrease the number using arrow buttons in the field.
To use the Number Input component in your project:
- Open the Components panel, then the UI folder.
- Drag the Number Input
component to the stage.
- In the Number Input properties section of the Properties panel, set the range of valid values by entering the minimum value in the Min field and the maximum value in the Max field.
Properties
| Property | Description |
|---|---|
| Name | The component name. |
| Value | The default number that the number input is set to. |
| Min | The lowest valid number that a user can enter. |
| Max | The highest valid number that a user can enter. |
| Step | The interval between valid numbers. The arrow buttons will change the number by this amount. Valid numbers should be a multiple of the step (e.g., if the step is 5, valid numbers include 0, 5, 10, etc.). |
Events and actions
Events sent by the Number Input componentYou can trigger other actions based on the following Number Input component events:
| Event | Description |
|---|---|
| Change | Sent when a change to the number input field's value is committed (e.g., the user edits the value then clicks elsewhere on the page). |
| Input | Sent when the number input field's contents changes. |
To select one of these events in the Event dialog, set the Number Input component as the target.
Learn how to configure events.
Preview
You can't interact with UI components inside the Google Web Designer interface. To see the component in action, preview your document in your preferred browser. The appearance of UI components may vary depending on the browser.
