Web Style Guide - Patrius
Breadcrumb
web-style-guide
Web Style Guide - Form Elements
Quick Links
Button Radio Button Checkbox Select Menu TextFields Sample FormButton
<button class="sg-std-button" type="button">STANDARD</button>
<button class="sg-std-button small" type="button">STANDARD SMALL</button>
<button class="sg-std-button" type="button" disabled="disabled" >STANDARD DISABLED</button>
<input class="sg-std-button" type="button" value="Input Button" />
<a href="#" class="sg-std-button" />Anchor button</a>
<button class="sg-std-button primary" type="button">PRIMARY</button><br />
<button class="sg-std-button primary small " type="button">PRIMARY</button><br />
<button class="sg-std-button text" type="button">TEXT</button><br />
<button class="sg-std-button text" type="button" disabled="disabled">TEXT DISABLED</button>
<button class="sg-std-button outline" type="button">OUTLINE</button><br />
<button class="sg-std-button outline small " type="button">OUTLINE</button><br />
<button class="sg-std-button outline" type="button" disabled="disabled">OUTLINE DISABLED</button>Radio Button
Error:
Disabled:
<div class="custom-control custom-radio">
<input type="radio" name="custom" class="custom-control-input" id="id1">
<label class="custom-control-label " for="id1" > CustomButton</label>
</div>
<div class="custom-control custom-radio has-error">
<input type="radio" name="custom" class="custom-control-input" for="id2">
<label class="custom-control-label " for="id2" > CustomButton</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="custom" class="custom-control-input" disabled=”disabled” for="id2">
<label class="custom-control-label " for="id2" > CustomButton</label>
</div>
------------------------------------------For JSP------------------------------------------
<span class="custom-control custom-radio col-sm text-left">
<form:radiobutton aria-label="Yes" class="custom-control-input" id="ID" path="path.name" value="true" />
<label class="custom-control-label " for ="ID"><spring:message code="sample.application.label.yes" /></label>
</span>
<span class="custom-control custom-radio col-sm text-left">
<form:radiobutton aria-label="No" class="custom-control-input" id="ID" path="path.name" value="false" />
<label class="custom-control-label " for="ID"><spring:message code="sample.application.label.no" /></label>
</span>
Checkbox
Error:
Disabled:
<div class="custom-control custom-checkbox ">
<input type="checkbox" class="custom-control-input" id="id1"> <label class="custom-control-label" for="id1">Checkbox Label</label>
</div>
<div class="custom-control custom-checkbox has-error">
<input type="checkbox" class="custom-control-input" id="id2"> <label class="custom-control-label" for="id2">Checkbox Label</label>
</div>
<div class="custom-control custom-checkbox ">
<input type="checkbox" class="custom-control-input" id="id1" disabled=""> <label class="custom-control-label" for="id1">Checkbox Label</label>
</div>
Select Menu
Error:
Days is required
Disabled:
<div class="custom-form">
<div class="form-group p-0 col-lg-8 col-md-12">
<label for="duration" class="">Select date label</label>
<select class=" custom-select" id="duration">
<option value="">Select date</option>
<option value="7">within 7 days</option>
<option value="14">within 14 days</option>
<option value="30">within 30 days</option>
</select>
</div>
</div>
Text Fields
Error:
City is required
Disabled:
<div class="custom-form">
<div class="form-group col-md-5 ">
<label for="ico_city" class="medium">
City<sup class="required"></sup>
</label>
<input id="ico_city" name="ico_city" type="text" class="form-control" value="" size="20" maxlength="20">
</div>
</div>
<div class="custom-form">
<div class="form-group col-md-5 has-error ">
<label for="ico_city" class="medium">
City<sup class="required"></sup>
</label>
<input id="ico_city" name="ico_city" type="text" class="form-control" value="" size="20" maxlength="20">
<span id="ico_city.errors" class="error invalid-warning">City is required</span>
</div>
</div>
<div class="custom-form">
<div class="form-group col-md-5 ">
<label for="ico_city" class="medium">
City<sup class="required"></sup>
</label>
<input id="ico_city" name="ico_city" type="text" class="form-control" value="" size="20" maxlength="20" disabled="disabled">
</div>
</div>
Sample Form
<div class="custom-form">
<form id="id" action="" method="POST">
<div class="form-row">
<div class="form-group col-lg-3 col-md-12 ">
<label for="ico_fst_nm" class="medium">
Input Label<sup class="required"></sup>
</label>
<input id="ico_fst_nm" name="ico_fst_nm" type="text" class="form-control" value="" size="16" maxlength="15">
</div>
<div class="form-group col-lg-3 col-md-12 ">
<label for="ico_last_nm" class="medium">
Input Label<sup class="required"></sup>
</label>
<input id="ico_last_nm" name="ico_last_nm" type="text" class="form-control" value="" size="36" maxlength="35">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-3 col-md-12 ">
<label for="ico_address1" class="medium">
Input Label<sup class="required"></sup>
</label>
<input id="ico_address1" name="ico_address1" type="text" class="form-control" value="" size="36" maxlength="35">
</div>
</div>
<div class="form-row ">
<div class="form-group col-lg-3 col-md-12 ">
<label for="tnAttending">
Select Labe<sup class="required"></sup>
</label>
<select id="TOTAL" name="totalAttendee" class="custom-select">
<option value="0">Please Select...</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="medium">Input Label<sup class="required"></sup></label>
<div class="custom-control custom-radio ">
<input type="radio" name="radioButton" class="custom-control-input" id="radio1">
<label class="custom-control-label" for="radio1" >Radio Button Label</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioButton" class="custom-control-input" id="radio2">
<label class="custom-control-label" for="radio2" >Radio Button Label</label>
</div>
<div class="custom-control custom-radio ">
<input type="radio" name="radioButton" class="custom-control-input" id="radio3">
<label class="custom-control-label" for="radio3" >Radio Button Label</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<div class="custom-control custom-checkbox ">
<input id="authorizeSalesContact1" name="authorize" class="custom-control-input" type="checkbox" value="true">
<label class="custom-control-label " for="authorizeSalesContact1">Checkbox Label</label>
</div>
<div class="custom-control custom-checkbox">
<input id="authorizeSalesContact2" name="authorize" class="custom-control-input" type="checkbox" value="true">
<label class="custom-control-label " for="authorizeSalesContact2">Checkbox Label </label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group ">
<div class="custom-control custom-checkbox">
<input id="authorizeSalesContact" name="authorize" class="custom-control-input" type="checkbox" value="true"><input type="hidden" name="_authorize" value="on">
<label class="custom-control-label custom-consent-label" for="authorizeSalesContact">For marketing appointments The Centers for Medicare & Medicaid Services, For marketing appointments The Centers for Medicare & Medicaid Services</label>
<br><br>
</div>
</div>
</div>
<input type="submit" class="sg-std-button" id="submitRegistration" value="Submit">
<div class="clearfix"> </div>
</form>
</div>
Third Party Website Disclaimer
You are about to leave the Blue Cross and Blue Shield of Alabama Medicare products website to visit one of our social media sites. Although content of our social media sites is maintained by Blue Cross, Blue Cross does not control the security and/or privacy practices of these external social media sites. Therefore, Blue Cross advises users of these sites against sharing any personal health information or any other information the user would otherwise not feel comfortable being made public. Blue Cross shall not be liable for privacy breaches, security incidents or similar events due to the use of social media sites.
To continue, click "Accept." If you want to stay on the Blue Cross and Blue Shield of Alabama Medicare website, click "Cancel."