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.
More Dev Tips
Discover more tips and tricks to level up your development skills
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 startedStay up to date
Sign up for our newsletter and we will keep you updated on everything going on with supastarter.