Checkbox

We have 2 different designs for checkboxes: text only and text with image. You can get text only design using sui-checkbox class but if you need to add an image is better to use sui-checkbox-image class.

Below you can find both designs. Click on the tabs to get a visual example and demo code.

Text only (Default)

Text with image

Unchecked Unchecked Checked Disabled (Unchecked) Disabled (Checked)

<div class="sui-form-field">

	<!--
	START:
	Checkbox element
	-->
	<label for="unique-id" class="sui-checkbox">

		<input
			type="checkbox"
			id="unique-id"
			aria-labelledby="label-unique-id"
		/>

		<span aria-hidden="true"></span>

		<span id="label-unique-id">Option name</span>

	</label>
	<!--
	END:
	Checkbox element
	-->

</div>

Unchecked Unchecked Checked Disabled (Unchecked) Disabled (Checked)

<div class="sui-form-field" role="radiogroup">

	<!--
	START:
	Checkbox element
	-->
	<label for="unique-id" class="sui-checkbox-image">

		<img
			src="./assets/images/image.png"
			srcset="./assets/images/image.png 1x, ./assets/images/image@2x.png 2x"
			alt="Descriptive text regarding image"
		/>

		<span class="sui-checkbox">

		<input
			type="checkbox"
			id="unique-id"
			aria-labelledby="label-unique-id"
		/>

		<span aria-hidden="true"></span>

			<span id="label-unique-id">Option name</span>

		</span>

	</label>
	<!--
	END:
	Checkbox element
	-->

</div>

Checkboxes can be aligned in two different ways: inline and stacked. By default these are aligned one next to another as inline elements, but you can also pile them one on top of another as stacked elements adding sui-checkbox-stacked class to sui-checkbox element.

<label class="sui-checkbox"></label>

<label class="sui-checkbox sui-checkbox-stacked"></label>

Checkboxes have two font size variations: default which has 15px font size, and small which has 13px font size. To have smaller font size you just need to add sui-checkbox-sm class to sui-checkbox element.

<label class="sui-checkbox"></label>

<label class="sui-checkbox sui-checkbox-sm"></label>