Skip to contentSkip to footer
Give feedbackv3.0.2

Field groups

Often 2 fields can be linked to the same question. This may be because the question has multiple answers, or the question can be answered in different ways - for example daily/weekly/monthly.

Combined form fields allows the user to easily answer the multiple parts of the question at the same time, in a way that looks simple and logical.

<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>
<fieldset>
	<label for="field">Field group with button</label>
	<div class="field-group field-group--buttons">
		<input id="field" type="text">
		<button class="btn">Search</button>
	</div>
</fieldset>
<fieldset>
	<label for="field">Field group with checkbox buttons</label>
	<div class="field-group field-group--toggle">
		<input id="field" type="number">
		<label class="checkbox checkbox--inline">
			<input checked="" name="checkbox-inline" type="checkbox" value="option1">Week
		</label>
		<label class="checkbox checkbox--inline">
			<input name="checkbox-inline" type="checkbox" value="option2">Month
		</label>
		<label class="checkbox checkbox--inline">
			<input name="checkbox-inline" type="checkbox" value="option3">Year
		</label>
	</div>
</fieldset>
<fieldset>
	<label for="field">Field group with radio buttons</label>
	<div class="field-group field-group--toggle">
		<input id="field" type="number">
		<label class="radio radio--inline">
			<input checked="" name="radio-inline" type="radio" value="option1">Week
		</label>
		<label class="radio radio--inline">
			<input name="radio-inline" type="radio" value="option2">Month
		</label>
		<label class="radio radio--inline">
			<input name="radio-inline" type="radio" value="option3">Year
		</label>
	</div>
</fieldset>

Date field

In date fields the question and field type need to be repeated in the first label, using the screenreader class.

When did you buy your car?
<div class="form-group-date">
	<legend>When did you buy your car?
	<fieldset>
		<!-- It's important to repeat the question and explain the field in the day label -->
		<label for="dob-day"><span class="screenreader">When did you buy your car? Date field, </span>Day</label>
		<input id="dob-day" placeholder="DD" maxlength="2" min="1" max="31"  name="day" type="number" pattern="\d{1,2}" autoComplete="off">
	</fieldset>
	<fieldset>
		<label for="dob-month">Month</label>
		<input id="dob-month" placeholder="MM" maxlength="2" min="1" max="12" name="month" type="number" pattern="\d{1,2}" autoComplete="off">
	</fieldset>
	<fieldset>
		<label for="dob-year">Year</label>
		<input id="dob-year" placeholder="YYYY" maxlength="4"  min="1900" max="2100" name="year" type="number" pattern="\d{4}" autoComplete="off">
	</fieldset>
</div>