The Number Input component

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:

  1. Open the Components panel, then the UI folder.
  2. Drag the Number Input  component to the stage.
  3. 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 component

You 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.

Was this helpful?
How can we improve it?