As a frontend developer I want to implement a user-friendly and reusable number picker component so that it can be consistently used across the application wherever numeric inputs are required (e.g., IFA Tablets, Delivery Outcome, Number of Children).

Description

Develop a Number Picker UI control with the following features:

• Increment and decrement functionality using "+" and "−" buttons
• Ability to manually enter numbers
• Input validation (only non-negative integers unless otherwise required)
• Should be reusable across the app via a shared component or design system

Acceptance Criteria

• Component includes:
  • A decrement ("−") button
  • A numeric input field (supports manual entry)
  • An increment ("+") button
• Users can:
  • Tap "+" or "−" to increment/decrement values
  • Directly type a valid number
  • Component enforces min value (default = 0) and optional max value if passed
• Field validation:
  • Prevent non-numeric characters
  • Prevent values below 0 (or allow negatives only when explicitly enabled)
• Visual Design:
  • Touch-friendly for mobile devices
  • Aligns with app's existing design system/style guide
  • Displays disabled state if field is read-only
• Reusability:
  • Implemented as a shared component
  • Can be used in:
    • IFA Tablet Count
    • Delivery Outcome: Number of babies
    • Number of Children (PNC)
    • Other numeric data entry fields