Mono provides a variety of Bootstrap Forms Validation components with a little customization that suits its design standards. For more information, please see the official Bootstrap documentation.
<form>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="validationServer01">Input with success</label>
<input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
<div class="text-success small mt-1">
Looks good!
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationServer02">Input with info</label>
<input type="text" class="form-control border-info" id="validationServer02" placeholder="Last name"
value="Last Name" required>
<div class="text-info small mt-1">
We'll never share your email with anyone else.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationServer02">Input with warning</label>
<input type="text" class="form-control border-warning" id="validationServer02" placeholder="Last name"
value="Last Name" required>
<div class="text-warning small mt-1">
Shucks, check the formatting of that and try again.
</div>
</div>
<div class="col-md-12 mb-3">
<label for="validationServer02">Input with danger</label>
<input type="text" class="form-control border-danger" id="validationServer02" placeholder="Last name"
value="Last Name" required>
<div class="text-daborder-danger small mt-1">
Sorry, that username's taken. Try another?
</div>
</div>
</div>
<button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
<button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>
<form>
<div class="mb-5">
<label for="validationServer01">Left Addon</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="basic-addon1">@</span>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="text-success small mt-1">
Looks good!
</div>
</div>
<div class="mb-5">
<label for="validationServer01">Right Addon</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username"
aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</div>
</div>
<div class="text-warning small mt-1">
Shucks, check the formatting of that and try again.
</div>
</div>
<div class="mb-5">
<label for="validationServer01">Input with danger</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<div class="text-danger small mt-1">
Sorry, that username's taken. Try another?
</div>
</div>
<button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
<button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>
<form>
<div class="form-group row mb-6">
<label for="staticEmail" class="col-sm-4 col-form-label">Input with success</label>
<div class="col-sm-8">
<input type="text" class="form-control border-success" id="validationServer01" placeholder="First name" required>
<div class="text-success small mt-1">
Looks good!
</div>
</div>
</div>
<div class="form-group row mb-6">
<label for="staticEmail" class="col-sm-4 col-form-label">Input with info</label>
<div class="col-sm-8">
<input type="text" class="form-control border-info" id="validationServer01" placeholder="First name" required>
<div class="text-info small mt-1">
Looks good!
</div>
</div>
</div>
<div class="form-group row mb-6">
<label for="staticEmail" class="col-sm-4 col-form-label">Input with warning</label>
<div class="col-sm-8">
<input type="text" class="form-control border-warning" id="validationServer01" placeholder="First name" required>
<div class="text-warning small mt-1">
Looks good!
</div>
</div>
</div>
<div class="form-group row mb-6">
<label for="staticEmail" class="col-sm-4 col-form-label">Input with danger</label>
<div class="col-sm-8">
<input type="text" class="form-control border-danger" id="validationServer01" placeholder="First name" required>
<div class="text-danger small mt-1">
Looks good!
</div>
</div>
</div>
<button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
<button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>
<form>
<div class="mb-5">
<label for="validationServer01">Left Addon</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">go</button>
</div>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</div>
<div class="text-success small mt-1">
Looks good!
</div>
</div>
<div class="mb-5">
<label for="validationServer01">Right Addon</label>
<div class="input-group">
<input type="text" class="form-control" placeholder="settings" aria-label="Recipient's username"
aria-describedby="basic-addon2" placeholder="Search for...">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">go</button>
</div>
</div>
<div class="text-warning small mt-1">
Shucks, check the formatting of that and try again.
</div>
</div>
<div class="mb-5">
<label for="validationServer01">Input with danger</label>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button">go</button>
</div>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<div class="input-group-append">
<button class="btn btn-danger" type="button">go</button>
</div>
</div>
<div class="text-danger small mt-1">
Sorry, that username's taken. Try another?
</div>
</div>
<button class="btn btn-primary btn-pill mr-2" type="submit">Submit</button>
<button class="btn btn-light btn-pill" type="submit">Cancel</button>
</form>
