Formfield

Component consists out of input fields with their corresponding type. Each input field can be supported by an icon or any sort of feedback needed to guide the user through a form. These input fields contain states to indicate towards the user if he has filled in the correct value.

Advanced 


			
				<div class="c-formfield c-formfield--advanced js-formfield">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="checkbox" name="checkbox-button" value="45.000" />
		<span class="c-formfield__holder">
			<span class="fas fa-check c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">45.000</p>
	</label>
</div>
<div class="c-formfield c-formfield--advanced js-formfield">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="checkbox" name="checkbox-button" value="45.000" checked />
		<span class="c-formfield__holder">
			<span class="fas fa-check c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">45.000</p>
	</label>
</div>

Button 


			
				<div class="c-formfield ">
	<label class="c-formfield__container c-formfield--advanced js-formfield">
		<input class="c-formfield__input" type="checkbox" name="button" value="regular button" />
		<span class="c-formfield__holder">
			<span class="fas fa-check c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">regular button</p>
	</label>
</div>
<div class="c-formfield ">
	<label class="c-formfield__container c-formfield--advanced js-formfield">
		<input class="c-formfield__input" type="checkbox" name="button" value="selected button" checked />
		<span class="c-formfield__holder">
			<span class="fas fa-check c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">selected button</p>
	</label>
</div>

Checkbox 


			
				<div class="c-formfield ">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="checkbox" name="checkbox-button" 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 class="c-formfield ">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="checkbox" name="checkbox-button" value="ik koop mijn huis met mijn partner" checked />
		<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>

Input 


			
				<div class="c-formfield ">
	<label class="c-formfield__container ">
		<div class="c-input  ">
			<div class="c-input__wrapper
			">
				<input id="number-3" class="c-input__field" type="text" name="number-input" placeholder="text input formfield default" value="" />
			</div>
		</div>
	</label>
</div>
<div class="c-formfield ">
	<label class="c-formfield__container ">
		<div class="c-input  ">
			<div class="c-input__wrapper
			">
				<input id="number-3" class="c-input__field" type="number" name="number-input" placeholder="25" value="" min="0" max="99" step="1" />
			</div>
		</div>
	</label>
</div>

Radio 


			
				<div class="c-formfield c-formfield--radio">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="radio" name="radio-button" value="ik koop mijn huis met mijn partner" />
		<span class="c-formfield__holder">
			<span class="fa fa-circle c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">ik koop mijn huis met mijn partner</p>
	</label>
</div>
<div class="c-formfield c-formfield--radio">
	<label class="c-formfield__container ">
		<input class="c-formfield__input" type="radio" name="radio-button" value="ik koop mijn huis met mijn partner" checked />
		<span class="c-formfield__holder">
			<span class="fa fa-circle c-formfield__icon"></span>
		</span>
		<p class="c-formfield__label">ik koop mijn huis met mijn partner</p>
	</label>
</div>

Select alternative 


			
				<div class="c-formfield c-formfield--select-alternative">
	<label class="c-formfield__container ">
		<div class="c-input  c-input--select ">
			<div class="c-input__wrapper
			c-input__wrapper--with-icon
			">
				<select class="c-input__select" id="alternative-select-id" name="alternative-select">
					<option selected disabled>maand</option>
					<option value="">optie 1</option>
					<option value="">optie 2</option>
					<option value="">optie 3</option>
				</select>
				<span class="c-input__icon far fa-chevron-down"></span>
			</div>
		</div>
	</label>
</div>

Select 


			
				<div class="c-formfield ">
	<label class="c-formfield__container ">
		<div class="c-input  c-input--select ">
			<div class="c-input__wrapper
			">
				<select class="c-input__select" id="select-id" name="select">
					<option selected disabled>selecteer uw keuze</option>
					<option value="">optie 1</option>
					<option value="">optie 2</option>
					<option value="">optie 3</option>
				</select>
				<span class="c-input__icon "></span>
			</div>
		</div>
	</label>
</div>

Documentation

Modifiers

  • c-formfield--advanced

    Creates a more advanced version of the checkbox formfield. It contains a border and has different color of border and background when the checkbox is in the checked state.

  • c-formfield--radio

    Creates a radio formfield. It has the same content as the default formfield, except the icon and the function.

States

  • is-checked

    Indicates that the formfield is checked.

JavaScript

  • js-formfield

    The advanced checkbox component contains some javascript where the background and border color can be handled by toggling the state.