Auto Light Dark Light moss Dark moss
Home Digital garden Input types a11y

Input types a11y

Seedling

TL;DR

See here for a list of every single input type.

The bad ones:

The good ones:

The I’m not sure ones:

If you have any info/knowledge on whether these inputs are good or bad let me know!

The longer version

Button like inputs

As far as I can tell they’re not inherently terrible but you’re probably just better off using the <button> version of them:

But for reset, keep in mind that:

You should usually avoid including reset buttons in your forms. They’re rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).
MDN Web Docs

Dates

Is input type=”date” ready for use in accessible websites? by Graham Armfield

Why GOV.UK Design System doesn’t use input[type="date"]

Maybe You Don’t Need a Date Picker by Adrian Roselli

If you really do need a date picker:

Number

Email

Doug Schepers

Maybe Ignore type=search

Another case of the headline saying it all. If you have a valid, accessible search field (with a useful, sensible label) then you can probably ignore type=”search” and use type=”text” instead. I made a code sample you can use for testing in your preferred set-up; it is what I used…