react-formik-ui
react-formik-ui copied to clipboard
Implement a robust number field
Is your feature request related to a problem? Please describe. It is difficult to customize the existing implementation of a number field (which is using Input with type number).
Describe the solution you'd like
Implement a standalone number field, perhaps using react-number-format
Describe alternatives you've considered I began this request as a currency field but I feel like a more flexible number field would be more widely beneficial
@hallcountymis flexible sounds good but could you please describe your issue in more detail e.g: what you are trying to accomplish and maybe give a code example ?
The actual <Input />
component accepts all parameters a normal html input accepts as well. so you can configure it as you need.
Sure! I have a few different use cases for such a field:
- Currency: I would like to have the dollar sign prefix any number entered and have the commas and decimals as well.
- Social Security Number: (xxx-xx-xxxx). I would like the dashes to appear automatically. I would also love for there to be a boolean prop to password mask the field so that I could set up triggers for onFocus (unmask) and onBlur (remask) so that onlookers can't see the SSN.
- IP Address: I could see this being useful for IP addresses as well as many other similar uses.
I'm not sure exactly what kind of code sample to provide here, as my request is more conceptual. I'm going to give customization of <Input />
a try per your suggestion, but I think this would be useful as a build in option for many.
Thanks for your time!
Give it a try, i'll look into it to maybe add a separate component for a masked Input field.
By the way on the latest version you are able to add a custom onChange
handler and value
to the <Input />
component, but be aware if you do so you need to set the value in the Formik
state with setFieldValue
from Formik
. But if you know how Formik
works you'll figure it out.
Let me know how it goes.