Web forms are a critical component of modern web applications. It's important to try and provide a good user experience and make your forms as usable as possible.
Unfortunately, the native form elements provided by browsers in HTML5 are still fairly basic and difficult to customize in terms of styling.
Take something that you'd think would be relatively easy by now. Like styling select elements or adding icons to each option of the select. This is still not achievable in a consistent cross-browser manner.
Perhaps the worst of the native form elements is the
<select multiple>. This provides a horrible user experience by default and is usually replaced by solutions like Selectize or Chosen. There are of course many other custom form components that aim to enhance user experience and make styling easier.
There is always a trade-off between the perceived enhanced design and usability of the component and introducing additional complexity.
- If you are replacing many elements on your page how will this impact performance?
- Does the scripting of your control allow full keyboard access?
- Is it accessable to assistive devices like screen readers?
- Does it work across all browsers and on mobile devices?
- Is the scripting for your control thoroughly tested around edge cases?
Before reaching for a custom solution it's worth re-asking the question. Is it really necessary?
If your custom control works by replacing a semantic form element it probably will not work at all with screen readers or voice recognition software. if a select element is replaced with
So, is it really necessary? As ever in product development, the answer to this question is, it depends. We are always trying to think about product use cases and of course, user needs. So when you have a definitive use case for a multiple select you will likely need a more enhanced solution than the browser provides by default. However, often times simplicity is best.