Floating label CSS adalah teknik dalam desain antarmuka pengguna (UI) yang memungkinkan label input untuk "mengapung" di atas input field ketika pengguna mulai mengetik atau ketika input field dalam keadaan fokus. Teknik ini membuat form lebih bersih dan modern, serta meningkatkan pengalaman pengguna dengan memberi petunjuk yang lebih jelas tentang apa yang harus diisi di setiap input field.
/* Floating Labels CSS */
.floating-label {
position: relative;
margin-bottom: 1.5rem;
}
.floating-label input,
.floating-label select {
border: 1px solid #ced4da;
border-radius: 0.25rem;
padding: 0.60rem 0.75rem 0.60rem 0.75rem;
/* font-size: 1rem; */
outline: none;
width: 100%;
transition: border-color 0.2s, box-shadow 0.2s;
}
.floating-label input:focus,
.floating-label select:focus {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.floating-label label {
position: absolute;
top: 0.60rem;
left: 0.75rem;
padding: 0 0.25rem;
background: white;
/* font-size: 1rem; */
color: #495057;
transition: transform 0.2s, color 0.2s;
transform-origin: left top;
}
.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label,
.floating-label select:focus + label,
.floating-label select:not([value=""]) + label {
transform: translateY(-1.5rem) scale(0.75);
color: #565c64;
}
<div class="row">
<div class="col-md-6">
<div class="floating-label">
<input type="text" class="form-control" id="create-name" name="name" placeholder=" ">
<label for="create-name">Name</label>
<div class="invalid-feedback" id="error-create-name"></div>
</div>
<div class="floating-label">
<input type="email" class="form-control" id="create-email" name="email" placeholder=" ">
<label for="create-email">Email</label>
<div class="invalid-feedback" id="error-create-email"></div>
</div>
<div class="floating-label">
<input type="password" class="form-control" id="create-password" name="password" placeholder=" ">
<label for="create-password">Password</label>
<div class="invalid-feedback" id="error-create-password"></div>
</div>
<div class="floating-label">
<input type="password" class="form-control" id="create-confirmPassword" name="confirmPassword" placeholder=" ">
<label for="create-confirmPassword">Confirm Password</label>
<div class="invalid-feedback" id="error-create-confirmPassword"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-nik" name="nik" placeholder=" ">
<label for="create-nik">NIK</label>
<div class="invalid-feedback" id="error-create-nik"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-npwp" name="npwp" placeholder=" ">
<label for="create-npwp">NPWP</label>
<div class="invalid-feedback" id="error-create-npwp"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-address" name="address" placeholder=" ">
<label for="create-address">Address</label>
<div class="invalid-feedback" id="error-create-address"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-phone" name="phone" placeholder=" ">
<label for="create-phone">Phone</label>
<div class="invalid-feedback" id="error-create-phone"></div>
</div>
</div>
<div class="col-md-6">
<div class="floating-label">
<input type="text" class="form-control" id="create-latitude" name="latitude" placeholder=" ">
<label for="create-latitude">Latitude</label>
<div class="invalid-feedback" id="error-create-latitude"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-longitude" name="longitude" placeholder=" ">
<label for="create-longitude">Longitude</label>
<div class="invalid-feedback" id="error-create-longitude"></div>
</div>
<div class="floating-label">
<select class="form-select" id="create-status" name="status">
<option value="active">Active</option>
<option value="pending">Pending</option>
<option value="terminated">Terminated</option>
<option value="canceled">Canceled</option>
</select>
<label for="create-status">Status</label>
<div class="invalid-feedback" id="error-create-status"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-pppUser" name="pppUser" placeholder=" ">
<label for="create-pppUser">PPP User</label>
<div class="invalid-feedback" id="error-create-pppUser"></div>
</div>
<div class="floating-label">
<input type="text" class="form-control" id="create-pppSecret" name="pppSecret" placeholder=" ">
<label for="create-pppSecret">PPP Secret</label>
<div class="invalid-feedback" id="error-create-pppSecret"></div>
</div>
<div class="floating-label">
<select class="form-select" id="create-paymentType" name="paymentType">
<option value="prepaid">Prepaid</option>
<option value="postpaid">Postpaid</option>
</select>
<label for="create-paymentType">Payment Type</label>
<div class="invalid-feedback" id="error-create-paymentType"></div>
</div>
<div class="floating-label">
<select class="form-select" id="create-package" name="packageId">
<!-- Options will be populated dynamically -->
</select>
<label for="create-package">Package</label>
<div class="invalid-feedback" id="error-create-packageId"></div>
</div>
</div>
</div>
