NumberInput not working as expected on iOS when decimal keypad uses a comma but locale expects a dot

[baptisteArno]

Description

On iOS devices, when the user's keyboard language is set to one that uses a comma (,) as the decimal separator (e.g. French, German, Italian), the numeric keypad does not include a dot (.). Only a comma is shown.

However, NumberInput could expect a dot (.) when locale is set to en-US (the default). This leads to broken input when a user types a valid comma-separated number (e.g. 1,23).

Expected Behavior

• 1,23 should be interpreted as 1.23 especially if the current browser is iOS
• Alternatively, developers should be able to configure how input is parsed

Steps to Reproduce

1. Set iPhone keyboard to a comma-based locale (e.g. fr-FR, de-DE)
2. Render <NumberInput inputMode="decimal" /> in a web app. iOS shows a numeric keypad with a comma (,) but no dot (.)
3. Type 1,23
4. Input is 123 because comma is not considered as decimal separator.

Ark UI Version

5.11.0

Framework

• React
• Solid
• Vue

Browser

Webkit iOS

Suggested Solutions

1. Automatic normalization: Internally convert , to . before parsing if likely used as decimal
2. Expose a parse or normalize prop: Allow developers to define how raw input is interpreted
3. Optional decimalSeparator override: Allow developers to specify the decimal separator explicitly

[baptisteArno]

Setting the locale prop to navigator.language does not event cover it because the user could have en browser but a fr keyboard 😮‍💨 (myself included)

[segunadebayo]

This one is tricky; we can't fix it at the moment since we explicitly rely on the locale.

We can consider Option 2, as it offers a broader API. This is more of a nice-to-have at the moment.

[baptisteArno]

Open for contribution for this?

[segunadebayo]

Sure. Feel free to create a PR to Zag.js