Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Number Input

    Number input lets users enter a numeric value and incrementally increase or decrease the value with a two-segment control.

    Overview

    Number inputs are similar to text inputs, but are used to specify only a numeric value. Number inputs incrementally increase or decrease the value with a two-segment control. Number input reduces input efforts for adjusting small values.

    When to Use

    • The user needs to input a numeric value
    • Adjusting small values when increasing or decreasing them requires only a few clicks
    • When users may not know exact values and only want to change the values that are relative to its current state

    When Not to Use

    • It is best practice not to use number input if large value changes are expected. For example, when the value sets from 1 to 30, number input is not a great option because it requires many clicks to reach 30.
    • It is also best to avoid number input for continuous variables such as prices, distances, lengths, or human heights. 

    Formatting

    Anatomy

    Accordion anatomy diagram
    1. Label: Text that informs the user about the content they need to enter in the field.
    2. Numeric value: The value changes when user enters a value into the field or uses the subtract or add controls.
    3. Helper text: Assistive text that can provide additional aid or context to the user. Often used to explain the correct data format.
    4. Field: The container in which a user enters data.
    5. Subtract icon: This icon triggers decremental values.
    6. Add icon: This icon triggers incremental values.
    7. Status icon: Indicates the state of the number input, either error or warning.
    8. Error or Warning text: It replaces the helper text when an error or warning state appears.
     

    Content

    Label

    • Always include a label so that users know how to complete the field
    • Keep the label short and concise

     

    Helper text

    • Indicates the input value if it has a maximum or minimum
    • Helper text is optional but if present will be replaced by warning and error messages when needed

     

    Default values

    • Numeric input should always have a default. The default will usually be ‘1’. Sometimes, you will have input value defaulted to ‘0’.
    • For example, when setting the number of adults and dependents in a household, it may set the default number of adults as ‘1’ and the default number of children as ‘0’.

     

    Inputs

    • A 1 px vertical separator is used between each group of two inputs or icons.
    Number input component with a warning state message