sleek-dashboard/src/basic-input.html

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

---
layout: default
title: "Inputs - Sleek Admin Dashboard Template"


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

							<div class="row">
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Basic Form Controls</h2>
										</div>
										<div class="card-body">
											<form>
												<div class="form-group">
													<label for="exampleFormControlInput1">Email address</label>
													<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="Enter Email">
													<span class="mt-2 d-block">We'll never share your email with anyone else.</span>
												</div>
												<div class="form-group">
													<label for="exampleFormControlPassword">Password</label>
													<input type="password" class="form-control" id="exampleFormControlPassword" placeholder="Password">
												</div>
												<div class="form-group">
													<label for="exampleFormControlSelect12">Example select</label>
													<select class="form-control" id="exampleFormControlSelect12">
														<option>1</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
													</select>
												</div>
												<div class="form-group">
													<label for="exampleFormControlSelect2">Example multiple select</label>
													<select multiple class="form-control" id="exampleFormControlSelect2">
														<option>1</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
													</select>
												</div>
												<div class="form-group">
													<label for="exampleFormControlTextarea1">Example textarea</label>
													<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
												</div>
												<div class="form-group">
													<label for="exampleFormControlFile1">Example file input</label>
													<input type="file" class="form-control-file" id="exampleFormControlFile1">
												</div>
												<div class="form-footer pt-4 pt-5 mt-4 border-top">
													<button type="submit" class="btn btn-primary btn-default">Submit</button>
													<button type="submit" class="btn btn-secondary btn-default">Cancel</button>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Form pill</h2>
										</div>
										<div class="card-body">
											<form class="form-pill">
												<div class="form-group">
													<label for="exampleFormControlInput3">Email address</label>
													<input type="email" class="form-control" id="exampleFormControlInput3" placeholder="Enter Email">
												</div>
												<div class="form-group">
													<label for="exampleFormControlPassword3">Password</label>
													<input type="password" class="form-control" id="exampleFormControlPassword3" placeholder="Password">
												</div>
												<div class="form-group">
													<label for="exampleFormControlSelect3">Example select</label>
													<select class="form-control" id="exampleFormControlSelect3">
														<option>1</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
													</select>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Input Sizing</h2>
										</div>
										<div class="card-body">
											<form >
												<div class="form-group">
													<label for="">Large input</label>
													<input type="text" class="form-control input-lg" placeholder="Large input">
												</div>
												<div class="form-group">
													<label for="">Default input</label>
													<input type="text" class="form-control" placeholder="Default input">
												</div>
												<div class="form-group">
													<label for="">Small input</label>
													<input type="text" class="form-control input-sm" placeholder="Small input">
												</div>
											</form>
										</div>
									</div>
								</div>
								<div class="col-lg-6">
									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Horizontal Form</h2>
										</div>
										<div class="card-body">
											<form class="horizontal-form">
												<div class="form-group row">
													<div class="col-12 col-md-3 text-right">
														<label for="">Email address</label>
													</div>
													<div class="col-12 col-md-9">
														<input type="text" class="form-control" placeholder="Enter Email">
													</div>
												</div>
												<div class="form-group row">
													<div class="col-12 col-md-3 text-right">
														<label for="">Password</label>
													</div>
													<div class="col-12 col-md-9">
														<input type="text" class="form-control" placeholder="Password">
													</div>
												</div>
												<div class="form-group row">
													<div class="col-12 col-md-3 text-right">
														<label for="Radios">Radios</label>
													</div>
													<div class="col-12 col-md-9">
														<label class="control control-radio">Option one is this and that—be sure to include why it's great
															<input type="radio" name="radio1" checked="checked" />
															<div class="control-indicator"></div>
														</label>
														<label class="control control-radio">Option two can be something else and selecting it will deselect
															<input type="radio" name="radio1" />
															<div class="control-indicator"></div>
														</label>

														<label class="control control-radio">Option three is disabled
															<input type="radio" name="radio1" disabled="disabled" />
															<div class="control-indicator"></div>
														</label>
													</div>
												</div>
												<div class="form-group row">
													<div class="col-12 col-md-3 text-right">
														<label for="checkbox">Checkbox</label>
													</div>
													<div class="col-12 col-md-9">
														<label class="control control-checkbox">Check me out
															<input type="checkbox" name="checkbox1" />
															<div class="control-indicator"></div>
														</label>
													</div>
												</div>
												<div class="form-footer pt-5 border-top">
													<button type="submit" class="btn btn-primary btn-default">Sign in</button>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Disabled Form</h2>
										</div>
										<div class="card-body">
											<form >
												<div class="form-group">
													<label for="">Disabled input</label>
													<input type="text" class="form-control" placeholder="Desabled input" disabled>
												</div>
												<div class="form-group">
													<label for="exampleFormControlSelect1">Disabled select menu</label>
													<select class="form-control" id="exampleFormControlSelect1" disabled>
														<option>Desabled select</option>
														<option>2</option>
														<option>3</option>
														<option>4</option>
														<option>5</option>
													</select>
												</div>
												<div class="form-group ">
													<div class="form-check ">
														<input id="checkbox-5" class="checkbox-custom form-check-input" name="checkbox-5" type="checkbox" disabled>
														<label for="checkbox-5" class="checkbox-custom-label form-check-label disable-checked">Can't check this</label>
													</div>
												</div>
												<div class="form-footer pt-5 border-top">
													<button type="submit" class="btn btn-primary btn-default disabled">Submit</button>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Custom Styles</h2>
										</div>
										<div class="card-body">
											<form >
												<div class="row">
													<div class="col-sm-6">
														<div class="form-group">
															<label for="fname">First name</label>
															<input type="text" class="form-control" placeholder="John">
														</div>
													</div>
													<div class="col-sm-6">
														<div class="form-group">
															<label for="lname">Last name</label>
															<input type="text" class="form-control" placeholder="Smith">
														</div>
													</div>
													<div class="col-sm-6">
														<div class="form-group">
															<label for="city">City</label>
															<input type="text" class="form-control" placeholder="City Name">
														</div>
													</div>
													<div class="col-sm-6">
														<div class="row">
															<div class="col-6">
																<div class="form-group">
																	<label for="State">State</label>
																	<input type="text" class="form-control" placeholder="State">
																</div>
															</div>
															<div class="col-6">
																<div class="form-group">
																	<label for="Zip">Zip</label>
																	<input type="text" class="form-control" placeholder="Zip">
																</div>
															</div>
														</div>
													</div>
												</div>
												<div class="form-footer pt-5 border-top">
													<button type="submit" class="btn btn-primary btn-default">Submit form</button>
												</div>
											</form>
										</div>
									</div>

									<div class="card card-default">
										<div class="card-header card-header-border-bottom">
											<h2>Inline Form</h2>
										</div>
										<div class="card-body">
											<form class="form-inline">
												<label class="sr-only" for="inlineFormInputName2">Name</label>
												<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
												<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
												<div class="input-group mb-2 mr-sm-2">
													<div class="input-group-prepend">
														<div class="input-group-text">@</div>
													</div>
													<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
												</div>
												<button type="submit" class="btn btn-primary mb-2">Submit</button>
											</form>
											<div class="pt-5 mt-4 border-top w-100">
												<form>
													<p class="text-primary mb-4">Custom form controls and selects are also supported.</p>
													Preference
													<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
														<option selected>Choose...</option>
														<option value="1">One</option>
														<option value="2">Two</option>
														<option value="3">Three</option>
													</select>
													<label class="control control-checkbox d-inline-block">Remember my preference
														<input type="checkbox" name="checkbox1" />
														<div class="control-indicator"></div>
													</label>
													<button type="submit" class="btn btn-primary ml-2">Submit</button>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>