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>