Skip to contentSkip to footer
Give feedbackv3.0.2

Conditional fields

Conditional fields are used in more advanced forms and are not recommended for most forms.

<fieldset>
	<label for="exampleInputFile">Radio buttons</label>
	<label class="radio radio--conditional">
		<input checked="" name="radio" type="radio" value="option1">Yes
		<div class="conditional--content">
			<fieldset>
					<label class="checkbox checkbox--block">
						<input name="checbox" type="checkbox">Option 1
						<input name="checbox" type="checkbox">Option 2
					</label>
			</fieldset>
		</div>
	</label>
	<label class="radio radio--conditional">
		<input name="radio" type="radio" value="option2">No
	</label>
</fieldset>
<fieldset class="conditional">
	<label for="conditional-two">Conditional Radio buttons</label>
	<label class="radio radio--inline">
		<input name="conditional-two" type="radio" value="1">Don't show
	</label>
	<label class="radio radio--inline">
		<input name="conditional-two" type="radio" value="2">Show
	</label>
</fieldset>
<div class="conditional--fields" style="display: block;">
	<fieldset>
		<label for="field">Field group with dropdown</label>
		<div class="field-group field-group--dropdown">
			<input id="field" type="number">
			<div class="dropdown">
				<select id="exampleSelect1">
					<option>Daily</option>
					<option>Monthly</option>
					<option>Yearly</option>
				</select>
			</div>
		</div>
	</fieldset>
</div>
$(document).ready(function() {
	$('.conditional').click(function() {
		if( $(this).find('input[value="2"]').is(':checked')) {
			$(this).next().show();
		} else {
			$(this).next().hide();
		}
	});
});