Toggle

A component that enables the user to insert a value that is either true or false. These components can be grouped together.

There is a difference between the two types of toggles. A checkbox enables the user to select multiple within the same group. A radio-button only allows one to be selected within the same group.

Checkbox

A checkbox can be used to select something or to indicate a true or false value. Grouped together multiple checkboxes can be selected.

px 

			
				<div class="c-toggle  ">
	<label for="components-toggle-checkbox-3" class="c-toggle__wrapper">
		<input class="c-toggle__checkbox" type="checkbox" id="components-toggle-checkbox-3" name="components-toggle-checkbox-3" />
		<span class="c-toggle__holder"></span>
		<span class="c-toggle__label ">checkbox</span>
	</label>
</div>

Radio

A radio can be used to select something or to indicate a true or false value. Grouped together only one radio button can be selected.

px 

			
				<div class="c-toggle  ">
	<label for="components-toggle-radio-3" class="c-toggle__wrapper">
		<input class="c-toggle__radio" type="radio" id="components-toggle-radio-3" name="components-toggle-radio-1" />
		<span class="c-toggle__holder"></span>
		<span class="c-toggle__label ">radio</span>
	</label>
</div>

With feedback

px 

			
				<div class="c-toggle is-error ">
	<label for="components-toggle-with-feedback-4" class="c-toggle__wrapper">
		<input class="c-toggle__checkbox" type="checkbox" id="components-toggle-with-feedback-4" name="components-toggle-with-feedback-4" />
		<span class="c-toggle__holder"></span>
		<span class="c-toggle__label ">toggle</span>
	</label>
</div>

Documentation

States

  • is-disabled

    Indicate that the checkbox is disabled

  • is-error

    Apply this modifier when the user has inserted a false value

  • is-warning

    Apply this modifier when the user has inserted a value that is neither wrong or right, but should be adjusted

  • is-succes

    Apply this modifier when the user has inserted a value that is correct and you want to congratulate the user on his accomplishment