Floating labels
Create beautifully simple form labels that float over your input fields.
Floating labels on HummingbirdExample
<div class="form-floating form-field mb-4"><input class="form-control" id="floatingInput" type="email" placeholder=" " /><label class="form-label" for="floatingInput">Email address</label></div>
<div class="form-floating form-field"><input class="form-control" id="floatingPassword" type="password" placeholder=" " /><label class="form-label" for="floatingPassword">Password</label></div>Form Validation
<div class="form-floating form-field mb-4"><input class="form-control is-valid" id="floatingInputValid" type="email" placeholder=" " value="test@example.com" /><label class="form-label" for="floatingInputValid">Valid input</label></div>
<div class="form-floating form-field"><input class="form-control is-invalid" id="floatingInputInvalid" type="email" placeholder=" " value="test@example.com" /><label class="form-label" for="floatingInputInvalid">Invalid input</label></div>Textarea
<div class="form-floating form-field"><textarea class="form-control h-25" id="floatingTextarea2" placeholder=" "></textarea><label class="form-label" for="floatingTextarea2">Comments</label></div>Selects
<div class="form-floating form-field"><select class="form-select" id="floatingSelect" aria-label="Floating label select example">
<option selected="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select><label class="form-label" for="floatingSelect">Works with selects</label></div>
