Basic Conditional Requirements
Simple conditions that make a field required when another field has any value.
Field Required if Another Field Has Any Value
Using conditions="email=*" makes the field
required when the email field contains any value.
<label>Email address
<input type="email" name="email" />
</label>
<form-required-if
conditions="email=*"
indicator="*">
<label for="phone">Phone number
<input
name="phone"
id="phone"
type="tel" />
</label>
</form-required-if>OR Logic
Make a field required when any of multiple
conditions are met using the || operator.
Multiple Conditions (OR)
Using conditions="email=*||choose=3" makes
the field required when either the email field has a
value OR the select has "Option 3" chosen.
<label>Email address
<input type="email" name="email" />
</label>
<label for="choose">Choose an option
<select name="choose" id="choose">
<option value="">Select...</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</label>
<form-required-if
conditions="email=*||choose=3"
indicator="*">
<label for="details">Details
<input name="details" id="details" />
</label>
</form-required-if>Specific Value Matching
Require a field only when another field matches an exact value.
Exact Value Match
Using conditions="email=foo@bar.tld" makes
the field required only when the email field contains
that exact value.
<label>Email address
<input type="email" name="email" />
</label>
<form-required-if
conditions="email=foo@bar.tld">
<label for="secret">Secret code
<input name="secret" id="secret" />
</label>
</form-required-if>Radio & Checkbox Integration
Common pattern for "Other" options in radio and checkbox groups.
Radio "Other" Pattern
When a user selects "Other", a text field becomes required for them to specify.
<fieldset>
<legend>Choose an option</legend>
<label>
<input type="radio"
name="radio" value="1" />
Option 1
</label>
<label>
<input type="radio"
name="radio" value="2" />
Option 2
</label>
<div class="other-radio">
<label>
<input type="radio"
name="radio" value="other" />
Other
</label>
<form-required-if
conditions="radio=other">
<label class="dependent">
<span class="visibly-hidden">Other value</span>
<input name="radio-other" />
</label>
</form-required-if>
</div>
</fieldset>Checkbox "Other" Pattern
Similar to radio, but works with checkbox arrays using
checkbox[]=other syntax.
<fieldset>
<legend>Choose options</legend>
<label>
<input type="checkbox"
name="checkbox[]" value="1" />
Option 1
</label>
<label>
<input type="checkbox"
name="checkbox[]" value="2" />
Option 2
</label>
<div class="other-checkbox">
<label>
<input type="checkbox"
name="checkbox[]"
value="other" />
Other
</label>
<form-required-if
conditions="checkbox[]=other">
<label class="dependent">
<span class="visibly-hidden">Other value</span>
<input name="checkbox-other" />
</label>
</form-required-if>
</div>
</fieldset>Custom Indicators
Customize the required indicator with HTML and control its position.
HTML Indicator
The indicator attribute accepts HTML, like
indicator="<b>*</b>".
<form-required-if
conditions="email=*"
indicator="<b>*</b>">
<label for="company">Company
<input name="company" id="company" />
</label>
</form-required-if>Indicator Positioning
Use indicator-position="before" to place
the indicator before the label text instead of after.
<form-required-if
conditions="email=*"
indicator="*"
indicator-position="before">
<label for="department">Department
<input
name="department"
id="department" />
</label>
</form-required-if>Label Structure Variations
The component works with different label /
input markup patterns.
Sibling Label & Input
label and input as siblings
instead of the input being nested in the
label.
<form-required-if
conditions="email=*"
indicator="*">
<label for="field1">
Field label
</label>
<input
type="text"
id="field1"
name="field1" />
</form-required-if>Label with Nested Elements
Works with labels containing one or more nested elements.
<form-required-if
conditions="email=*"
indicator="*">
<label for="field2">
<span>Multi-part</span>
<span>label text</span>
</label>
<input id="field2" name="field2" />
</form-required-if>Label Wrapping Input
Label can wrap the input element.
<form-required-if
conditions="email=*"
indicator="*">
<label>
<span>Wrapped input</span>
<input name="field3" />
</label>
</form-required-if>Complex Examples
More advanced use cases combining multiple techniques.
Chained Dependencies
Field A makes Field B required, and Field B makes Field C required.
<label>Enable feature
<input
type="checkbox"
name="enable"
value="yes" />
</label>
<form-required-if
conditions="enable=yes">
<label for="feature-type">
Feature type
<select
name="feature-type"
id="feature-type">
<option value="">Select...</option>
<option value="basic">Basic</option>
<option value="advanced">
Advanced
</option>
</select>
</label>
</form-required-if>
<form-required-if
conditions="feature-type=advanced">
<label for="config">
Advanced config
<textarea
name="config"
id="config"></textarea>
</label>
</form-required-if>Real-World Example
A complete contact form demonstrating practical usage.
Contact Form with Conditional Fields
This form collects contact preferences and conditionally requires contact details.
<form action="#">
<label>Name
<input type="text"
name="name" required />
</label>
<fieldset>
<legend>
How should we contact you?
</legend>
<label>
<input type="checkbox"
name="contact[]"
value="email" />
Email
</label>
<label>
<input type="checkbox"
name="contact[]"
value="phone" />
Phone
</label>
</fieldset>
<form-required-if
conditions="contact[]=email">
<label for="contact-email">
Email address
<input type="email"
name="contact-email"
id="contact-email" />
</label>
</form-required-if>
<form-required-if
conditions="contact[]=phone">
<label for="contact-phone">
Phone number
<input type="tel"
name="contact-phone"
id="contact-phone" />
</label>
</form-required-if>
<label for="message">Message
<textarea name="message"
id="message"
required></textarea>
</label>
<button type="submit">
Send
</button>
</form>API Reference
For complete documentation of attributes, methods, and browser support, see the README.