Form Fields

Inputs, Selects, & Textareas

<label class="label">Enter text</label>

<input type="text" class="input" placeholder="Type Text">

<label class="label">Enter text</label>

<input type="text" class="input input--calendar-icon" placeholder="Type Text">

<select class="select">
	<option value="0">Select One</option>
	<option value="1" class="select__option--red">One</option>
	<!-- etc ... -->
</select>

<select class="select">
	<option value="0">Select One</option>
	<option value="1" class="select__option--disable">One</option>
	<option value="3">Normal</option>
</select>

<label class="label">Send us a message:</label>
<!-- set height by number of rows from 3 - 10 (minimum is set to 2) -->
<textarea class="textarea textarea_rows-4" placeholder="Start typing..."></textarea>

Static Fields

On the occasion some fields in a form might be dynamically set or immutable. In those cases, a static field lets you show users the data within the same layout as the editable fields. Background color is set to 12.5% transparent black by default, but can be overwritten with custom css.

<label class="label">A static field</label>	

<div class="static-value">Static data</div>

Radios & Checkboxes

<div class="selection-controls">
	<!-- Radio buttons arranged vertically (default) -->
	<label class="label selection-controls__set-label">Choose 1</label>

	<!-- this container should hold all the options -->
	<div class="selection-controls__layout">
		<!-- for each option -->
		<div class="selection-controls__pairs">
			<input type="radio" name="example1" id="rad-1" class="selection-controls__input" value="one">
			<label for="rad-1" class="selection-controls__label">Option 1</label>
		</div>
		<!-- end for each option -->
	</div>
</div>

<div class="selection-controls">
	<!-- Checkboxes arranged vertically (default) -->
	<label class="label selection-controls__set-label">Choose All That Apply</label>

	<!-- this container should hold all the options -->
	<div class="selection-controls__layout">
		<!-- for each option -->
		<div class="selection-controls__pairs">
			<input type="checkbox" name="example2" id="chxbx-1" class="selection-controls__input" value="one">
			<label for="chxbx-1" class="selection-controls__label">Option 1</label>
		</div>
		<!-- end for each option -->
	</div>
</div>

<div class="selection-controls">
	<!-- Radio buttons arranged horizontally -->
	<label class="label selection-controls__set-label">Choose 1</label>

	<!-- this container should hold all the options -->
	<div class="selection-controls__layout selection-controls__layout--horizontal">
		<!-- for each option -->
		<div class="selection-controls__pairs">
			<input type="radio" name="example3" id="rad2-1" class="selection-controls__input" value="one">
			<label for="rad2-1" class="selection-controls__label">Option 1</label>
		</div>
		<!-- end for each option -->
	</div>
</div>

<div class="selection-controls">
	<!-- Checkboxes arranged horizontally -->
	<label class="label selection-controls__set-label">Choose All That Apply</label>

	<!-- this container should hold all the options -->
	<div class="selection-controls__layout selection-controls__layout--horizontal">
		<!-- for each option -->
		<div class="selection-controls__pairs">
			<input type="checkbox" name="example4" id="chxbx2-1" class="selection-controls__input" value="one">
			<label for="chxbx2-1" class="selection-controls__label">Option 1</label>
		</div>
		<!-- end for each option -->
	</div>
</div>