Form template

Use this as a base for forms.

html

<div class="grid form-example">
	<form class="cs1 ce12 form-example--main-content">
		<div class="form-group">
			<label for="form-example-input-1">Input label</label>
			<input class="input" type="text" id="form-example-input-1" placeholder="Enter something"/>
		</div>
		<div class="form-group">
			<label for="form-example-input-3">Input label</label>
			<select class="select" id="form-example-input-3">
				<option value="1">Option one</option>
				<option value="2">Option two</option>
				<option value="3">Option three</option>
				<option value="4">Option four</option>
			</select>
		</div>
		<div class="form-group">
			<label class="checkbox">
				<input type="checkbox"/>
				<span>Select this option</span>
			</label>
		</div>

		<div class="form-group">
			<label class="radiobutton">
				<input type="radio" name="radio"/>
				<span>Option 1</span>
			</label>
			<label class="radiobutton">
				<input type="radio" name="radio"/>
				<span>Option 2</span>
			</label>
		</div>
	</form>
	<button type="button" class="cs1 ce12 button button-primary">
		Primary action
	</button>
</div>

🏓 Interactive playground

css

.form-example {
	grid-auto-rows: 1fr auto
}
.form-example--main-content {
	align-self: flex-start
}

🏓 Interactive playground