Toggle

A togglable item can either be a radio-button or a checkbox. Both have their own functionality when placed within groups but they are used to toggle a state on or off.

Bold

Change the visual styling of the label to a more darker/bold version compared to its original.

px 

			
				<div class="a-toggle ">
	<label class="a-toggle__container" for="checkbox-button-bold-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="checkbox" id="checkbox-button-bold-3" name="checkbox-button-bold" />
			<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
		</div>
		<span class="a-toggle__label a-toggle__label--bold">This is a checkbox</span>
	</label>
</div>

Checkbox

Checkboxen 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.

px 

			
				<div class="a-toggle ">
	<label class="a-toggle__container" for="checkbox-button-example-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="checkbox" id="checkbox-button-example-3" name="checkbox-button-example-2" />
			<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
		</div>
		<span class="a-toggle__label ">This is a checkbox</span>
	</label>
</div>

Fit space

The entire component takes up the remaining width of the container it is used within by increasing its width to 100% of the parent. Can be combined with for example a-toggle--inverse-order to get the inversed effect.

px 

			
				<div class="a-toggle a-toggle--fit-space">
	<label class="a-toggle__container" for="checkbox-button-fit-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="checkbox" id="checkbox-button-fit-3" name="checkbox-button-fit" />
			<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
		</div>
		<span class="a-toggle__label ">This is a checkbox</span>
	</label>
</div>

Inverse order

By applying a modifier, the order of the label and the checkbox/radio button can be switched.

px 

			
				<div class="a-toggle a-toggle--inverse-order">
	<label class="a-toggle__container" for="checkbox-button-inverse-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="checkbox" id="checkbox-button-inverse-3" name="checkbox-button-inverse" />
			<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
		</div>
		<span class="a-toggle__label ">This is a checkbox</span>
	</label>
</div>

Radio button card

Radio buttons can be grouped together, but only one can be toggled on. Make sure that every radio button's id is different but the ones in group must have the same name attribute.

px 

			
				<div class="a-toggle a-toggle--inverse-order a-toggle--card a-toggle__label--secondary">
	<label class="a-toggle__container" for="radio-button-example-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="radio" id="radio-button-example-3" name="radio-button-example-2" />
			<span class="a-toggle__icon a-toggle__icon--off icon-radio-hollow"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-radio-filled"></span>
		</div>
		<span class="a-toggle__label ">This is a radio</span>
	</label>
</div>

Radio button

Radio buttons card can be grouped together, but only one can be toggled on. Make sure that every radio button's id is different but the ones in group must have the same name attribute.

px 

			
				<div class="a-toggle ">
	<label class="a-toggle__container" for="radio-button-example-3">
		<div class="a-toggle__wrapper">
			<input class="a-toggle__input" type="radio" id="radio-button-example-3" name="radio-button-example-2" />
			<span class="a-toggle__icon a-toggle__icon--off icon-radio-hollow"></span>
			<span class="a-toggle__icon a-toggle__icon--on icon-radio-filled"></span>
		</div>
		<span class="a-toggle__label ">This is a radio</span>
	</label>
</div>

Documentation

Modifiers

  • a-toggle--inverse-order

    Inverse the order of the checkbox/radio and its label.

  • a-toggle--fit-space

    Take up the remaining space of the container is placed within by increasing the width to 100% of the parent.

  • a-toggle__icon--off

    Add this class to the icon that needs to show when the toggle is checked off

  • a-toggle__icon--on

    Add this class to the icon that needs to show when the toggle is checked on

  • a-toggle__label--bold

    Change the default label styling to a more darker/bold variant

  • a-toggle--secondary

    Change the default Checkbox / radiobutton styling and have a larger Checkbox / radiobutton

  • a-toggle--card

    Add a card style to the default Checkbox / radiobutton