Checkbox atau kotak centang adalah salah satu elemen form yang paling umum. Komponen ini memungkinkan pengguna untuk memilih satu atau beberapa opsi dari sebuah daftar, seperti menyetujui syarat dan ketentuan, memilih hobi, atau menandai item dalam to-do list.

Di Ionic, komponen ion-checkbox dirancang agar terlihat dan terasa native di setiap platform (iOS dan Android), serta mudah untuk diintegrasikan. Dalam tutorial ini, kita akan membahas cara menggunakan ion-checkbox untuk berbagai keperluan. ✅

Dasar-Dasar Checkbox

Untuk membuat checkbox, Anda cukup menempatkan komponen <ion-checkbox> di dalam sebuah <ion-item>. Ini akan secara otomatis mengatur tata letak dan interaksi sentuhan yang benar.

Contoh Checkbox Sederhana

Mari kita buat contoh paling dasar, yaitu checkbox untuk persetujuan.

<ion-list>
  <ion-item>
    <ion-checkbox slot="start"></ion-checkbox>
    <ion-label>Saya menyetujui Syarat & Ketentuan</ion-label>
  </ion-item>
</ion-list>

Analisis Kode:

• <ion-item>: Bertindak sebagai wadah untuk satu baris, memastikan perataan dan spasi yang benar.
• <ion-checkbox>: Komponen checkbox itu sendiri.
• slot="start": Atribut ini menempatkan checkbox di sisi kiri item. Anda bisa mengubahnya menjadi slot="end" untuk menempatkannya di sisi kanan.
• <ion-label>: Teks yang menjelaskan fungsi dari checkbox tersebut.

Mengelola Status Checkbox

Dalam aplikasi nyata, Anda perlu mengetahui apakah sebuah checkbox dicentang atau tidak. Anda juga mungkin perlu mengatur statusnya secara default.

Status Tercentang (Checked)

Untuk membuat checkbox tercentang secara default, gunakan properti checked.

<ion-item>
  <ion-checkbox slot="start" [checked]="true"></ion-checkbox>
  <ion-label>Item ini sudah tercentang</ion-label>
</ion-item>

Status Nonaktif (Disabled)

Terkadang Anda perlu menonaktifkan checkbox sampai kondisi lain terpenuhi. Gunakan properti disabled.

<ion-item>
  <ion-checkbox slot="start" [disabled]="true"></ion-checkbox>
  <ion-label>Anda tidak bisa mengubah ini</ion-label>
</ion-item>

Mengikat Nilai dengan ngModel (Untuk Pengguna Angular)

Cara paling umum untuk bekerja dengan form di Angular adalah menggunakan two-way data binding dengan [(ngModel)]. Ini memungkinkan Anda untuk menghubungkan status checkbox langsung ke sebuah variabel di dalam file TypeScript Anda.

1. Di file .html Anda:

<ion-item>
  <ion-checkbox slot="start" [(ngModel)]="setuju"></ion-checkbox>
  <ion-label>Saya setuju</ion-label>
</ion-item>

<ion-button expand="block" [disabled]="!setuju" class="ion-margin-top">
  Lanjutkan
</ion-button>

2. Di file .ts Anda:

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  
  public setuju: boolean = false; // Variabel untuk menyimpan status checkbox

  constructor() {}
}

Dalam contoh ini, tombol “Lanjutkan” akan tetap nonaktif (disabled) sampai variabel setuju bernilai true (yaitu, ketika checkbox dicentang).

Kustomisasi Tampilan

Anda dapat dengan mudah mengubah warna checkbox agar sesuai dengan tema aplikasi Anda menggunakan atribut color.

<ion-item>
  <ion-checkbox slot="start" color="primary" [checked]="true"></ion-checkbox>
  <ion-label>Checkbox Primary</ion-label>
</ion-item>

<ion-item>
  <ion-checkbox slot="start" color="secondary" [checked]="true"></ion-checkbox>
  <ion-label>Checkbox Secondary</ion-label>
</ion-item>

<ion-item>
  <ion-checkbox slot="start" color="danger" [checked]="true"></ion-checkbox>
  <ion-label>Checkbox Danger</ion-label>
</ion-item>

Warna-warna ini diambil dari file src/theme/variables.scss yang sudah kita bahas di tutorial sebelumnya.

Kesimpulan

Komponen ion-checkbox adalah alat yang sederhana namun esensial untuk mengumpulkan pilihan dari pengguna. Dengan menempatkannya di dalam ion-item, Anda mendapatkan tata letak yang rapi secara otomatis. Anda juga telah belajar cara mengelola statusnya (tercentang atau nonaktif) dan mengikat nilainya ke logika aplikasi Anda menggunakan [(ngModel)].

Poin Kunci untuk Diingat:

• ✅ Selalu bungkus ion-checkbox di dalam ion-item untuk hasil terbaik.
• ✅ Gunakan slot="start" atau slot="end" untuk mengatur posisi.
• ✅ Manfaatkan properti checked dan disabled untuk mengontrol statusnya.
• ✅ Gunakan [(ngModel)] (di Angular) untuk data binding yang reaktif.
• ✅ Atribut color dapat digunakan untuk menyesuaikan tampilan.

Di tutorial selanjutnya, kita akan membahas komponen input pilihan lainnya, yaitu Radio Button. Selamat mencoba!