Regional Number Input Component

Build a React component that provides a number input field supporting different regional number formats, specifically for European users who use comma as a decimal separator.

Requirements

Create a component that:

1. Accepts numeric input with comma as the decimal separator (e.g., "12,34" instead of "12.34")
2. Provides increment/decrement buttons to adjust the value by steps of 0.5
3. Enforces a minimum value of 0 and maximum value of 100
4. Displays a prefix "€" to indicate currency

The component should handle user typing naturally, allowing them to type values like "12,5" and have it work correctly.

Test Cases

• When the user types "12,5" the component accepts it and can parse it correctly @test
• Clicking the increment button increases the value by 0.5 (e.g., "10,5" becomes "11,0") @test
• The component displays "€" before the input value @test

Implementation

@generates

API

import React from 'react';

export interface RegionalInputProps {
  value?: number;
  onChange?: (value: number | null) => void;
  defaultValue?: number;
}

export const RegionalInput: React.FC<RegionalInputProps>;

Dependencies { .dependencies }

@rc-component/input-number { .dependency }

Provides numeric input functionality with validation and formatting support.

@satisfied-by

React { .dependency }

Provides the component framework.

@satisfied-by