<dependent-input>

This custom element helps you to toggle the visibility and disabled state of form controls based on the selected value of a <select> or <input type=radio>.

Usage

Add the script to your page:

<script type="module" src="dependent-input.js"></script>

Place the select or radio inside the <dependent-input> element. To each option or radio, add a data-controls attribute. The value of this attribute is the ID of the associated element.

The associated element can be any form control. If you want to associate multiple controls with an option, you can use a <fieldset>.

When an option (or radio) is selected, the associated controls of other elements will be both hidden and disabled (with the hidden and disabled HTML attributes).

<dependent-input>
 <label>
 Accommodation type
 <select name="type">
 <option value="hotel" data-controls="hotel-options" selected>Hotel</option>
 <option value="hostel" data-controls="hostel-options">Hostel</option>
 <option value="apt" data-controls="apt-options">Apartment</option>
 </select>
 </label>
</dependent-input>
<fieldset id="hotel-options">...</fieldset>
<fieldset id="hostel-options">...</fieldset>
<fieldset id="apt-options">...</fieldset>