Atmos inherits bootstrap 4 form layouts so there is no need of external JS or CSS libraries.
<form><div class="form-row"><div class="form-group col-md-6"><label for="inputEmail4">Email</label><input type="email" class="form-control" id="inputEmail4" placeholder="Email"></div><div class="form-group col-md-6"><label for="inputPassword4">Password</label><input type="password" class="form-control" id="inputPassword4" placeholder="Password"></div></div><div class="form-group"><label for="inputAddress">Address</label><input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"></div><div class="form-group"><label for="inputAddress2">Address 2</label><input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"></div><div class="form-row"><div class="form-group col-md-6"><label for="inputCity">City</label><input type="text" class="form-control" id="inputCity"></div><div class="form-group col-md-4"><label for="inputState">State</label><select id="inputState" class="form-control"><option selected>Choose...</option><option>...</option></select></div><div class="form-group col-md-2"><label for="inputZip">Zip</label><input type="text" class="form-control" id="inputZip"></div></div><div class="form-group"><div class="form-check"><input class="form-check-input" type="checkbox" id="gridCheck"><label class="form-check-label" for="gridCheck">Check me out</label></div></div><button type="submit" class="btn btn-primary">Sign in</button></form>
<form><div class="form-group row"><label for="inputEmail3" class="col-sm-2 col-form-label">Email</label><div class="col-sm-10"><input type="email" class="form-control" id="inputEmail3" placeholder="Email"></div></div><div class="form-group row"><label for="inputPassword3" class="col-sm-2 col-form-label">Password</label><div class="col-sm-10"><input type="password" class="form-control" id="inputPassword3" placeholder="Password"></div></div><fieldset class="form-group"><div class="row"><legend class="col-form-label col-sm-2 pt-0">Radios</legend><div class="col-sm-10"><div class="form-check"><input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked><label class="form-check-label" for="gridRadios1">First radio</label></div><div class="form-check"><input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2"><label class="form-check-label" for="gridRadios2">Second radio</label></div><div class="form-check disabled"><input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled><label class="form-check-label" for="gridRadios3">Third disabled radio</label></div></div></div></fieldset><div class="form-group row"><div class="col-sm-2">Checkbox</div><div class="col-sm-10"><div class="form-check"><input class="form-check-input" type="checkbox" id="gridCheck1"><label class="form-check-label" for="gridCheck1">Example checkbox</label></div></div></div><div class="form-group row"><div class="col-sm-10"><button type="submit" class="btn btn-primary">Sign in</button></div></div></form>
Create Floating label form by adding .floating-label
class to .form-group
and make sure you have label as first child then followed by input.
<form class="" action="#"><div class="form-row"><div class="form-group floating-label col-md-6"><label>Email</label><input type="email" class="form-control" placeholder="Email"></div><div class="form-group floating-label col-md-6"><label>Password</label><input type="password" class="form-control " placeholder="Password"></div></div><div class="form-group floating-label"><label>Address</label><input type="text" class="form-control" placeholder="Address 1234 Main St"></div><div class="form-group floating-label"><label>Address 2</label><input type="text" class="form-control"placeholder="Address 2 Apartment, studio, or floor"></div><div class="form-row"><div class="form-group floating-label col-md-6"><label>City</label><input type="text" class="form-control" placeholder="City"></div><!-- select inputs should have .show-label class by default--><div class="form-group floating-label show-label col-md-4"><label>State</label><select class="form-control"><option selected>Choose...</option><option>Remember</option><option>keeping</option><option>things</option><option>Classy</option><option>is important</option></select></div><div class="form-group floating-label col-md-2"><label>Zip</label><input type="text" class="form-control" placeholder="Zip"></div></div>​<button type="submit" class="btn btn-success">Create Account</button>​</form>
You can find floating-label
styles at floating.scss
Atmos comes with form variation for creating dark inputs, to achieve this just make the add .form-dark
to make all children inputs dark style.
<form class="form-dark" action="#"><div class="form-row"><div class="form-group col-md-6"><label>Email</label><input type="email" class="form-control" placeholder="Email"></div><div class="form-group col-md-6"><label>Password</label><input type="password" class="form-control" placeholder="Password"></div></div><div class="form-group"><label>Address</label><input type="text" class="form-control" placeholder="1234 Main St"></div><div class="form-group"><label>Address 2</label><input type="text" class="form-control" placeholder="Apartment, studio, or floor"></div><div class="form-row"><div class="form-group col-md-6"><label>City</label><input type="text" class="form-control"></div><div class="form-group col-md-4"><label>State</label><select class="form-control"><option selected>Choose...</option><option>Remember</option><option>keeping</option><option>things</option><option>Classy</option><option>is important</option></select></div><div class="form-group col-md-2"><label>Zip</label><input type="text" class="form-control"></div></div>​<button type="submit" class="btn btn-success">Create Account</button>​</form>
form-dark also works for floating labels
To remove borders from the input group we have included input-group-flush
class. following is an sample markup of flushed group borders
<div class="input-group input-group-flush mb-3"><input type="text" class="form-control form-control-prepended" placeholder="Enter Security Pin Code"><div class="input-group-prepend"><div class="input-group-text"><span class=" mdi mdi-lock "></span></div></div></div><div class="input-group input-group-flush mb-3"><input type="number" class="form-control form-control-prepended" placeholder="Enter your vision"><div class="input-group-prepend"><div class="input-group-text"><span class=" mdi mdi-eye "></span></div></div></div>​<div class="input-group input-group-flush mb-3"><input type="mail" class="form-control form-control-appended" placeholder="Enter your Email"><div class="input-group-append"><div class="input-group-text"><span class=" mdi mdi-email "></span></div></div></div>