Number Input
Number Input: Used for entering numeric data within a specified range. Examples include rating within a range of 1-10, increasing or decreasing the quantity of items in shopping cart, etc.
Last updated
Number Input: Used for entering numeric data within a specified range. Examples include rating within a range of 1-10, increasing or decreasing the quantity of items in shopping cart, etc.
Last updated
Discover how to efficiently handle numeric data for a variety of applications in web development. From managing quantities in shopping apps to handling special scoring scenarios, you'll gain the skills to make the most of Number Input Components. Let's get started.
Number Input Components in Momen serve the purpose of outputting numeric values. They are handy for scenarios where you need to add quantities or specify numeric ratings. Here are some common use cases:
Shopping Apps: Use Number Input Components to add the quantity of items to your shopping cart.
Rental Apps: Incorporate numeric input for adding the number of devices in rental transactions.
Scoring: Utilize numeric input for scoring within a specific range, such as 1-10, or particular values like multiples of 10 (e.g., 90, 80).
💡Tips:
Number Input Components are primarily designed for adding numbers, and their style cannot be customized. For inputting larger numbers, like scores, consider using "Text Input" components.
Phone numbers should be entered using the [Text Input] Component.
With a default of 0, the initial value can be adjusted within the specified minimum and maximum values.💡Tips: Always set a default value for the Number Input Components.
Defines the maximum allowed input value. If the entered value exceeds this limit, the maximum value is displayed.
Specifies the minimum allowed input value. If the entered value is lower than this limit, the minimum value is displayed.
Determines the increment or decrement value when using the + and - signs.💡Tips: Number inputs have no step value limitation and can be input directly.
When this option is enabled, the + and - signs cannot be clicked, and numeric input is restricted. The component displays the default value, which cannot be modified.
💡Tips: Enabling “Disable” makes the numeric input component purely for display, preventing user input.
This setting prevents direct number entry or modification but allows changes via the + and - signs.
To enable users to add quantities to their shopping carts, place a numeric input component within the cart interface. Bind the default value to the relevant data and set the step value to 1.
💡Tips:
The Number Input component style cannot be customized. For customization, consider using image + text components. Check out Momen's e-commerce template for shopping cart page configurations.
When you need to input scores that are integer multiples of ten, such as 100, 90, or 80, you can place a numeric input component on the page. Enable "Disable Input" and set the step value to 10.
Momen is a no-code web app builder, allows users to build fully customizable web apps, marketplaces, Social Networks, AI Apps, Enterprise SaaS, and much more. You can iterate and refine your projects in real-time, ensuring a seamless creation process. Meanwhile, Momen offers powerful API integration capabilities, allowing you to connect your projects to any service you need. With Momen, you can bring your ideas to life and build remarkable digital solutions and get your web app products to market faster than ever before.
