Türkiye’ye özgü hizmet · Data protection consent

KVKK açık rıza TR

6698 sayılı kanun kapsamında açık rıza alır ve aydınlatma metnine bağlantı verir.

CSS: kararlı
JavaScript: gönderim denetimi
React: kararlı
Vue: kararlı

Örnekler

Temel Canlı örnek

Kişisel verilerinizin işlenmesi

Başvurunuzu değerlendirmek için kimlik ve iletişim bilgilerinizi işliyoruz. Ayrıntılar aydınlatma metninde yazılıdır (yeni sekmede açılır).

Başvurumun değerlendirilmesi için verilerimin işlenmesine izin veriyorum.

Yeni hizmetler hakkında bilgilendirme almak istiyorum (isteğe bağlı).

HTML kodunu göster

<div class="kiris-kvkk">
  <h2 class="kiris-kvkk__baslik">Kişisel verilerinizin işlenmesi</h2>
  <p class="kiris-govde">Başvurunuzu değerlendirmek için kimlik ve iletişim bilgilerinizi işliyoruz. Ayrıntılar <a class="kiris-link" href="#" target="_blank" rel="noopener">aydınlatma metninde</a> yazılıdır (yeni sekmede açılır).</p>
  <div class="kiris-secenek">
    <input class="kiris-onay" id="kvkk-zorunlu" name="kvkk" type="checkbox" required>
    <label class="kiris-secenek-etiket" for="kvkk-zorunlu">Başvurumun değerlendirilmesi için verilerimin işlenmesine izin veriyorum.</label>
  </div>
  <div class="kiris-secenek">
    <input class="kiris-onay" id="kvkk-istege" name="kvkk_bilgilendirme" type="checkbox">
    <label class="kiris-secenek-etiket" for="kvkk-istege">Yeni hizmetler hakkında bilgilendirme almak istiyorum <span class="kiris-etiket__istege-bagli">(isteğe bağlı)</span>.</label>
  </div>
</div>

Gönderim denetimi Canlı örnek

Onay kutusu boşken "Başvuruyu gönder" düğmesine basın. Form gönderilmez, hata görünür.

HTML kodunu göster

<form action="#" method="post" novalidate>
  <div class="kiris-kvkk" data-kiris="kvkk">
    <h2 class="kiris-kvkk__baslik">Kişisel verilerinizin işlenmesi</h2>
    <p class="kiris-govde">Başvurunuzu değerlendirmek için kimlik ve iletişim bilgilerinizi işliyoruz. Ayrıntılar <a class="kiris-link" href="#" target="_blank" rel="noopener">aydınlatma metninde</a> yazılıdır (yeni sekmede açılır).</p>
    <p class="kiris-hata" id="kvkk-g-hata" hidden></p>
    <div class="kiris-secenek">
      <input class="kiris-onay" id="kvkk-g-zorunlu" name="kvkk" type="checkbox" required>
      <label class="kiris-secenek-etiket" for="kvkk-g-zorunlu">Başvurumun değerlendirilmesi için verilerimin işlenmesine izin veriyorum.</label>
    </div>
    <div class="kiris-secenek">
      <input class="kiris-onay" id="kvkk-g-istege" name="kvkk_bilgilendirme" type="checkbox">
      <label class="kiris-secenek-etiket" for="kvkk-g-istege">Yeni hizmetler hakkında bilgilendirme almak istiyorum <span class="kiris-etiket__istege-bagli">(isteğe bağlı)</span>.</label>
    </div>
  </div>
  <button class="kiris-button" type="submit">Başvuruyu gönder</button>
</form>

Hata durumu Canlı örnek

Kişisel verilerinizin işlenmesi

Başvurunuzu değerlendirmek için kimlik ve iletişim bilgilerinizi işliyoruz. Ayrıntılar aydınlatma metninde yazılıdır (yeni sekmede açılır).

Hata: Devam etmek için verilerinizin işlenmesine izin vermeniz gerekir.

Başvurumun değerlendirilmesi için verilerimin işlenmesine izin veriyorum.

Yeni hizmetler hakkında bilgilendirme almak istiyorum (isteğe bağlı).

HTML kodunu göster

<div class="kiris-kvkk kiris-kvkk--hata">
  <h2 class="kiris-kvkk__baslik">Kişisel verilerinizin işlenmesi</h2>
  <p class="kiris-govde">Başvurunuzu değerlendirmek için kimlik ve iletişim bilgilerinizi işliyoruz. Ayrıntılar <a class="kiris-link" href="#" target="_blank" rel="noopener">aydınlatma metninde</a> yazılıdır (yeni sekmede açılır).</p>
  <p class="kiris-hata" id="kvkk-h-hata"><span class="kiris-gorsel-gizli">Hata:</span> Devam etmek için verilerinizin işlenmesine izin vermeniz gerekir.</p>
  <div class="kiris-secenek">
    <input class="kiris-onay" id="kvkk-h-zorunlu" name="kvkk" type="checkbox" required aria-invalid="true" aria-describedby="kvkk-h-hata">
    <label class="kiris-secenek-etiket" for="kvkk-h-zorunlu">Başvurumun değerlendirilmesi için verilerimin işlenmesine izin veriyorum.</label>
  </div>
  <div class="kiris-secenek">
    <input class="kiris-onay" id="kvkk-h-istege" name="kvkk_bilgilendirme" type="checkbox">
    <label class="kiris-secenek-etiket" for="kvkk-h-istege">Yeni hizmetler hakkında bilgilendirme almak istiyorum <span class="kiris-etiket__istege-bagli">(isteğe bağlı)</span>.</label>
  </div>
</div>

Ne zaman kullanılır

Kişisel veri işlenen her formda kullanın.
Kutu önceden işaretli gelmez. Açık rıza işaretlenmiş sayılamaz.
Rıza vermeyen kullanıcı için alternatif bir yol gösterin.

Erişilebilirlik

Aydınlatma metni ayrı bir sayfada durur ve bağlantı yeni sekmede açılır.
Rıza metni sade Türkçe ile yazılır. Hukuk dili özet metinde kullanılmaz.
Zorunlu ve isteğe bağlı rızalar ayrı kutulardır. Tek kutuda toplanmaz.
Zorunlu onay boşken form gönderilmez. Hata metni kutunun üstünde görünür ve odak onay kutusuna gider.

Karşılanan WCAG 2.2 ölçütleri 1.3.1 3.3.1 3.3.2

Neden bu bileşen var

Aydınlatma metni bağlantısını ve kullanıcının onay seçeneğini aynı alanda gösterir. Onay seçeneği başlangıçta işaretli değildir.

Kaynak

Benzer bir bileşen şu ülkelerin tasarım sistemlerinde de var: FR.

Bu bileşenin kodu depoda:

Kayıt defteri tanımı, adı, özeti, kullanım kuralı ve örnekleri
CSS katmanları, kiris-kvkk-onay ile başlayan sınıflar
Davranış betiği, data-kiris="kvkk" başlatıcısı