Forms

  1. Home
  2. Form Basic

Basic Examples

<input type="checkbox" id="basic_checkbox_1" checked />
<label for="basic_checkbox_1">Default</label>

With Material Design Colors

Classes required for this style are .chk-col-red broken down as .chk for checkbox col-[color] to note the check mark is colored by the following color.

With Material Design Colors - Filled In

Similar to above, but inverted so the color fill is declared and it uses a white checkmark. That class that comes first is .filled-in followed by .chk-col-[color].

Basic Radio button Examples

radio buttons are restyled by default as below with a color fill. There is an option for a gap as demonstraed below as opposed to a complete color fill, and we accomplish that by adding a class called .with-gap.

                                        <input name="group1" type="radio" id="radio_1" checked />
                                        <label for="radio_1">Radio - 1</label>

With Material Design Colors

You can use material design colors which examples are .radio-col-pink, .radio-col-cyan class

With Material Design Colors - With Gap
Add to .with-gap class

Switch Button

Switch buttons are very useful when changing the state of a group of information. Turning on edit modes for example. It is not a best practice to use large numbers of them for simple tasks like individual element view state toggles. These require a div tag that will be DOM manipulated by JavaScript. You can disable one by adding the disabled attribute to the input tag.

                                        <div class="switch">
                                        <label>OFF
                                        <input type="checkbox" checked>
                                        <span class="lever"></span>ON</label>
                                        </div>

With Different Colors

RED
PINK
PURPLE
DEEP PURPLE
INDIGO
BLUE
LIGHT BLUE
CYAN
TEAL
GREEN
LIGHT GREEN
LIME
YELLOW
AMBER
ORANGE
DEEP ORANGE
BROWN
GREY
BLUE GREY
BLACK

Default Basic Forms

Almost all you need to know about getting this styling is accomplished by adding the class .form-control to any input element.

Default Horizontal Forms

All bootstrap element classies 
<label>Default Text <span class="help"> e.g. "George deo"</span></label>
<input type="text" class="form-control" value="George deo...">

<label>Input Select</label>
<select class="custom-select col-12" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Select file Change Remove
A block of help text that breaks onto a new line and may extend beyond one line.

Input States

Validation styles for error, warning, and success states on form controls.

Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.
Example help text that remains unchanged.

Sample Basic Forms

Bootstrap Elements

Sample Horizontal form

Use Bootstrap's predefined grid classes for horizontal form

Service Panel