Inputs
Inputs are necessary for user interaction with the website. Inputs are used to take information from the user, and then save the data to the server, accordingly.
Label Inputs
Label Input has a label present at the top of the input field. They can be customized to show error error-message, and change color accordingly.
<-- Using 'input-group' as outside container, containing label, input and error-
message -->
<div class="input-group">
<label>Username *</label>
<input type="text">
</div>
<div class="input-group err">
<label>Password *</label>
<input type="text">
<div class="error-message">
Wrong Password. Try again.
</div>
</div>
Radio
Radio buttons allow the user to select one option from a set.
<-- Using 'radio' class for the outside div, containing input and label -->
<div class="radio">
<label for="radio-1">
<input id="radio-1" name="radio" type="radio" checked>
Checked
</label>
</div>
<div class="radio">
<label for="radio-2">
<input id="radio-2" name="radio" type="radio">
Unchecked
</label>
</div>
<div class="radio disabled">
<label for="radio-3">
<input id="radio-3" name="radio" type="radio" disabled>
Disabled
</label>
</div>
Checkbox
Checkboxes allow the user to select one or more items from a set.
Checkboxes can be used to turn an option on or off.
If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
<-- Using 'checkbox' class for the outside div, containing input and label -->
<div class="checkbox">
<label for="checkbox-1">
<input id="checkbox-1" name="checkbox" type="checkbox" checked>
Checked
</label>
</div>
<div class="checkbox">
<label for="checkbox-2">
<input id="checkbox-2" name="checkbox" type="checkbox">
Unchecked
</label>
</div>
<div class="checkbox disabled">
<label for="checkbox-3">
<input id="checkbox-3" name="checkbox" type="checkbox" disabled>
Disabled
</label>
</div>