1. Admin
  2. Dashboard
  3. Components
  4. Forms
  5. Basic Elements

Basic Form Elements

Text fields allow the user to input text, select text (cut, copy, paste), and lookup data via auto-completion.

Input Fields

Static Label Examples:

Help text

HTML Code:

<form class="form">
	<div class="form-group">
		<input type="text" class="form-control" id="regular1">
		<label for="regular1">Regular input</label>
	</div>
	<div class="form-group">
		<input type="password" class="form-control" id="password1">
		<label for="password1">Password</label>
	</div>
	<div class="form-group">
		<input type="text" class="form-control" id="placeholder1" placeholder="Placeholder">
		<label for="placeholder1">Placeholder</label>
	</div>
	<div class="form-group">
		<input type="text" class="form-control" id="help1">
		<label for="help1">Input with help text</label>
		<p class="help-block">Help text</p>
	</div>
	<div class="form-group">
		<input type="text" class="form-control" id="tooltip1" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Example input tooltip text here">
		<label for="help1">Input with tooltip</label>
	</div>
	<div class="form-group has-success">
		<input type="text" class="form-control" id="success1">
		<label for="success1">Success</label>
	</div>
	<div class="form-group has-error">
		<input type="text" class="form-control" id="error1">
		<label for="error1">Error</label>
	</div>
</form>

Floating Label Examples:

Help text

HTML Code:

<form class="form" role="form">
	<div class="form-group floating-label">
		<input type="text" class="form-control" id="regular2">
		<label for="regular2">Regular input</label>
	</div>
	<div class="form-group floating-label">
		<input type="password" class="form-control" id="password2">
		<label for="password2">Password</label>
	</div>
	<div class="form-group floating-label">
		<input type="text" class="form-control" id="placeholder2">
		<label for="placeholder2">Placeholder</label>
	</div>
	<div class="form-group floating-label">
		<input type="text" class="form-control" id="help2">
		<label for="help2">Input with help text</label>
		<p class="help-block">Help text</p>
	</div>
	<div class="form-group floating-label">
		<input type="text" class="form-control" id="tooltip2" data-toggle="tooltip" data-placement="bottom" data-trigger="hover" data-original-title="Example input tooltip text here">
		<label for="help2">Input with tooltip</label>
	</div>
	<div class="form-group floating-label has-success">
		<input type="text" class="form-control" id="success2">
		<label for="success2">Success</label>
	</div>
	<div class="form-group floating-label has-error">
		<input type="text" class="form-control" id="error2">
		<label for="error2">Error</label>
	</div>
</form>

Static Control

Examples:

email@example.com

HTML Code:

<div class="form-group">
	<label>Static control</label>
	<p class="form-control-static">email@example.com</p>
</div>

Textareas

Static Label Examples:

HTML Code:

<div class="form-group">
	<textarea name="textarea1" id="textarea1" class="form-control" rows="3" placeholder=""></textarea>
	<label for="textarea1">Textarea</label>
</div>

Floating Label Examples:

HTML Code:

<div class="form-group floating-label">
	<textarea name="textarea2" id="textarea2" class="form-control" rows="3" placeholder=""></textarea>
	<label for="textarea2">Textarea</label>
</div>

Select

Static Label Examples:

HTML Code:

<div class="form-group">
	<select id="select1" name="select1" class="form-control">
		<option value="">&nbsp;</option>
		<option value="val1">Option 1</option>
		<option value="val2">Option 2</option>
		<option value="val3">Option 3</option>
		<option value="val4">Option 4</option>
		<option value="val5">Option 5</option>
		<option value="val6">Option 6</option>
		<option value="val7">Option 7</option>
		<option value="val8">Option 8</option>
		<option value="val9">Option 9</option>
	</select>
	<label for="select1">Select</label>
</div>

Floating Label Examples:

HTML Code:

<div class="form-group floating-label">
	<select id="select2" name="select2" class="form-control">
		<option value="">&nbsp;</option>
		<option value="val1">Option 1</option>
		<option value="val2">Option 2</option>
		<option value="val3">Option 3</option>
		<option value="val4">Option 4</option>
		<option value="val5">Option 5</option>
		<option value="val6">Option 6</option>
		<option value="val7">Option 7</option>
		<option value="val8">Option 8</option>
		<option value="val9">Option 9</option>
	</select>
	<label for="select2">Select</label>
</div>

Switches

Examples:

HTML Code:

<label>
	<input class="switch switch-primary" type="checkbox" />
	<span>Primary switch</span>
</label>

<label>
	<input class="switch switch-success" type="checkbox" />
	<span>Success switch</span>
</label>

<label>
	<input class="switch switch-info" type="checkbox" />
	<span>Info switch</span>
</label>

<label>
	<input class="switch switch-warning" type="checkbox" />
	<span>Warning switch</span>
</label>

<label>
	<input class="switch switch-danger" type="checkbox" />
	<span>Danger switch</span>
</label>

<label>
	<input class="switch switch-primary" type="checkbox" disabled/>
	<span>Disabled switch</span>
</label>

Radio Switch Examples:

HTML Code:

<label>
	<input class="switch switch-primary" type="radio" name="demoradio1" checked/>
	<span>Radio switch</span>
</label>
<label>
	<input class="switch switch-primary" type="radio" name="demoradio1"/>
	<span>Radio switch</span>
</label>
<label>
	<input class="switch switch-primary" type="radio" name="demoradio1"/>
	<span>Radio switch</span>
</label>

Radio Buttons

Examples:

HTML Code:

<div class="col-lg-4">
	<p>
		<label>
			<input class="radio radio-primary" type="radio" name="demoradio" checked/>
			<span>Primary checkbox</span>
		</label>
	</p>
	<p>
		<label>
			<input class="radio radio-success" type="radio" name="demoradio"/>
			<span>Success checkbox</span>
		</label>
	</p>
</div>
<div class="col-lg-4">
	<p>
		<label>
			<input class="radio radio-info" type="radio" name="demoradio"/>
			<span>Info checkbox</span>
		</label>
	</p>
	<p>
		<label>
			<input class="radio radio-warning" type="radio" name="demoradio"/>
			<span>Warning checkbox</span>
		</label>
	</p>
</div>
<div class="col-lg-4">
	<p>
		<label>
			<input class="radio radio-danger" type="radio" name="demoradio"/>
			<span>Danger checkbox</span>
		</label>
	</p>	
</div>
<div class="col-lg-12">
		<label class="checkbox-inline">
			<input class="radio radio-success" type="radio" name="demoinlineradio"/>
			<span>Inline Success checkbox</span>
		</label>
		<label class="checkbox-inline">
			<input class="radio radio-info" type="radio" name="demoinlineradio"/>
			<span>Inline Info checkbox</span>
		</label>
		<label class="checkbox-inline">
			<input class="radio radio-danger" type="radio" name="demoinlineradio"/>
			<span>Inline Danger checkbox</span>
		</label>
</div>

Checkboxes

Examples:

HTML Code:

<div class="col-lg-4">
	<p>
		<label>
			<input class="checkbox checkbox-primary" type="checkbox" />
			<span>Primary checkbox</span>
		</label>
	</p>
	<p>
		<label>
			<input class="checkbox checkbox-success" type="checkbox" />
			<span>Success checkbox</span>
		</label>
	</p>
</div>
<div class="col-lg-4">
	<p>
		<label>
			<input class="checkbox checkbox-info" type="checkbox" />
			<span>Info checkbox</span>
		</label>
	</p>
	<p>
		<label>
			<input class="checkbox checkbox-warning" type="checkbox" />
			<span>Warning checkbox</span>
		</label>
	</p>
</div>
<div class="col-lg-4">
	<p>
		<label>
			<input class="checkbox checkbox-danger" type="checkbox" />
			<span>Danger checkbox</span>
		</label>
	</p>	
</div>
<div class="col-lg-12">
		<label class="checkbox-inline">
			<input class="checkbox checkbox-success" type="checkbox" />
			<span>Inline Success checkbox</span>
		</label>
		<label class="checkbox-inline">
			<input class="checkbox checkbox-info" type="checkbox" />
			<span>Inline Info checkbox</span>
		</label>
		<label class="checkbox-inline">
			<input class="checkbox checkbox-danger" type="checkbox" />
			<span>Inline Danger checkbox</span>
		</label>
</div>