Numpad for React
Learn moreNumpad - Decimal
Numpad - Currency
Numpad - Integer
Numpad - Timespan
Numpad - RTL Support
Numpad - Time
Numpad - Date
Numpad - Masked Entry - PIN
Numpad - Phone number entry
Use the numpad for phone number entry. With built-in validation your users cannot go wrong.
Use the validate
function to check for the appropriate length, format and only enable the set
button if everything looks good.
With the help of the template
setting, the formatValue
and parseValue
functions you can ensure the phone number is shown in the correct format, with all the dashes and spaces that make sense.
Numpad - Variable Fraction
Numpad - Donation
Numpad - Event handlers
EVENTS FIRED:
Numpad - Display modes
Numpad - Theming capabilities
The look and feel of the numpad can be deeply customized. There are four levels of customization:
- Base themes: Choose between
Mobiscroll
,iOS
,Android Material
andWindows
. - Light or dark: Every theme has a
light
anddark
variant. Setting thethemeVariant
to'auto'
will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.