SnippetUI
← Back to snippets

Input Floating Label

Bidang masukan modern dengan placeholder yang muncul dengan mulus sebagai label saat difokuskan.

HTMLCSS

Pratinjau

Kasus penggunaan dan fitur

Label mengambang adalah UI formulir masukan modern dan hemat ruang yang biasa digunakan dalam Desain Material dan aplikasi lainnya.

  • Hemat Ruang: Berfungsi ganda sebagai label dan placeholder, menghemat ruang vertikal bahkan ketika ruang layar terbatas.

  • Klarifikasi konten masukan: Pengguna selalu diperlihatkan arti suatu bidang (label), baik saat maupun setelah mengetik, sehingga pengguna tidak akan bingung.

  • Interaksi Canggih: Animasi label yang dimunculkan dengan mulus pada fokus memberikan umpan balik visual yang efektif kepada pengguna bahwa masukan kini tersedia.

Poin desain dan UX

  • Peretasan Placeholder: Memanfaatkan kelas semu :placeholder-shown\ untuk menentukan status (dimasukkan atau tidak) hanya menggunakan CSS, tanpa menggunakan JavaScript apa pun. (* placeholder=" "\ di sisi HTML adalah persyaratan wajib)

  • Memastikan visibilitas: Saat label dinaikkan, visibilitas dipertahankan dengan mengurangi ukuran font (scale(0.75)\) dan menerapkan font tebal (font-weight: 500\) dan warna tema.

  • Aksesibilitas: Dengan menghubungkan atribut label\ pada elemen for\ dan input\ pada elemen id\, ini mendukung pembaca layar dan pergerakan fokus saat mengklik label. Selain itu, pointer-events: none\ ditentukan agar label tidak mengganggu pengoperasian.

Cara menyesuaikan

Anda dapat menyesuaikan poin-poin berikut agar sesuai dengan sistem desain proyek Anda.

  • Pewarnaan: Ubah warna .fli-input:focus\ dan .fli-input:focus ~ .fli-label\ (saat ini #6366f1\) menjadi warna merek.

  • Sudut dan bayangan membulat: Dengan mengubah border-radius\ dan box-shadow\ dari .fli-input\, Anda dapat menyesuaikan ke desain yang lebih datar atau desain yang lebih bulat dan menonjol.

  • Ukuran font: Jika Anda menyesuaikan ukuran font atau tingkat pengurangan (scale(0.75)\) label, harap sesuaikan juga padding\ (terutama nilai atas) dari .fli-input\ sehingga label dan teks masukan tidak tumpang tindih.

Kode implementasi

<div class="fli-group">

<input type="text" id="username" class="fli-input" placeholder=" " required />

<label for="username" class="fli-label">nama pengguna</label>

</div>



<style>
.fli-group {

position: relative;

width: 100%;

max-width: 320px;

}



.fli-input {

width: 100%;

padding: 1.5rem 1.25rem 0.5rem;

font-size: 1rem;

font-family: inherit;

color: #0f172a;

background-color: #ffffff;

border: 2px solid #e2e8f0;

border-radius: 0.75rem;

outline: none;

box-sizing: border-box;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);

}



.fli-input:hover {

border-color: #cbd5e1;

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);

}



.fli-input:focus {

border-color: #6366f1;

box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);

background-color: #ffffff;

}



.fli-label {

position: absolute;

top: 1.1rem;

left: 1.25rem;

font-size: 1rem;

color: #64748b;

pointer-events: none;

transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

transform-origin: left top;

}



/* Memasukkan atau menyelesaikan status */

.fli-input:focus ~ .fli-label,

.fli-input:not(:placeholder-shown) ~ .fli-label {

transform: translateY(-0.6rem) scale(0.75);

color: #6366f1;

font-weight: 500;

}



/* Tidak fokus tapi masih input */

.fli-input:not(:focus):not(:placeholder-shown) ~ .fli-label {

color: #475569;

}
</style>

Status kompatibilitas peramban

  • Chrome: versi terbaru

  • Safari: versi terbaru

  • Firefox: versi terbaru

  • Tepi: Versi terbaru

Kelas semu :placeholder-shown\ didukung oleh semua browser modern dan aman untuk digunakan.