Form

Mix and match inputs to create your own Forms.


Block inputs

<div class="Form__group">
	<label for="input1" class="Form__label">Text label</label>
	<input id="input1" type="text" class="Form__input" placeholder="Example placeholder content">
</div>

Inline-block inputs

<div class="Form__inline">
	<div class="Form__inline-grid">
		<div class="Form__inline-row">
			<div class="Form__group">
				<label for="input2" class="Form__label">Half label</label>
				<input id="input2" type="text" class="Form__input" placeholder="Example placeholder content">
			</div>
			<div class="Form__group">
				<label for="input3" class="Form__label">Half label</label>
				<input id="input3" type="text" class="Form__input" placeholder="Example placeholder content">
			</div>
		</div>
	</div>
</div>

Textareas

This caption supports a non-ludicrous amount of text. Learn more.

<div class="Form__group">
	<label for="textarea1" class="Form__label">Text label</label>
	<p class="Form__description">This caption supports a <strong>non-ludicrous</strong> amount of text. <a href="#">Learn more.</a></p>
	<textarea id="textarea1" class="Form__input" placeholder="Example placeholder content"></textarea>
</div>

Simple radios and check boxes

<div class="Form__group g-1_2">
	<label class="Form__label">Radio label</label>
	<label class="Form__radio-check">
		<input type="radio" name="radio1" checked>
		<span class="Form__radio-check-label">Example radio label</span>
	</label>
	<label class="Form__radio-check">
		<input type="radio" name="radio1">
		<span class="Form__radio-check-label">Example radio label</span>
	</label>
</div>
<div class="Form__group g-1_2">
	<label class="Form__label">Checkbox label</label>
	<label class="Form__radio-check">
		<input type="checkbox" name="check1" checked>
		<span class="Form__radio-check-label">Example checkbox label</span>
	</label>
	<label class="Form__radio-check">
		<input type="checkbox" name="check1">
		<span class="Form__radio-check-label">Example checkbox label</span>
	</label>
</div>

Complex radios and checkboxes

<div class="Form__group">
	<label class="Form__label">Radio label</label>
	<label class="Form__radio-check">
		<input type="radio" name="radio1" checked>
		<span class="Form__radio-check-label">Example radio label</span>
		<span class="Form__radio-check-description">Help explain what this choice is</span>
	</label>
	<label class="Form__radio-check">
		<input type="radio" name="radio1" checked>
		<span class="Form__radio-check-label">Example radio label that is really long and probably wraps really awkwardly</span>
		<span class="Form__radio-check-description">Help explain what this choice is in more text than should be necessary to see how text wraps</span>
	</label>
</div>
<div class="Form__group">
	<label class="Form__label">Checkbox label</label>
	<label class="Form__radio-check">
		<input type="checkbox" name="check1" checked>
		<span class="Form__radio-check-label">Example checkbox label that is really long and probably wraps really awkwardly</span>
		<span class="Form__radio-check-description">Help explain what this choice is in more text than should be necessary to see how text wraps</span>
	</label>
	<label class="Form__radio-check">
		<input type="checkbox" name="check1">
		<span class="Form__radio-check-label">Example checkbox label that is really long and probably wraps really awkwardly</span>
		<span class="Form__radio-check-description">Help explain what this choice is in more text than should be necessary to see how text wraps</span>
	</label>
</div>

Select menus

<div class="Form__group Form__group--select">
	<label for="select1" class="Form__label">Select label</label>
	<select id="select1" class="Form__select">
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
		<option>Option 4</option>
		<option>Option 5</option>
	</select>
</div>

Submit and cancel buttons

<div class="Form__group Form__group--actions">
	<input type="submit" class="Button" value="Submit">
	<input type="button" class="Button Button--outline" value="Cancel">
</div>