sleek-dashboard/src/input-group.html

Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com

---
layout: default
title: "Input Group - Sleek Admin Dashboard Template"


parent: "forms"
sub_parent: "forms"
activePage: "input-group"
plugins: []
---

							<div class="row">
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Basic Example</h2>
										</div>
										<div class="card-body">
											<form>
												<div class="form-group">
													<label for="validationDefaultUsername">Left addon</label>
													<div class="input-group">
														<div class="input-group-prepend">
															<span class="input-group-text" id="inputGroupPrepend2">@</span>
														</div>
														<input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2"
														required>
													</div>
												</div>
												<div class="form-group">
													<label for="validationDefaultUsername2">Left addon</label>
													<div class="input-group">
														<input type="text" class="form-control" id="validationDefaultUsername2" placeholder="Username" aria-describedby="inputGroupPrepend2"
														required>
														<div class="input-group-append">
															<span class="input-group-text" id="inputGroupAppend">@ example.com</span>
														</div>
													</div>
												</div>
												<div class="form-group">
													<label for="validationDefaultUsername2">Left and Right addon</label>
													<div class="input-group">
														<div class="input-group-prepend">
															<span class="input-group-text">$</span>
														</div>
														<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
														<div class="input-group-append">
															<span class="input-group-text">.00</span>
														</div>
													</div>
												</div>
												<div class="form-group">
													<label for="validationDefaultUsername2">Joint addons</label>
													<div class="input-group mb-3">
														<div class="input-group-prepend">
															<span class="input-group-text">$</span>
															<span class="input-group-text">0.00</span>
														</div>
														<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
													</div>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Checkboxes and Radio Addons</h2>
										</div>
										<div class="card-body">
											<form >
												<div class="row">
													<div class="col-md-6">
														<label class="text-dark font-weight-medium" for="">Left checkbox addon</label>
														<div class="input-group">
															<div class="input-group-prepend">
																<div class="input-group-text">
																	<label class="control control-checkbox d-inline-block pl-3">
																		<input type="checkbox" name="checkbox1" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
															<input type="text" class="form-control" aria-label="Text input with checkbox">
														</div>
													</div>
													<div class="col-md-6">
														<label class="text-dark font-weight-medium" for="">Left Radio addon</label>
														<div class="input-group">
															<div class="input-group-prepend">
																<div class="input-group-text">
																	<label class="control control-radio d-inline-block pl-3">
																		<input type="radio" name="radio1" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
															<input type="text" class="form-control" aria-label="Text input with radio button">
														</div>
													</div>
													<div class="col-md-6">
														<label class="text-dark font-weight-medium" for="">Right checkbox addon</label>
														<div class="input-group">
															<input type="text" class="form-control" aria-label="Text input with checkbox">
															<div class="input-group-append">
																<div class="input-group-text">
																	<label class="control control-checkbox d-inline-block pl-3">
																		<input type="checkbox" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
														</div>
													</div>
													<div class="col-md-6">
														<label class="text-dark font-weight-medium" for="">Right Radio addon</label>
														<div class="input-group">
															<input type="text" class="form-control" aria-label="Text input with radio button">
															<div class="input-group-append">
																<div class="input-group-text">
																	<label class="control control-radio d-inline-block pl-3">
																		<input type="radio" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
														</div>
													</div>
													<div class="col-12">
														<label class="text-dark font-weight-medium" for="">Left and Right checkbox addon</label>
														<div class="input-group">
															<div class="input-group-prepend">
																<div class="input-group-text">
																	<label class="control control-checkbox d-inline-block pl-3">
																		<input type="checkbox" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
															<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
															<div class="input-group-append">
																<div class="input-group-text">
																	<label class="control control-checkbox d-inline-block pl-3">
																		<input type="checkbox" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
														</div>
													</div>
													<div class="col-12">
														<label class="text-dark font-weight-medium" for="">Left and Right radio addon</label>
														<div class="input-group">
															<div class="input-group-prepend">
																<div class="input-group-text">
																	<label class="control control-radio d-inline-block pl-3">
																		<input type="radio" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
															<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
															<div class="input-group-append">
																<div class="input-group-text">
																	<label class="control control-radio d-inline-block pl-3">
																		<input type="radio" />
																		<div class="control-indicator"></div>
																	</label>
																</div>
															</div>
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Buttons with Dropdowns</h2>
										</div>
										<div class="card-body">
											<form >
												<label class="text-dark font-weight-medium" for="">Left addon</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
														<div class="dropdown-menu">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
													<input type="text" class="form-control" aria-label="Text input with dropdown button">
												</div>

												<label class="text-dark font-weight-medium" for="">Left addon</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
														<div class="dropdown-menu">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
													<input type="text" class="form-control" aria-label="Text input with dropdown button">
												</div>
												<label class="text-dark font-weight-medium" for="">Right addon</label>
												<div class="input-group">
													<input type="text" class="form-control" aria-label="Text input with dropdown button">
													<div class="input-group-append position-relative">
														<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static">Action</button>
														<div class="dropdown-menu">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
												</div>
											</form>
										</div>
									</div>

								</div>
								<div class="col-lg-6">

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Iconic Input Groups </h2>
										</div>
										<div class="card-body">
											<form>
												<label class="text-dark font-weight-medium" for="">Left icon</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="mdi mdi-account"></i>
														</span>
													</div>
													<input type="text" class="form-control" placeholder="Username" aria-label="Username">
												</div>
												<label class="text-dark font-weight-medium" for="">Right icon</label>
												<div class="input-group">
													<input type="text" class="form-control" placeholder="Right icon" aria-label="Right icon">
													<div class="input-group-append">
														<span class="input-group-text">
															<i class="mdi mdi-settings"></i>
														</span>
													</div>
												</div>
												<label class="text-dark font-weight-medium" for="">Icon with Text</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="mdi mdi-folder mr-2"></i> example.com </span>
													</div>
													<input type="text" class="form-control" placeholder="" aria-label="">
												</div>
												<label class="text-dark font-weight-medium" for="">Left & Right icon</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="mdi mdi-star"></i>
														</span>
													</div>
													<input type="text" class="form-control" placeholder="" aria-label="">
													<div class="input-group-append">
														<span class="input-group-text">
															<i class="mdi mdi-map-marker"></i>
														</span>
													</div>
												</div>
												<label class="text-dark font-weight-medium" for="">Joint icon</label>
												<div class="input-group">
													<div class="input-group-prepend">
														<span class="input-group-text">
															<i class="mdi mdi-email"></i>
														</span>
														<span class="input-group-text">0.00 </span>
													</div>
													<input type="text" class="form-control" placeholder="" aria-label="">
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Button Addon</h2>
										</div>
										<div class="card-body">
											<label class="text-dark font-weight-medium" for="">Left addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text"> Go! </span>
												</div>
												<input type="text" class="form-control" placeholder="Search for..." aria-label="">
											</div>
											<label class="text-dark font-weight-medium" for="">Left addon</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text bg-primary"> Go! </span>
												</div>
												<input type="text" class="form-control" placeholder="Search for..." aria-label="">
											</div>
											<label class="text-dark font-weight-medium" for="">Right icon</label>
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search for..." aria-label="search">
												<div class="input-group-append">
													<span class="input-group-text bg-primary"> GO! </span>
												</div>
											</div>
										</div>
									</div>
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Iconic Sizing</h2>
										</div>
										<div class="card-body">
											<label class="text-dark font-weight-medium" for="">Small Size</label>
											<div class="input-group input-group-sm">
												<div class="input-group-prepend">
													<span class="input-group-text" id="inputGroup-sizing-sm">
														<i class="mdi mdi-account"></i>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Small" placeholder="Small Size" aria-describedby="inputGroup-sizing-sm">
											</div>

											<label class="text-dark font-weight-medium" for="">Default Size</label>
											<div class="input-group">
												<div class="input-group-prepend">
													<span class="input-group-text" id="inputGroup-sizing-default">
														<i class="mdi mdi-account"></i>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Default" placeholder="Default size" aria-describedby="inputGroup-sizing-default">
											</div>

											<label class="text-dark font-weight-medium" for="">Large Size</label>
											<div class="input-group input-group-lg">
												<div class="input-group-prepend">
													<span class="input-group-text" id="inputGroup-sizing-lg">
														<i class="mdi mdi-account"></i>
													</span>
												</div>
												<input type="text" class="form-control" aria-label="Large" placeholder="Large size" aria-describedby="inputGroup-sizing-sm">
											</div>
										</div>
									</div>
								</div>
							</div>