Possible to set custom HTML attributes on a field?

We have a form field that needs to be a percentage, so we’re using a text field with a suffix.

However, we’d love to be able to set the attributes so that on mobile, it uses the number input mode with decimals. We know there is a setting to force number keypad on mobile, but it doesn’t use inputmode=decimal.

Is this possible using Javascript to set the HTML attribute? We’ve tried adding code to our header but haven’t gotten it to work reliably.

  1. Is there another way to do this?
  2. If Javascript usually works, are there any examples for us to use?

Hi @jd175 , With the text field selected and the allowed characters property set to digits, you may not be able to accept decimal fields. The Number input field may be more suitable for your usecase. If you want to show the %, you can add a text element next to the input field and use that to show the %. This would be the simplest yet best way to leverage the right keyboards.

Hi @kailash, we’re not looking to force set the characters to digits, as the decimal place is a necessary requirement. The number input field with a text “%” afterwards looks somewhat unpolished, and the “%” sign isn’t very obvious (our design has full width form fields).

We just want to leverage the existing number + decimal keyboard that exists off the shelf in various web browsers, which can be done by setting the inputmode attribute. So I’m just looking to understand if there’s a way of manually setting this, even if it is via code. Thank you!

Yes it should be totally possible to set the field inputmode via code, you can use custom html / js to grab it off the dom and set the inputmode