KMSKA

Checkboxes can be toggled on or off.

Modifiers

Default


			
				<div class="
		c-checkbox
	">
	<label class="c-checkbox__container">
		<input class="c-checkbox__input" type="checkbox" name="checkbox-button" id="checkbox-button-1" value="Werken met afbeelding" checked />
		<span class="c-checkbox__holder">
			<div class="c-icon c-icon--white c-checkbox__icon">
				<svg viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M5.47585 8.58446L13.6957 0.350067L15.7228 2.38279L5.47585 12.6499L-7.92678e-06 7.15337L2.02715 5.12066L5.47585 8.58446Z" />
				</svg>
			</div>
		</span>
		<p class="c-checkbox__label">Werken met afbeelding</p>
	</label>
</div>

Small


			
				<div class="
		c-checkbox
		c-checkbox--small
	">
	<label class="c-checkbox__container">
		<input class="c-checkbox__input" type="checkbox" name="checkbox-small-button" id="checkbox-small-button-1" value="Werken met afbeelding (15)" />
		<span class="c-checkbox__holder">
			<div class="c-icon c-icon--white c-checkbox__icon">
				<svg viewBox="0 0 16 13" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M5.47585 8.58446L13.6957 0.350067L15.7228 2.38279L5.47585 12.6499L-7.92678e-06 7.15337L2.02715 5.12066L5.47585 8.58446Z" />
				</svg>
			</div>
		</span>
		<p class="c-checkbox__label">Werken met afbeelding (15)</p>
	</label>
</div>

Documentation

Modifiers

c-checkbox--small

This modifier will reduce the size of the checkbox and will add a smaller font-size.