Forms & Inputs

Legend

Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms. More details about forms and inputs you can find here.

Input fields

Text fields allow user input.

 






source code:

<label for="first_name">First Name:</label>
<input placeholder="Placeholder" id="first_name" type="text" class="validate"/>

<label for="last_name">Last Name</label>
<input id="last_name" type="text" class="validate"/>

<label for="disabled">Disabled:</label>
<input disabled value="I am not editable" id="disabled" type="text" class="validate"/>

<label for="password">Password:</label>
<input id="password" type="password" class="validate"/>

<label for="email">Email:</label>
<input id="email" type="email" class="validate"/>

 

Textarea

Textareas allow larger expandable user input. The border should light up simply and clearly indicating which field the user is currently editing.

Textareas will auto resize to the text inside.

 


source code:

<label for="textarea">Text Area</label>
<textarea id="textarea"></textarea>

 

Select

Select allows user input through specified options.

 

 

source code:

<label for="select_element">Select Element:</label>

<select name="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select>

 

Radio Buttons

Radio Buttons are used when the user must make only one selection out of a group of items

Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.

 

Default



source code:

<input name="radio" type="radio" value="radio-1" id="radio-1"/> <label for="radio-1">Radio 1</label>
<input name="radio" type="radio" value="radio-2" id="radio-2"/> <label for="radio-2">Radio 2</label>
<input name="radio" type="radio" value="radio-3" id="radio-3"/> <label for="radio-3">Radio 3</label>

 

With Gap



source code:

<input class="with-gap" name="radio-gap" type="radio" value="radio-gap-1" id="radio-gap-1"/> <label for="radio-gap-1">Radio Gap 1</label>
<input class="with-gap" name="radio-gap" type="radio" value="radio-gap-2" id="radio-gap-2"/> <label for="radio-gap-2">Radio Gap 2</label>
<input class="with-gap" name="radio-gap" type="radio" value="radio-gap-3" id="radio-gap-3"/> <label for="radio-gap-3">Radio Gap 3</label>

 

Disabled



source code:

<input name="radio-disabled" type="radio" value="radio-disabled-1" id="radio-disabled-1" disabled="disabled"/> <label for="radio-disabled-1">Radio Disabled 1</label>
<input name="radio-disabled" type="radio" value="radio-disabled-2" id="radio-disabled-2" disabled="disabled"/> <label for="radio-disabled-2">Radio Disabled 2</label>
<input name="radio-disabled" type="radio" value="radio-disabled-3" id="radio-disabled-3" disabled="disabled"/> <label for="radio-disabled-3">Radio Disabled 3</label>

 

Checkboxes

Use checkboxes when looking for yes or no answers. The for attribute is necessary to bind our custom checkbox with the input. Add the input’s id as the value of the for attribute of the label.

 

Default



source code:

<input name="checkboxes" type="checkbox" value="check-1" id="check-1"/> <label for="check-1">Check 1</label>
<input name="checkboxes" type="checkbox" value="check-2" id="check-2"/> <label for="check-2">Check 2</label>
<input name="checkboxes" type="checkbox" value="check-3" id="check-3"/> <label for="check-3">Check 3</label>

 

Checked



source code:

<input name="checkboxes" type="checkbox" value="check-checked-1" id="check-checked-1" checked="checked"/> <label for="check-checked-1">Check Checked 1</label>
<input name="checkboxes" type="checkbox" value="check-checked-2" id="check-checked-2" checked="checked"/> <label for="check-checked-2">Check Checked 2</label>
<input name="checkboxes" type="checkbox" value="check-checked-3" id="check-checked-3" checked="checked"/> <label for="check-checked-3">Check Checked 3</label>

 

Upload File:

If you want to style an input button with a path input we provide this structure.

 

File

source code:

<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>