Switch

<div class="m-stack" data-akkurat>
	<div class="m-switch">
		<label class="m-label" for="switch1">Disabled</label>
		<input type="checkbox" id="switch1" disabled />
	</div>
	<div class="m-switch">
		<label class="m-label" for="switch2">Basic</label>
		<input type="checkbox" id="switch2" />
	</div>
	<div class="m-switch">
		<label class="m-label" for="switch3">Option 1</label>
		<input type="checkbox" id="switch3" />
		<label class="m-label" for="switch3">Option 2</label>
	</div>
	<div class="m-switch">
		<label class="m-label" for="switch4">Checked</label>
		<input type="checkbox" id="switch4" checked />
	</div>
	<div class="m-switch is-size-s">
		<label class="m-label" for="switch5">Small</label>
		<input type="checkbox" id="switch5" />
	</div>
</div>

Checkbox

<div class="m-stack" data-akkurat>
	<div class="m-checkbox">
		<input type="checkbox" id="cb1" disabled checked />
		<label class="m-label" for="cb1">Checkbox 1</label>
	</div>
	<div class="m-checkbox">
		<input type="checkbox" id="cb2" disabled />
		<label class="m-label" for="cb2">Checkbox 2</label>
	</div>
	<div class="m-checkbox">
		<input type="checkbox" checked id="cb3" />
		<label class="m-label" for="cb3">Checkbox 3</label>
	</div>
	<div class="m-checkbox">
		<input type="checkbox" id="cb4" />
		<label class="m-label" for="cb4">Checkbox 4</label>
	</div>
</div>

Radio

<div class="m-stack" data-akkurat>
	<h4 class="m-heading is-size-m">Horizontal</h4>
	<div class="m-radio-group">
		<div class="m-radio">
			<input name="radiogroup1" type="radio" id="radio1" checked disabled />
			<label class="m-label" for="radio1">Radio 1</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup1" type="radio" id="radio2" disabled />
			<label class="m-label" for="radio2">Radio 2</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup1" type="radio" id="radio3" />
			<label class="m-label" for="radio3">Radio 3</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup1" type="radio" id="radio4" />
			<label class="m-label" for="radio4">Radio 4</label>
		</div>
	</div>

	<h4 class="m-heading is-size-m">Vertical</h4>
	<div class="m-radio-group is-vertical">
		<div class="m-radio">
			<input name="radiogroup2" type="radio" id="radio5" disabled />
			<label class="m-label" for="radio5">Radio 1</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup2" type="radio" id="radio6" disabled />
			<label class="m-label" for="radio6">Radio 2</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup2" type="radio" id="radio7" checked />
			<label class="m-label" for="radio7">Radio 3</label>
		</div>
		<div class="m-radio">
			<input name="radiogroup2" type="radio" id="radio8" />
			<label class="m-label" for="radio8">Radio 4</label>
		</div>
	</div>
</div>

Large Inputs

<div class="m-form-control" data-akkurat>
	<label class="m-label" for="exampleLargeInput">Large</label>
	<input class="m-input is-size-l" type="text" id="exampleLargeInput" />
</div>