Form/Fieldset - "General Form Layout"
This example shows a general form layout. labels to input ratio is 25%/75%. It also comes with a two item or multi-field variant.
These are form-level instructions.
- HTML
<div class="t-content"> <ng-form class="c-generalForm" name="formApi" autocomplete="off"> <div class="c-generalForm-instruction"> These are form-level instructions. </div> <fieldset class="c-fieldset"> <div class="c-fieldset-instruction c-fieldset-instruction--required"> Indicates a required field </div> <div class="c-fieldset-errorContainer is-error" ng-if="$ctrl.formApi.$submitted && $ctrl.formApi.$invalid"> <div class="c-fieldset-errorSummary u-flex u-flexMiddle"> <inv-icon glyph="'exclamation-circle'" class="u-mr"></inv-icon> Please correct the following error(s) </div> <ul class="c-fieldset-errorList"> <li ng-repeat="error in $ctrl.formErrors" ng-bind="::error"></li> </ul> </div> <div class="c-fieldset-item is-required" ng-class="{'is-error': (formApi.FirstName.$touched || formApi.$submitted) && formApi.FirstName.$invalid}"> <label for="firstName">First Name</label> <input id="firstName" type="text" placeholder="First Name" required name="FirstName" ng-model="FirstName"> </div> <div class="c-fieldset-item is-required"> <label for="lastName">Last Name</label> <input id="lastName" type="text" placeholder="Last Name" required name="LastName" ng-model="LastName"> </div> <div class="c-fieldset-item"> <label for="address1">Address Line 1</label> <input id="address1" type="text" placeholder="Address Line 1"> </div> <div class="c-fieldset-item"> <label for="address2">Address Line 2</label> <input id="address2" type="text" placeholder="Address Line 2"> </div> <div class="c-fieldset-item"> <label for="city">City</label> <input id="city" type="text" placeholder="City"> </div> <div class="c-fieldset-items c-fieldset-items--two"> <div class="c-fieldset-item"> <label for="state">State/Region/Province</label> <div class="c-select"> <select id="state" name="State"> <option value="1">Nebraska</option> <option value="2">Iowa</option> </select> </div> </div> <div class="c-fieldset-item is-required"> <label for="Postal">Postal Code</label> <input id="Postal" type="text" placeholder="Zip" name="Postal" ng-model="Postal"> </div> </div> <div class="c-fieldset-item c-dateFields"> <label for="Month1">Birth Date</label> <input id="Month1" type="text" placeholder="MM" name="Month1" ng-model="Month1" class="c-dateFields-month"> <div class="c-dateFields-divider"></div> <input id="Day1" type="text" placeholder="DD" name="Day1" ng-model="Day1" class="c-dateFields-day"> <div class="c-dateFields-divider"></div> <input id="Year1" type="text" placeholder="YYYY" name="Year1" ng-model="Year1" class="c-dateFields-year"> </div> <div class="c-fieldset-item c-fieldset-item--checkbox"> <label>Visibility <inv-tooltip content="'Show or hide the input field'"></inv-tooltip> </label> <div class="c-fieldset-itemInput c-fieldset-items c-fieldset-items--fill"> <div class="c-checkbox"> <input type="checkbox" value="Stuff" id="IsVisible" name="IsVisible" ng-model="IsVisible" ng-init="IsVisible = true"> <label for="IsVisible">Visible</label> </div> <input id="optional" type="text" placeholder="Optionally Visible Field" ng-if="IsVisible"> </div> </div> <div class="c-fieldset-item c-fieldset-item--radioButtons is-required" ng-class="{'is-error': (formApi.Visibility.$touched || formApi.$submitted) && formApi.Visibility.$invalid}"> <label for="privacy">Privacy</label> <input type="hidden" id="privacy" name="Privacy" ng-model="Privacy"> <div class="c-radioButtons"> <div class="c-radioButtons-button"> <input type="radio" required id="privacy_private" value="1" name="_Privacy" ng-model="Privacy" ng-blur="$ctrl.formApi.Privacy.$setTouched()"> <label for="privacy_private">Private</label> </div> <div class="c-radioButtons-button"> <input type="radio" required id="privacy_public" value="2" name="_Privacy" ng-model="Privacy" ng-blur="formApi.Privacy.$setTouched()"> <label for="privacy_public">Public</label> </div> <label class="c-fieldset-itemErrorMessage" ng-if="formApi.Privacy.$invalid" ng-bind="::error" ng-repeat="error in formErrors.Privacy"></label> </div> </div> <div class="c-fieldset-item c-fieldset-item--expanded"> <label for="decription1">Description</label> <textarea id="decription1" placeholder="Add a description here"></textarea> </div> <div class="c-fieldset-item c-fieldset-iconLink"> <label for="food">Favorite Food</label> <inv-advanced-select id="food" dialog-title="'Select Favourite Food'" options="[{name: 'Mexican', dish: 'Taco'}, {name: 'Italian', dish: 'Pasta'}]" primary-label-key="'name'" secondary-label-key="'dish'" value="{name: 'Italian', dish: 'Taco'}" placeholder="'Select Food'"> </inv-advanced-select> <inv-tooltip content="'Extra information about the item'"></inv-tooltip> </div> </fieldset> </ng-form> </div>