Tantangan UI: Switch – Kukuh Sulistyo

Spesifikasi

Komponen Switch adalah elemen interaktif dalam antarmuka pengguna yang memungkinkan pengguna untuk mengaktifkan atau menonaktifkan suatu fitur atau opsi. Secara visual, Switch biasanya ditampilkan sebagai sakelar yang dapat digeser dari satu posisi ke posisi lain, sering kali dengan indikasi warna yang berbeda untuk status “aktif” dan “non-aktif”.

Komponen Switch mirip dengan komponen inputan biner lainnya seperti Checkbox. Perbedaannya adalah Checkbox memiliki tiga kemungkinan status, yaitu tercentang, tidak tercentang, dan tercentang sebagian (indeterminate).

Berikut adalah beberapa spesifikasi dasar dari elemen Switch yang akan kita buat:

Interaksi Pengguna: pengguna dapat mengklik elemen Switch untuk mengubah statusnya dari “aktif” ke “non-aktif” dan sebaliknya. Ketika fokus sedang berada pada elemen Switch, maka pengguna dapat mengubah statusnya dengan cara menekan spasi pada papan tombol.
Umpan Balik Visual: Switch harus memberikan umpan valik visual yang jelas mengenai statusnya. Ini biasanya melibatakan perubahan warna atau animasi pergerakan.
Aksesibilitas: status harus bisa terbaca oleh pengguna dengan alat bantu pembaca layar (screen reader). Kemudian, untuk membantu pemahaman/pengenalan dari status Switch pada orang dengan disabilitas kognitif, kita juga harus menampilkan teks yang ekuivalen dengan statusnya (red: “aktif” dan “non-aktif”).
Integrasi dengan Formulir: Switch harus dapat berintegrasi dengan elemen formulir HTML sehingga statusnya dapat dikirimkan dalam pengiriman formulir.
Dukungan rigth-to-left (RTL): dukungan bagi perangkat yang memiliki direksi atau arah penulisan dari kanan ke kiri, seperti Bahasa Arab.

Satu hal yang harus digarisbawahi adalah kita akan melakukannya dengan pendekatan peningkatan bertahap (progressive enhancement), yaitu dengan sebisa mungkin melakukannya tanpa JavaScript.

Ide Dasar

3 elemen dasar penyusun Switch, yaitu: Checkbox, Slider, dan Bullet

Ide dasarnya adalah menggunakan elemen Checkbox (<input type="checkbox" />) sebagai kontrol utama. Kita akan menerapkan opacity: 0 pada elemen Checkbox tersebut agar tersembunyi secara visual tanpa menghilangkan fungsionalitasnya. Sebagai tampilan visual, kita akan menggantinya menggunakan elemen lain yang menyerupai sakelar. Sakelar ini terdiri dari elemen slider dan bullet.

Langkah 1: Markup dan Styling Dasar

Berikut adalah markup dasarnya. Tinjau bahwa kita menggunakan <input type="checkbox"> agar kita bisa menjaga fungsionalitas bawaan, termasuk dalam hal ini adalah interaksi dengan papan tombol dan integrasi dengan formulir tanpa menambahkan JavaScript. Penambahan atribut role="switch" bertujuan agar statusnya terbaca sebagai “on” dan “off” oleh teknologi asistif seperti pembaca layar.

<div class="root">
   <input type="checkbox" role="switch" />
   <span class="slider">
      <span class="bullet shadow-sm"></span>
   </span>
</div>

Kemudian, kita akan menggunakan CSS custom properties untuk mendeklarasikan nilai dimensi dan spasi agar nantinya bisa dirujuk di bagian lainnya.

.root {
   --switch-width: 40px;
   --switch-height: 20px;
   --switch-gap: 2px;

   position: relative;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   border-radius: 2px;
}

.root input {
   position: absolute;
   z-index: 1;
   display: inline-block;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   margin: 0;
}

.root .slider {
   display: flex;
   width: var(--switch-width);
   height: var(--switch-height);
   padding: var(--switch-gap);
   border-radius: 9999px;
   background-color: var(--color-gray-400);
}

.root .slider .bullet {
   aspect-ratio: 1;
   border-radius: 9999px;
   background-color: white;
}

Kode-kode markup dan styling dasar di atas akan menghasilkan tampilan seperti berikut:

Langkah 2: Umpan Balik Visual

Umbah balik visual yang akan kita terapkan sesuai dengan status “on” dan “off” adalah mengganti warna latar belakang dari .slider dan menggeser posisi .bullet ke sisi lainnya. Dalam hal ini, kita akan menggunakan selector berupa ~ (subsequent-sibling combinator) untuk menyeleksi elemen .slider dan .bullet yang merupakan sibling dari elemen input yang sedang tercentang (via :checked).

Ubah warna latar belakang

.root input:checked ~ .slider {
   background-color: var(--color-primary-700);
}

Geser posisi `.bullet`

Gunakan translateX dengan nilai width - lebar bullet - (2 * gap).

.root input:checked ~ .slider .bullet {
   --slide-distance: calc(var(--switch-width) - 100% - var(--switch-gap) * 2);

   transform: translateX(var(--slide-distance));
}

Berikut adalah umpan balik visual yang dihasilkan dari penambahan kode-kode di atas. Untuk mempermudah ilustrasi, elemen input dibuat lebih transparan.

Langkah 3: Indikator Teks

Teman-teman yang memiliki disabilitas kognitif seperti diseleksia terkadang akan mengalami kesulitan untuk membedakan status “on” dan “off” hanya dari umpan balik visual. Untuk membantu mereka dalam pemahaman atau pengenalan status dari Switch, kita bisa menambahkan indikator teks yang merepresentasikan masing-masing status.

Kita akan menambahkan dua elemen teks, yaitu “on” dan “off”. Kedua teks tersebut akan diberi atribut aria-hidden="true" agar tidak masuk pada pohon aksesibilitas sehingga tidak akan terbaca oleh pembaca layar. Hal ini dilakukan karena pembaca layar akan secara otomatis membaca status dari Switch (via role=“switch”). Jadi, teks “on” atau “off” tidak perlu dibacakan lagi agar tidak redundan.

<div class="root">
   <input type="checkbox" role="switch" />
   <span class="slider">
      <span class="bullet shadow-sm"></span>
   </span>

   <span aria-hidden="true" class="label on">On</span>
   <span aria-hidden="true" class="label off">Off</span>
</div>

Salah satu dari keduanya akan disembunyikan atau ditampilkan secara bergantian menggunakan properti display berdasarkan nilai dari input (via pseudo-selector :checked).

.root .label.on {
   display: none;
}

.root input:checked ~ .label.on {
   display: initial;
}

.root input:checked ~ .label.off {
   display: none;
}

Hasil dari penambahan kode-kode tersebut adalah sebagai berikut:

Langkah 4: Finalisasi

Bagian-bagian fundamental sudah selesai kita buat. Selanjutnya, kita akan melakukan finalisasi yang terdiri dari beberapa hal berikut.

Membuat elemen `input` menjadi transparan penuh

.root input {
   ...
   opacity: 0;
}

Menambahkan animasi

Agar tidak terlalu kaku, animasi ditambahkan pada elemen yang memiliki umpan balik visual, yaitu properti background-color untuk elemen .slider dan properti transform untuk elemen .bullet. Namun, untuk tetap mengindahkan pengaturan akesibilitas dimana pengguna bisa mematikan animasi pada perangkat mereka, kita akan terapkan transition: none; pada @media (prefers-reduced-motion).

.root .slider {
   ...
   transition: background-color 400ms cubic-bezier(0.8, 0, 0.2, 1);
}

.root .slider .bullet {
   ...
   transition: transform 200ms cubic-bezier(0.8, 0, 0.2, 1);
}

@media (prefers-reduced-motion) {
   .root .slider,
   .root .slider .bullet {
      transition: none;
   }
}

Indikator fokus

Indikator fokus digunakan untuk secara visual memberitahu pengguna bahwa suatu elemen menerima fokus, terutama yang berasal dari interaksi pengguna via papan tombol. Kita akan menambahkan fokus berupa outline pada elemen .root ketika elemen input mendapatkan fokus via :has dan :focus-visible. Sebelumnya, kita harus menghilangkan outline bawaan dari elemen input.

.root input {
   ...
   outline: none;
}

.root:has(input:focus-visible) {
   outline-color: black;
   outline-width: 2px;
   outline-offset: 2px;
   outline-style: solid;
}

Dukungan right-to-left (RTL)

Hal terakhir yang akan kita lakukan adalah menyediakan dukungan bagi perangkat yang memiliki direksi atau arah penulisan dari kanan ke kiri, seperti Bahasa Arab. Pengaturan RTL biasanya lakukan dengan menambahkan atribut dir="rtl" pada suatu elemen. Pada mode RTL, penyesuaian yang harus dilakukan adalah posisi geser dari elemen .bullet yang awalnya bernilai positif (geser ke kanan) menjadi bernilai negatif (geser ke kiri).

[dir='rtl'] .root input:checked ~ .slider .bullet {
   --slide-distance-rtl: calc(-1 * var(--slide-distance));

   transform: translateX(var(--slide-distance-rtl));
}

Kesimpulan

Dengan menggunakan elemen <input type="checkbox" /> sebagai elemen utama dari Switch, semua interaksi dan fungsionalitas yang bisa dilakukan pada elemen tersebut juga akan bisa dilakukan pada elemen Switch yang kita buat. Termasuk di dalamnya adalah interaksi dengan papan tombol dan integrasi dengan formulir. Hal-hal tersebut kita dapatkan secara cuma-cuma, tanpa harus menambahkan kode JavaScript.

Lampu:

سِرَاج: