Choice list

This lists displays a set of choices from which the user can choose one.

Default

px

			
				<ul class="m-choice-list ">
	<li class="m-choice-list__item">
		<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
		<span class="m-choice-list__icon"></span>
		<label class="m-choice-list__label" for="choice-list-default-1">
			Voor mezelf als bediende
		</label>
	</li>
	<li class="m-choice-list__item">
		<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
		<span class="m-choice-list__icon"></span>
		<label class="m-choice-list__label" for="choice-list-default-2">
			Voor mezelf als werkzoekende
		</label>
	</li>
	<li class="m-choice-list__item">
		<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
		<span class="m-choice-list__icon"></span>
		<label class="m-choice-list__label" for="choice-list-default-3">
			Als verantwoordelijke voor een collega
		</label>
	</li>
</ul>
			

		

Documentation

Modifiers

  • m-choice-list__item--last

    The last item in the list of choices has a different behaviour towards the margin at the bottom.