Form Elements
AHA form controls expand on our Rebooted form styles with classes. Use these classes to opt into their customized displays for a more consistent rendering across browsers and devices. Be sure to use an appropriate type attribute on all inputs (e.g., email for email address or number for numerical information) to take advantage of newer input controls like email verification, number selection, and more.
Form Controls
HTML
<form>
<div class="form-group row required">
<label for="inputtext" class="col-sm-2 col-form-label">Input</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Text Field" id="inputtext" required disabled />
</div>
</div>
<div class="form-group row">
<label for="textarea" class="col-sm-2 col-form-label">Text Area</label>
<div class="col-sm-10">
<textarea class="form-control" id="textarea" placeholder="Text Area" rows="3"></textarea>
</div>
</div>
<div class="form-group row">
<label for="selectField" class="col-sm-2 col-form-label">Dropdown</label>
<div class="col-sm-10">
<select class="form-control" id="selectField">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="checkbox" class="col-sm-2 col-form-label">Checkbox</label>
<div class="col-sm-10 d-flex justify-content-between pt-2">
<div class="form-group form-check">
<input type="checkbox" value="" id="check1" />
<label for="check1">
Default
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check2" checked />
<label for="check2">
Selected
</label>
</div>
<div class="form-group form-check">
<input type="checkbox" value="" id="check3" disabled />
<label for="check3">
Disabled
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkbox" class="col-sm-2 col-form-label">Checkbox bordered</label>
<div class="col-sm-10 d-flex justify-content-between pt-2">
<div class="form-group form-check-bordered">
<input type="checkbox" value="" id="check11" />
<label for="check11">
Default
</label>
</div>
<div class="form-group form-check-bordered">
<input type="checkbox" value="" id="check22" checked />
<label for="check22">
Selected
</label>
</div>
<div class="form-group form-check-bordered">
<input type="checkbox" value="" id="check33" disabled />
<label for="check33">
Disabled
</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkbox" class="col-sm-2 col-form-label">Toggle Switch</label>
<div class="col-sm-10 d-flex justify-content-between pt-2">
<div class="custom-control custom-switch aui-custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1" />
<label class="custom-control-label" for="customSwitch1">Default</label>
</div>
<div class="custom-control custom-switch aui-custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch2" checked />
<label class="custom-control-label" for="customSwitch2">Selected</label>
</div>
<div class="custom-control custom-switch aui-custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2" />
<label class="custom-control-label" for="customSwitch2">Disabled</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="checkbox" class="col-sm-2 col-form-label">Radio Button</label>
<div class="col-sm-10 d-flex justify-content-between pt-2">
<div class="form-group form-radio">
<input type="radio" name="radio" id="radio1" value="option1" />
<label for="radio1">
Default
</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="radio2" value="option2" checked />
<label for="radio2">
Selected
</label>
</div>
<div class="form-group form-radio">
<input type="radio" name="radio" id="radio3" value="option3" disabled />
<label for="radio3">
Disabled
</label>
</div>
</div>
</div>
<div class="form-group row required error">
<label class="col-sm-2 col-form-label" for="inputtext1">Input (type)</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Text Field" id="inputtext1" required />
<span class="error-message">Lorem Ipsum is simply dummy text of the printing and typesetting</span>
</div>
</div>
</form>