Input

A form element which allows users to input and edit data.

Simple input

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Type something...">

Input with label

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Full name">

Input with hint

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

This is an input hint. 
<input class="Input" type="text" placeholder="Full name">

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

8 / 20 
<input class="Input" type="text" placeholder="Full name">

Input with label and hint

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

This is an input hint. 
<input class="Input" type="text" placeholder="Full name">

Input validation

For a success state, add a valid class.

This is an input hint. 
<input class="Input" type="text" placeholder="Full name">

or for an error state, add an invalid class.

This is an input hint. 
<input class="Input" type="text" placeholder="Full name">

Input with icon

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Full name">

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Full name">

Input with button

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Full name">

Types

A grid consists of up to 12 .GridColumn elements wrapped in a .Grid element.

<input class="Input" type="text" placeholder="Full name">