Toggle group

A component that enables to group toggles like radio and checkboxes together within a container. It allows the render a label representing the entire group as well.

Checkbox

px 

			
				<div class="m-toggle-group js-toggle-group ">
	<ul class="m-toggle-group__list">
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-checkbox-example-3">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-example-3" name="toggle-group-checkbox-example-3" />
						<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>
			<div class="m-toggle-group js-toggle-group m-toggle-group--sub">
				<ul class="m-toggle-group__list">
					<li class="m-toggle-group__item">
						<div class="a-toggle ">
							<label class="a-toggle__container" for="toggle-group-checkbox-subexample-1">
								<div class="a-toggle__wrapper">
									<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-subexample-1" name="toggle-group-checkbox-subexample-1" />
									<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>
						<div class="m-toggle-group js-toggle-group m-toggle-group--sub">
							<ul class="m-toggle-group__list">
								<li class="m-toggle-group__item">
									<div class="a-toggle ">
										<label class="a-toggle__container" for="toggle-group-checkbox-subsubexample-1">
											<div class="a-toggle__wrapper">
												<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-subsubexample-1" name="toggle-group-checkbox-subsubexample-1" />
												<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>
								</li>
							</ul>
						</div>
					</li>
				</ul>
				<div class="m-toggle-group__more">
					<div class="m-toggle-group js-toggle-group ">
						<ul class="m-toggle-group__list">
							<li class="m-toggle-group__item">
								<div class="a-toggle ">
									<label class="a-toggle__container" for="toggle-group-checkbox-subexample-1">
										<div class="a-toggle__wrapper">
											<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-subexample-1" name="toggle-group-checkbox-subexample-1" />
											<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>
								<div class="m-toggle-group js-toggle-group m-toggle-group--sub">
									<ul class="m-toggle-group__list">
										<li class="m-toggle-group__item">
											<div class="a-toggle ">
												<label class="a-toggle__container" for="toggle-group-checkbox-subsubexample-1">
													<div class="a-toggle__wrapper">
														<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-subsubexample-1" name="toggle-group-checkbox-subsubexample-1" />
														<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>
										</li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<button class="m-toggle-group__more-button">
					<span class="m-toggle-group__expand">Meer</span>
					<span class="m-toggle-group__compress">Minder</span>
				</button>
			</div>
		</li>
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-checkbox-example-4">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="checkbox" id="toggle-group-checkbox-example-4" name="toggle-group-checkbox-example-4" />
						<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>
		</li>
	</ul>
</div>

Horizontal

Position the toggle items in a horizontal line instead of underneath each other.

px 

			
				<div class="m-toggle-group js-toggle-group m-toggle-group--horizontal">
	<ul class="m-toggle-group__list">
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-horizontal-example-1">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="checkbox" id="toggle-group-horizontal-example-1" name="toggle-group-horizontal-example" />
						<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>
		</li>
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-horizontal-example-2">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="checkbox" id="toggle-group-horizontal-example-2" name="toggle-group-horizontal-example" />
						<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>
		</li>
	</ul>
</div>

Radio

px 

			
				<div class="m-toggle-group js-toggle-group ">
	<ul class="m-toggle-group__list">
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-radio-example-1">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="radio" id="toggle-group-radio-example-1" name="toggle-group-radio-example" />
						<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>
		</li>
		<li class="m-toggle-group__item">
			<div class="a-toggle ">
				<label class="a-toggle__container" for="toggle-group-radio-example-2">
					<div class="a-toggle__wrapper">
						<input class="a-toggle__input" type="radio" id="toggle-group-radio-example-2" name="toggle-group-radio-example" />
						<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>
		</li>
	</ul>
</div>

Documentation

Modifiers

  • m-toggle-group--horizontal

    Position the toggle items in a horizontal line instead.