doc-burger

Input Number

A component for entering numeric values

An input number field allows users to enter numeric values and provides options for controlling the input's behavior and appearance.

input-number component of Peaka

Key Features

Input numbers offer the following key features:

  • Value: Input numbers have a value property, allowing users to input and display numeric values. The value can be used in your project.

  • Label: The label is the text displayed above the input number, providing context for the user.

  • Hint: A hint can be displayed below the input number to offer additional guidance or instructions to users.

  • Placeholder: Optionally, specify a placeholder text to describe the expected value of the input number.

  • Min Value: Specify the minimum allowable value for the input number.

  • Max Value: Specify the maximum allowable value for the input number.

  • Disabled: When enabled, the "Disabled" property makes the input number unchangeable.

  • Format: The "Format" property allows you to format the displayed value, as shown in the image.

  • Min Fraction Digits: Specify the minimum number of fraction digits in the value.

  • Max Fraction Digits: Specify the maximum number of fraction digits in the value.

  • Styles: Customize the initial styles of the input number to align with your application's design.

How to Use Input Numbers

To use input numbers in your application, follow these steps:

  1. Value: Utilize the "Value" property to set or retrieve the numeric value of the input number.

  2. Label: Add a descriptive label above the input number to provide context for the user.

  3. Hint: Include a hint below the input number to offer additional guidance or instructions to users.

  4. Placeholder: Optionally, specify a placeholder text to describe the expected numeric input.

  5. Min and Max Values: Define the acceptable range of numeric values using the "Min Value" and "Max Value" properties.

  6. Disabled State: Use the "Disabled" property to make the input number unchangeable when necessary.

  7. Formatting: Customize the formatting of the displayed value using the "Format," "Min Fraction Digits," and "Max Fraction Digits" properties.

Use Cases

Input numbers are commonly used in various scenarios, including:

  • Data entry: Allow users to input numerical data accurately, such as quantities, prices, or measurements.

  • Settings and configuration: Implement input numbers in settings panels for numerical configuration options.

  • Financial applications: Use input numbers for financial applications, where precision and formatting are crucial.

  • Form validation: Validate and restrict numeric inputs within specific ranges.

Input numbers enhance user interactions by simplifying numerical data entry and offering control over input behavior.