Kuika’nın Checkbox elementi, kullanıcıların bir veya birden fazla seçeneği işaretleyerek çoklu seçim yapmasını sağlar. Form, görev listesi veya filtreleme gibi senaryolarda kullanıcı etkileşimini artırmak için idealdir.

Checkbox elementi hem web hem de mobil uygulamalarda kullanılabilir.

Kullanım Alanları

• Görev listelerinde tamamlanan işlerin işaretlenmesi
• Çoklu seçim gerektiren formlar (ör. ilgi alanları, kategoriler)
• Filtreleme sistemlerinde (örn. ürün kategorileri)
• Anket veya tercih listelerinde seçenek belirleme

Kullanım Senaryosu – Görev Listesi

Bir görev yönetimi (To Do List) uygulamasında kullanıcılar günlük görevlerini listeleyebilir ve tamamladıkları görevleri Checkbox yardımıyla işaretleyebilirler.

Senaryoda:

• Kullanıcı ekranında “To Do List” başlıklı bir alan bulunur.
• Her görev satırında bir Checkbox, görev başlığı ve etiketler (ör. “education”, “high priority”) yer alır.
• Kullanıcı görevi tamamladığında Checkbox’ı işaretler.
• Checkbox seçildiğinde görev tamamlandı olarak işaretlenir ve rengi değişir.

Veri Kaynağı Bağlama

1. Datasources Modülü

• Datasources modülüne gidin.
• Ardından Tables başlığı yanındaki + ikonuna tıklayın ve tabloya “TaskList” ismini verin. 
• Aşağıdaki tabloyu oluşturun. 

• Ardından Actions bölümünden yeni bir SQL Action oluşturun, adına TaskListData yazın:

SELECT 1 AS Id, 'Speaking course for 2 h' AS TaskName, 'education' AS Category, 'normal' AS Priority, 1 AS IsCompletedUNION ALLSELECT 2, 'Shopping', 'chores', 'high priority', 0;

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Elements > Select Input kategorisinden Checkbox elementini sürükleyip bırakın.
3. Checkbox öğesini görev metninin soluna hizalayın.

• Label → Speaking course for 2 h
• Checked → True (tamamlanmış görev için)
• Box Color → #E5E7EB
• Box Color OnChecked → #10B981 (örnek yeşil ton)
• Check Icon Color → #FFFFFF

Özelliklerin Senaryo Bağlamında Kullanılması

• Label: Görev başlığını gösterir. Örnek: “Speaking course for 2 h”
• Checked: Görevin tamamlanma durumunu belirtir.
• Box Color: İşaretlenmemiş checkbox rengidir.
• Box Color OnChecked: İşaretlendiğinde arka plan rengi değişir.
• Check Icon Color: Onay işareti rengini tanımlar.
• Text Color (mobilde): iOS/Android için metin rengi ayarını yapar.

Senaryo Tamamlandığında

• Kullanıcı ekranda iki görev görür:
  
  • “Speaking course for 2 h” → Checkbox işaretli (tamamlanmış)
  • “Shopping” → Checkbox boş (devam eden)
• Kullanıcı “Shopping” görevini tamamladığında Checkbox’ı işaretler.
• Görev artık tamamlandı olarak görünür ve stil değişir (örneğin gri metin veya yeşil işaret).

Kısıtlamalar

• Checkbox değeri yalnızca True / False (1 / 0) olarak saklanabilir.
• Renk değişiklikleri sadece UI tarafında yapılır, veritabanına otomatik yansımaz (manuel aksiyon gerekir).
• Çok sayıda Checkbox kullanıldığında performans için veri bağlantısı optimize edilmelidir.

İpuçları ve Best Practices

• Görev listelerinde işaretli Checkbox’lar için farklı renk tonları (yeşil, gri) kullanın.
• Kullanıcının ilerlemesini görsel olarak göstermek için tamamlanan görevleri “strike-through” (üstü çizili) yapabilirsiniz.
• Checkbox değerini bir Managed DB Action ile bağlayarak değişiklikleri doğrudan veritabanına kaydedin.
• Mobilde dokunma alanını geniş tutarak kullanım kolaylığı sağlayın.