Adaptive Rendering

Updated on Jun 24, 2026

The OTPInput does not require specific adaptive rendering, but you can use the inputAttributes property to enable the browser to show an input-specific on-screen keyboard.

On-Screen Keyboard

To enhance the mobile user experience of your Vue apps, configure the type of on-screen keyboard for the OTPInput. Use the inputAttributes property to set the inputMode HTML attribute on every inner <input> element. Based on the inputMode setting, the browser will display the most appropriate virtual keyboard.

Test the different virtual keyboard types by opening this example on a mobile device.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the OTPInput Props
• The inputmode Global Attribute