Checkbox

Checkboxes can be toggled on or off, they don't need to be grouped but if they are you can select multiple checkbox within one group.

The text can include links.

Default 


			
				<div class="c-checkbox ">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 1" checked />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 1</p>
	</label>
</div>
<div class="c-checkbox ">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 2" />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 2</p>
	</label>
</div>
<div class="c-checkbox ">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 3" />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 3</p>
	</label>
</div>

Reverse 


			
				<div class="c-checkbox c-checkbox--reverse">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 1" checked />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 1</p>
	</label>
</div>
<div class="c-checkbox c-checkbox--reverse">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 2" />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 2</p>
	</label>
</div>
<div class="c-checkbox c-checkbox--reverse">
	<label class="c-checkbox__container">
		<div class="c-checkbox__checkbox-wrapper">
			<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="Checkbox 3" />
			<span class="c-checkbox__holder">
				<div class="c-icon c-icon--white c-checkbox__icon">
					<?xml version="1.0" encoding="utf-8"?>
					<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
					<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
						<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
					</svg>
				</div>
			</span>
		</div>
		<p class="c-checkbox__label">Checkbox 3</p>
	</label>
</div>

Documentation

Modifiers

  • c-checkbox--reverse

    This modifier will switch the order of the label and the checkbox.

  • c-checkbox--transparent

    This modifier makes the background of the checkbox transparent when not active.