Input Groups

Input with label

<div>
    <label for="name" class="form-label">Name</label>
    <input id="name" name="name" class="form-input mt-1" type="text" placeholder="Jhon Doe">
</div>

Input with hidden label

<div>
    <label for="name" class="sr-only">Name</label>
    <input id="name" name="name" class="form-input" type="text" placeholder="Jhon Doe">
</div>

Input with label and help text

<div>
    <label for="name" class="form-label">Name</label>
    <input id="name" name="name" class="form-input mt-1" type="text" placeholder="Jhon Doe">
    <p class="form-input-help">Your name will be public.</p>
</div>

Input with label and error

<div>
    <label for="name" class="form-label">Name</label>
    <input id="name" name="name" class="form-input mt-1 has-error" type="text" placeholder="Jhon Doe">
    <p class="form-input-error">This field is required.</p>
</div>

Input groups