Kuika’nın Radio Button Group elementi, kullanıcıların bir grup içinden yalnızca tek bir seçeneği butonlar aracılığıyla seçmesini sağlar. Buton tabanlı yapısı, sezgisel bir etkileşim sunarak kullanıcıların hızlı ve doğru şekilde seçim yapmalarına olanak tanır. Tercih, plan veya filtreleme gibi yalnızca bir seçimin geçerli olduğu durumlarda idealdir.

Yalnızca web uygulamalarında desteklenir.

Kullanım Alanları

• Abonelik planı seçimi (ör. Basic, Pro, Premium)
• Ödeme yöntemi seçimi (ör. Kredi Kartı, Havale, PayPal)
• Cinsiyet, yaş grubu veya anket yanıtı seçimi
• Teslimat tipi belirleme (ör. Aynı Gün, Standart, Ücretsiz Kargo)
• Rapor filtreleri veya görünüm tercihleri
• Rezervasyon sistemlerinde oturma alanı veya masa tipi seçimi

Kullanım Senaryosu – Ödeme Yöntemi Seçimi

Bir alışveriş uygulamasında, kullanıcı ödeme adımında yalnızca bir ödeme yöntemini seçmek zorundadır. Bu adımda Radio Button Group elementi kullanılarak kullanıcıya farklı ödeme seçenekleri sunulur.

Senaryoda:

• Kullanıcı ödeme ekranına gelir.
• “Select Payment Method” başlığı altında üç seçenek bulunur:
  
  • Credit Card
  • Bank Transfer
  • PayPal
    
• Kullanıcı yalnızca bir seçeneği işaretleyebilir.
• Seçilen buton, farklı bir arka plan ve yazı rengiyle vurgulanır.
• Seçim yapıldığında sistem yalnızca seçilen yönteme göre ödeme formunu görüntüler.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki “+” ikonuna tıklayın.
• Tabloya PaymentOptions adını verin.
• Aşağıdaki tabloyu oluşturun. 

• SQL Actions sekmesinden yeni bir aksiyon oluşturun ve adına PaymentList yazın.
• Aşağıdaki SQL komutunu girin:

SELECT 1 AS OptionId, 'Credit Card' AS OptionNameUNION ALLSELECT 2, 'Bank Transfer'UNION ALLSELECT 3, 'PayPal'

• Radio Button Group elementine bu aksiyonu bağlayın.
• Options → PaymentList, Key = OptionId, Text = OptionName olarak yapılandırın.

UI Design Modülü İşlemleri

1. UI Design modülüne gidin.
2. Sol panelden Elements > Select Input > Radio Button Group elementini seçin.
3. Elementi ekranınıza sürükleyip bırakın.
4. Properties panelinden şu ayarları yapılandırın:

• Label: Select Payment Method
• Options: PaymentList
• Value: OptionId
• Space: 12 px (seçenekler arası boşluk)
• Selected Font Color: #FFFFFF
• Selected Bg Color: #007BFF
• Unselected Bg Color: #F2F2F2

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

• Value: Seçilen butonun değerini tutar (ör. “2” → Bank Transfer).
• Disabled: Kullanımı devre dışı bırakır, butonlar tıklanamaz hale gelir.
• Space: Seçenekler arasındaki boşluğu belirler, daha ferah bir görünüm sağlar.
• Selected Font Color: Seçilen butonun yazı rengini belirler.
• Selected Bg Color: Aktif seçili butonun arka plan rengini belirler.
• Unselected Bg Color: Seçili olmayan butonların arka plan rengini ayarlar.

Senaryo Tamamlandığında

• Kullanıcı “Select Payment Method” başlığı altındaki butonlardan birini seçer.
• Seçili buton mavi renkle vurgulanır, diğerleri gri görünür.
• Sistem, seçilen ödeme yöntemine göre ilgili formu veya bilgiyi gösterir.
• Kullanıcı başka bir seçeneğe geçtiğinde önceki seçim otomatik olarak kaldırılır.

Kısıtlamalar

• Aynı anda yalnızca bir seçim yapılabilir.
• Dynamic data bağlanmadığında seçenekler manuel (statik) olarak girilmelidir.
• Çok uzun metinlerde buton hizalaması bozulabilir, bu durumda Space değeri artırılmalıdır. 

İpuçları ve Best Practices

• Buton etiketlerini kısa ve anlaşılır tutun (ör. “Card”, “Bank”, “PayPal”).
• Seçili butonun arka plan rengini markanızın ana rengine uyarlayın.
• Anketlerde veya formlarda Radio Button Group’u dikey yerleşimle kullanmak okunabilirliği artırır.
• Eğer “OnChange” aksiyonu eklerseniz, kullanıcı seçim yaptığında başka bir alan otomatik güncellenebilir.
• Seçenek sayısı üçten fazlaysa Column layout veya scrollable container tercih edin.