Forms

All form controls automatically receive some global styling. Form elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example:

* Email address

* Password

File input

Example block-level help text here.

Check me out

Submit

Source Code:

<form role="form"> <div class="form-group"> <label for="exampleInputEmail"><span class="required-label">*</span> Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword"><span class="required-label">*</span> Password</label> <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

Sample Contact Form:

* Name

* Email address

Your Message

Submit

Source Code:

<form role="form"> <div class="group"> <div class="form-group half"> <label for="exampleInputName"><span class="required-label">*</span> Name</label> <input type="text" class="form-control" id="exampleInputName" placeholder="Name"> </div> <div class="form-group half"> <label for="exampleInputEmail"><span class="required-label">*</span> Email address</label> <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email"> </div> </div> <div class="form-group"> <label for="exampleInputComment">Your Message</label> <textarea id="exampleInputComment" class="form-control" rows="10" cols="80"></textarea> </div> <button type="submit" class="btn btn-default">Submit</button> </form>

Form States:

Source Code:

<!--Form states--> <div class="form-group has-error m-b-md"> <label class="m-b-sm">Text Input in error state with left appended icon</label> <div class="input-group"> <div class="input-group-addon d-flex"> <i class="ca-gov-icon-person"></i> </div> <input class="form-control" type="text"> </div> <small class="feedback">This is a required field.</small> </div> <div class="form-group has-success m-b-md"> <label class="m-b-sm">Text Input in success state with left appended icon</label> <div class="input-group"> <div class="input-group-addon d-flex"> <i class="ca-gov-icon-person"></i> </div> <input class="form-control" placeholder="Cras Ullamcorper Nibh" type="text"> </div> <small class="feedback">Thank you.</small> </div> <div class="form-group m-b-md"> <label class="m-b-sm">Text Input with left appended icon</label> <div class="input-group"> <div class="input-group-addon d-flex"> <i class="ca-gov-icon-person"></i> </div> <input class="form-control" placeholder="Cras Ullamcorper Nibh" type="text"> </div> </div>

File input:

Source Code:

<!--File Inputs--> <div class="form-group"> <label class="m-b-sm" for="inputGroup1_2">File input</label> <div class="input-group file-attach"> <input id="inputGroup1_2" class="form-control" placeholder="Text in field" type="text"> <div class="input-group-btn"> <button class="btn btn-md btn-primary rounded-0" type="submit">Browse</button> <input type="file"> </div> </div> </div>

Radio buttons and checkboxes:

Source Code:

<!--Radios--> <div class="m-b"> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" name="radInline1_1" checked="" type="radio"> <div class="check-icon-radio"> <i></i> </div> USA </label> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" name="radInline1_1" type="radio"> <div class="check-icon-radio"> <i></i> </div> Canada </label> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" name="radInline1_1" type="radio"> <div class="check-icon-radio"> <i></i> </div> United Kingdom </label> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" name="radInline1_1" type="radio"> <div class="check-icon-radio"> <i></i> </div> Sweden </label> </div> <div class="m-b"> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" name="radGroupBtn1_1" checked="" type="radio"> <span class="btn btn-lg btn-block bg-highlight--checked rounded-0">Italy</span> </label> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" name="radGroupBtn1_1" type="radio"> <span class="btn btn-lg btn-block bg-highlight--checked rounded-0">UK</span> </label> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" name="radGroupBtn1_1" type="radio"> <span class="btn btn-lg btn-block bg-highlight--checked rounded-0">USA</span> </label> </div><!--checkboxes--> <div class="m-b"> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" type="checkbox"> <div class="check-icon-checkbox"> <i class="ca-gov-icon-check-mark"></i> </div> USA </label> <label class="form-check-inline p-l-md m-l-0 m-r-md"> <input class="hidden-up pos-abs" type="checkbox" checked> <div class="check-icon-checkbox"> <i class="ca-gov-icon-check-mark"></i> </div> USA </label> </div> <div class="m-b"> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" checked="" type="checkbox"> <span class="btn btn-md btn-block color-white--checked bg-primary--checked rounded-0">Canada</span> </label> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" type="checkbox"> <span class="btn btn-md btn-block color-white--checked bg-primary--checked rounded-0">UK</span> </label> <label class="check"> <input class="hidden-up pos-abs top-0 left-0" type="checkbox"> <span class="btn btn-md btn-block color-white--checked bg-primary--checked rounded-0">Mexico</span> </label> </div>