Html select form with option to enter custom value

html

responsive-design

form-validation

accessibility

byNikita Barsukov·Dec 1, 2024

Get the job done with a select element, an "Other" option, and an input field that activates whenever "Other" is selected, all coordinated with JavaScript.

<select id="selectBox" onchange="document.getElementById('textInput').style.display = this.value === 'other' ? 'block' : 'none';">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="other">Other...</option>
</select>
<input type="text" id="textInput" style="display:none;" placeholder="Enter custom value"/>

In this quick fix, an input field conveniently toggles, accompanying both listed and custom values.

Integration of HTML5 combobox

An HTML5 combobox is a cool feature that enhances the appearance and function of your form, offering an efficient blend of input and datalist elements, optimized for both predefined selection and custom input.

<!-- It's a bird...It's a plane...No, it's HTML5 combobox! 😎 -->
<input list="options" id="comboInput" placeholder="Choose or type...">
<datalist id="options">
  <option value="Option 1"></option>
  <option value="Option 2"></option>
</datalist>

With the datalist implementation, you maintain the usual dropdown functionality but can also enter a custom value, just like typing a secret cheat code in a video game.

Don't forget cross-browser compatibility. Take a peek at the caniuse site to ensure your function doesn't trip on any browser.

Exploring the HTML5 combobox landscape

Focus on the connection between the input and the datalist for smooth operation - their id and list attributes must match.

The Pros and Cons, in a nutshell:

Pros: Variety in choice, interactive user engagement, and the scope for a proficient user interface.
Cons: Incosistency across browsers and potential server processing complexity.

Here's a practical comparison:

| Approach         | Pros                | Cons             |
|------------------|---------------------|------------------|
| Traditional Select | Familiar UI; Accessibility | Limited to predefined options |
| HTML5 ComboBox   | Input modification; Modern UX | Cross-browser considerations |

Up your game with alternatives

Leverage third-party libraries

When the in-built HTML5 functions don't sync with your requirements, look into using a third-party library like Select2 or Chosen. They offer variety and compatibility, revolutionising your select elements.

Build with JavaScript

A custom-made solution could be a masterstroke! Using JavaScript to construct a faux dropdown that consists of a list of options and an input field can maximize options.

// Pseudo code to rock custom dropdown solution
class CustomDropDown {
  constructor(options) {/* Cocktails anyone? */}
  render() {/* Ready to serve */}
  handleSelection() {/* Slicing and dicing */}
  allowCustomValue() {/* Your wish is my command */}
}

Other considerations

Cater to everyone

Accessibility should be your top priority. Include appropriate ARIA roles and attributes to ensure your controls are keyboard-friendly and screen reader-compatible.