Zenko
Forms and input/Focus Ring

Focus Ring

● Ready Web Nuxt 4 + Mobile React Native

Ring fokus primer 2px dengan offset 2px yang hanya tampil untuk interaksi keyboard (`:focus-visible`), bukan untuk setiap klik mouse (`:focus`).

:focus-visible { outline: 2px solid ... }

Ring fokus otomatis, bukan per-komponen

:focus aktif pada setiap event fokus, termasuk klik mouse/touch — inilah penyebab keluhan "ring berkedip di setiap klik" yang membuat banyak tim akhirnya mematikan gaya fokus sama sekali, hasil yang justru lebih buruk untuk aksesibilitas. :focus-visible hanya aktif ketika heuristik browser menilai interaksi non-pointer (keyboard) kemungkinan besar terjadi, sehingga pengguna mouse tidak melihatnya sementara pengguna keyboard selalu melihatnya. Klik tombol di bawah dengan mouse, lalu Tab dari luar area ini untuk merasakan bedanya secara langsung.

Catatan: pada elemen <input>, browser modern tetap menampilkan ring meski diklik mouse — ini perilaku :focus-visible yang disengaja (Anda akan segera mengetik), bukan bug pada demo ini.

Focus Ring Playground

Klik dengan mouse lalu tekan Tab dari luar area ini — perhatikan bedanya.

Tautan contoh
assets/css/main.css
:focus-visible {
  outline: 2px solid rgba(47, 111, 235, 0.5);
  outline-offset: 2px;
}