Kuika’nın Radio Group elementi, kullanıcıların bir grup içinden yalnızca tek bir seçeneği seçmesine olanak tanır. Sezgisel ve sade bir tasarıma sahip olan bu element, kullanıcıların karar verme sürecini hızlandırır ve doğru seçim yapılmasını sağlar. Formlarda, anketlerde ve ayar ekranlarında yaygın olarak kullanılır.

Yalnızca web uygulamalarında desteklenir.

Kullanım Alanları

• İşe alım formlarında çalışma tipi seçimi (Full-Time, Part-Time, Contract)
• Teslimat yöntemi seçimi (Standard, Express, Same-Day)
• Ödeme tercihi (Credit Card, Bank Transfer, PayPal)
• Kullanıcı tercihleri (Dark Mode / Light Mode)
• Anket ve test soruları (tek yanıtlı seçenekler)
• Uygulama ayarlarında varsayılan davranış belirleme

Kullanım Senaryosu – Çalışma Tipi Seçimi

Bir İK (İnsan Kaynakları) uygulamasında, çalışan bilgileri formunda kullanıcıdan çalışma türünü seçmesi istenir. Bu alanda Radio Group elementi kullanılarak üç farklı seçenek sunulur:

• Full-Time
• Contract
• Part-Time

Senaryoda:

• Kullanıcı formdaki “What is your employment type?” sorusunu görür.
• “Full-Time” seçeneğini işaretlediğinde, diğer seçenekler otomatik olarak pasif hale gelir.
• Seçili olan buton mor (örnek #6C63FF) renkle vurgulanır.
• Form gönderildiğinde, seçilen değer sistemde tek bir kayıt olarak saklanır.

Veri Kaynağı Bağlama

• Datasources modülüne gidin.
• Tables başlığı yanındaki “+” ikonuna tıklayarak tabloya EmploymentTypes adını verin.
• Aşağıdaki tabloyu ekleyin. 

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

SELECT 1 AS TypeId, 'Full-Time' AS TypeNameUNION ALLSELECT 2, 'Contract'UNION ALLSELECT 3, 'Part-Time'

• Radio Group elementine EmploymentList aksiyonunu bağlayın.
• Options → EmploymentList, Key = TypeId, Text = TypeName olarak ayarlayın.

UI Design Modülü İşlemleri

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

• Label: What is your employment type?
• Options: EmploymentList
• Value: TypeId
• Direction: Horizontal
• Space: 16 px
• Selected Radio Color: #6C63FF
• Unselected Radio Color: #D9D9D9
• Multi Selectable: Off

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

• Value: Seçilen seçeneğin değerini tutar (ör. “1” → Full-Time).
• Options: Radio Group içinde gösterilecek veri listesini tanımlar.
• Direction: Radio Button’ların yatay (horizontal) veya dikey (vertical) dizilimini belirler.
• Space: Seçenekler arasındaki boşluğu ayarlar.
• Selected Radio Color: Seçilen seçeneğin renk vurgusunu belirler.
• Unselected Radio Color: Seçili olmayan butonların rengini ayarlar.
• Multi Selectable: Aktif edilirse birden fazla seçeneğin aynı anda seçilmesine izin verir (varsayılan: kapalı).

Senaryo Tamamlandığında

• Kullanıcı “What is your employment type?” sorusuna yanıt verir.
• Yalnızca bir seçenek aktif olur.
• Seçili seçenek renkli bir vurgu alır.
• Form gönderildiğinde yalnızca seçili değer (ör. “Full-Time”) veri tabanına kaydedilir.

Kısıtlamalar

• Aynı anda yalnızca bir seçim yapılabilir.
• Multi Selectable aktif edilmedikçe çoklu seçim desteklenmez.
• Dikey düzen (vertical) uzun listelerde fazla yer kaplayabilir.

İpuçları ve Best Practices

• Kısa, anlaşılır seçenek metinleri kullanın (ör. “Full-Time” yerine “Full Time”).
• Seçili ve seçili olmayan renkler arasında yeterli kontrast sağlayın.
• Geniş ekranlarda yatay, dar alanlarda dikey yerleşimi tercih edin.
• Anket veya form yapılarında Radio Group’u Checkbox yerine kullanın, çünkü yalnızca bir seçimin geçerli olduğu durumlarda daha uygundur.