Use input type for better mobile keyboards

8/20/2025

#html#frontend#a11y#mobile#ux

On mobile devices, the type attribute of an <input> not only validates data but also brings up context-aware keyboards.
This makes forms easier and faster to use.

<!-- Brings up numeric keypad -->
<input type="number" placeholder="Age" />
 
<!-- Brings up phone dialer keypad -->
<input type="tel" placeholder="Phone number" />
 
<!-- Brings up email keyboard with @ and .com -->
<input type="email" placeholder="Email" />
 
<!-- Brings up URL keyboard with / and . keys -->
<input type="url" placeholder="Website" />
 
<!-- Brings up date picker -->
<input type="date" placeholder="Birthday" />
 
<!-- Brings up time picker -->
<input type="time" placeholder="Time" />
 
<!-- Brings up search keyboard -->
<input type="search" placeholder="Search" />
 
<!-- ... and more! -->

Using the right input type improves UX, reduces input errors, and makes your app feel more polished on mobile devices.

Start your scalable and production-ready SaaS today

Save endless hours of development time and focus on what's important for your customers with our SaaS starter kits for Next.js, Nuxt 3 and SvelteKit

Get started

Stay up to date

Sign up for our newsletter and we will keep you updated on everything going on with supastarter.