Formfieldset

A fieldset is a component that visualises a row in a form. This component usualy consists out of a subtitle and one or more different formfields which make up the fields where user can give his input. This component can also consist out of a single title.

different fieldsets make up the inner layout of a form.

Buttonrow

aantal jaren 

			
				<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--2@desktop">
			<div class="l-form__subtitle">
				aantal jaren
			</div>
		</div>
		<div class="l-grid__col l-grid__col--10@desktop">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="1" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">1</p>
					</label>
				</div>
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="5" checked />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">5</p>
					</label>
				</div>
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="10" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">10</p>
					</label>
				</div>
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="20" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">20</p>
					</label>
				</div>
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="25" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">25</p>
					</label>
				</div>
				<div class="c-formfield l-grid__col l-grid__col--4 l-grid__col--2@desktop c-formfield__item">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="" value="30" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">30</p>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>

Default

Wat is je dienstverband?
Wat is je geboortedatum?
Jouw bruto jaarinkomen? 

			
				<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
			<div class="l-form__subtitle">
				Wat is je dienstverband?
			</div>
		</div>
		<div class="l-grid__col l-grid__col--7@desktop">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12 l-grid__col--6@tablet">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="button" value="vast" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">vast</p>
					</label>
				</div>
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12 l-grid__col--6@tablet">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="button" value="zelfstandig" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">zelfstandig</p>
					</label>
				</div>
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12 l-grid__col--6@tablet">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="button" value="flexwerker" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">flexwerker</p>
					</label>
				</div>
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12 l-grid__col--6@tablet">
					<label class="c-formfield__container c-formfield--advanced js-formfield">
						<input class="c-formfield__input" type="checkbox" name="button" value="pensioen" checked />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">pensioen</p>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
			<div class="l-form__subtitle">
				Wat is je geboortedatum?
			</div>
		</div>
		<div class="l-grid__col l-grid__col--7@desktop">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12">
					<label class="c-formfield__container ">
						<div class="c-input  ">
							<div class="c-input__wrapper
			">
								<input id="" class="c-input__field" type="text" name="birthdate" placeholder="dd/mm/yyyy" value="" />
							</div>
						</div>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
			<div class="l-form__subtitle">
				Jouw bruto jaarinkomen?
			</div>
		</div>
		<div class="l-grid__col l-grid__col--7@desktop">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12 l-grid__col--6@tablet">
					<label class="c-formfield__container ">
						<div class="c-input  ">
							<div class="c-input__wrapper
			">
								<input id="" class="c-input__field" type="text" name="birthdate" placeholder="€ 0" value="" />
							</div>
						</div>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>
<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
			<div class="l-form__subtitle">
			</div>
		</div>
		<div class="l-grid__col l-grid__col--7@desktop">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield c-formfield__item l-grid__col l-grid__col--12">
					<label class="c-formfield__container ">
						<input class="c-formfield__input" type="checkbox" name="hasPartner" value="Ik koop mijn huis met mijn partner" />
						<span class="c-formfield__holder">
							<span class="fas fa-check c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">Ik koop mijn huis met mijn partner</p>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>

Yes no radio

Heb je leningen en/of verplichtingen? 

			
				<fieldset class="l-form__fieldset c-formfieldset ">
	<div class="l-grid l-grid--with-spacing l-grid--align-middle">
		<div class="l-grid__col l-grid__col--12 l-grid__col--5@desktop">
			<div class="l-form__subtitle">
				Heb je leningen en/of verplichtingen?
			</div>
		</div>
		<div class="l-grid__col l-grid__col--7@desktop ">
			<div class="l-grid l-grid--with-spacing l-grid--align-middle">
				<div class="c-formfield c-formfield__item l-grid__col--2">
					<label class="c-formfield__container ">
						<input class="c-formfield__input" type="radio" name="yesNoRadio" value="ja" checked />
						<span class="c-formfield__holder">
							<span class="fa fa-circle c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">ja</p>
					</label>
				</div>
				<div class="c-formfield c-formfield__item l-grid__col--2">
					<label class="c-formfield__container ">
						<input class="c-formfield__input" type="radio" name="yesNoRadio" value="nee" />
						<span class="c-formfield__holder">
							<span class="fa fa-circle c-formfield__icon"></span>
						</span>
						<p class="c-formfield__label">nee</p>
					</label>
				</div>
			</div>
		</div>
	</div>
</fieldset>