Bileşenler

Bileşenler bir kullanıcı arayüzünün yeniden kullanılabilir parçalarıdır. Hazır ve denenmiş parçalarla kurumlar tutarlı hizmetler kurar.

Her bileşen bayrak yarışı modeli ile yapılır ve bu yüzden farklı bir durum taşıyabilir. TR işareti, o bileşenin kuralının, biçiminin veya yasal dayanağının Türkiye’ye ait olduğunu gösterir. Teknolojiye göre ayrıntılı durum entegrasyon sayfasında durur.

1. Vergi kimlik numarası nedir?

   Açılır bilgi

   kararlı

   Popover · Geri bildirim

   Bir düğmeye basınca açılan küçük panel. İpucundan farkı: dokunmayla çalışır ve bağlantı taşıyabilir.

   • CSS
   • JavaScript
   • React
   • Vue
2. İl Seçiniz İstanbul Ankara İzmir Bursa

   Açılır liste

   kararlı

   Select · Form

   Kullanıcının bir listeden tek bir seçenek seçmesini sağlar.

   • CSS
   • React
   • Vue
3. Kişi sayısı

   −+

   Adet seçici

   kararlı

   Quantity stepper · Form

   Eksi ve artı düğmeli sayı alanı. Küçük sayılar için: bilet, kişi, adet.

   • CSS
   • JavaScript
   • React
   • Vue
4. Adım göstergesi

   kararlı

   Step indicator · Gezinme

   Çok adımlı bir akışta kullanıcının kaçıncı adımda olduğunu gösterir.

   • CSS
   • React
   • Vue
5. Tebligat adresiniz

   İl Seçiniz

   İlçe Önce il seçiniz

   Açık adres

   Mahalle, cadde veya sokak, bina no ve daire no.

   Posta kodu (isteğe bağlı)

   Adres TR

   kararlı

   Address · Türkiye’ye özgü form

   İl, ilçe ve mahalle alanlarını birbirine bağlar, sonra açık adresi alır.

   • CSS
   • JavaScript
   • React
   • Vue

6. Başvurum ne kadar sürede sonuçlanır?

   Akordiyon

   kararlı

   Accordion · Yerleşim

   Uzun içeriği başlıklara böler ve her bölümü istek üzerine açar.

   • CSS
   • JavaScript
   • React
   • Vue
7. Doğum tarihiniz nedir?

   Örnek: 27 03 1997

   Alan grubu

   kararlı

   Fieldset · Form

   Birbirine bağlı form alanlarını tek bir soru altında toplar.

   • CSS
   • React
   • Vue

8. Herkes, dilekçe hakkına sahiptir. Vatandaşlar ve karşılıklılık esası gözetilmek kaydıyla Türkiye’de ikamet eden yabancılar kendileriyle veya kamu ile ilgili dilek ve şikâyetleri hakkında yetkili makamlara başvurma hakkına sahiptir.

   Alıntı

   kararlı

   Blockquote · İçerik

   Başka bir kaynaktan alınan bir cümleyi metinden ayırır. Kaynağı altında yazar.

   • CSS
   • React
   • Vue
9. Alt bilgi

   kararlı

   Footer · Kimlik

   Sayfanın sonunda kurumu, zorunlu bağlantıları ve iletişim bilgisini taşır. Kurum logosunu girdi olarak alır.

   • CSS
   • React
   • Vue
10. Alt gezinme

    kararlı

    Bottom navigation · Gezinme

    Telefonda ekranın altına yapışan üç ile beş ana bölüm. Uygulama benzeri hizmetler için.

    • CSS
    • React
    • Vue
11. Başvuru durumu değişince SMS gönder

    Anahtar

    kararlı

    Switch · Seçim

    Bir ayarı açar veya kapatır. Etkisi hemen görülür, form gönderimi beklemez.

    • CSS
    • React
    • Vue
12. En çok uzaklık

    1 ile 50 kilometre arası.

    10 km

    1 km50 km

    Aralık seçici

    kararlı

    Range slider · Form

    Bir aralıktan yaklaşık bir sayı seçtirir. Seçilen değer her zaman yazıyla görünür.

    • CSS
    • JavaScript
    • React
    • Vue
13. Sitede ara Ara

    Arama

    kararlı

    Search · Gezinme

    Site içi arama alanı ve düğmesi. İsteğe bağlı öneri listesi: kullanıcı yazarken gruplu sonuçlar açılır.

    • CSS
    • JavaScript
    • React
    • Vue
14. İl

    Yazmaya başlayın ve listeden seçin.

    Aranabilir liste

    kararlı

    Combobox · Seçim

    Uzun bir listeden yazarak seçim yaptırır. 81 il ve 973 ilçe için açılır liste yerine bunu kullanın.

    • CSS
    • JavaScript
    • React
    • Vue
15. Beta

    Bu yeni bir hizmettir. Geri bildiriminiz onu iyileştirir.

    Aşama afişi

    kararlı

    Phase banner · Kimlik

    Hizmetin deneme aşamasında olduğunu söyler ve geri bildirim ister. Başlık çubuğunun hemen altında durur.

    • CSS
    • React
    • Vue
16. AY SGK

    AYMKZD+4

    Avatar

    kararlı

    Avatar · İçerik

    Bir kişiyi veya kurumu fotoğraf ya da baş harflerle gösterir.

    • CSS
    • React
    • Vue

17. Birinci bölüm.

    ---

    İkinci bölüm.

    ---

    Üçüncü bölüm.

    Ayraç

    kararlı

    Divider · Yerleşim

    İki içerik bölümünü ince bir çizgiyle ayırır.

    • CSS
    • React
    • Vue
18. T.C. kimlik numaramı nerede bulurum?

    Nüfus cüzdanınızın ön yüzünde, ad ve soyadınızın üstünde yazar.

    Ayrıntılar

    kararlı

    Details · Yerleşim

    Tek bir yardımcı açıklamayı istek üzerine gösterir.

    • CSS
    • React
    • Vue

19. Ayrıntılar için başvuru koşullarını okuyun.

    Bağlantı

    kararlı

    Link · Eylem

    Kullanıcıyı başka bir sayfaya veya aynı sayfadaki bir bölüme götürür.

    • CSS
    • React
    • Vue
20. Başa dön

    Başa dön

    kararlı

    Back to top · Gezinme

    Uzun sayfada iki ekran aşağı inince beliren bağlantı. Başa kaydırır ve odağı ana içeriğe verir.

    • CSS
    • JavaScript
    • React
    • Vue
21. Çalışma ve Sosyal Güvenlik Bakanlığı Menü

    Başlık

    kararlı

    Header · Kimlik

    Her sayfanın en üstünde durur, kurumu adlandırır ve ana menüyü taşır.

    • CSS
    • JavaScript
    • React
    • Vue

22. Önemli

    Sistem bakımı nedeniyle 14 Mart 02:00 ile 05:00 arasında hizmet verilmeyecektir.

    Bildirim afişi

    kararlı

    Notification banner · Geri bildirim

    Sayfanın en üstünde önemli veya acil bir duyuru gösterir.

    • CSS
    • React
    • Vue

23. Son gün 31 Mart

    Yıllık gelir vergisi beyannamesini 31 Mart 2026 Salı 23:59’a kadar verin. Ücret yoktur.

    Bilgi kutusu

    kararlı

    Callout · İçerik

    Başlıklı bir bilgi kutusu. Bir durum bildirmez, bir bilgiyi öne çıkarır.

    • CSS
    • React
    • Vue

24. Duyurular

    Tümü: duyurular

    Bölümün içeriği burada durur.

    Bölüm

    kararlı

    Section · Yerleşim

    Ana sayfayı yatay şeritlere böler. Her şeridin bir başlığı ve isteğe bağlı "Tümü" bağlantısı vardır.

    • CSS
    • React
    • Vue
25. Görünüm

    Liste Harita Takvim

    Bölümlü seçim

    kararlı

    Segmented control · Seçim

    İki ile dört seçenek, yan yana ve tek satırda. Görünüm veya sıralama seçmek için.

    • CSS
    • React
    • Vue

26. Bu sitede çerez kullanıyoruz

    Zorunlu çerezler siteyi çalıştırır. İsteğe bağlı çerezler kullanımı ölçer ve hizmeti iyileştirir.

    İsteğe bağlı çerezleri kabul etİsteğe bağlı çerezleri reddetÇerezleri görüntüle

    Çerez bildirimi

    kararlı

    Cookie banner · Kimlik

    İsteğe bağlı çerezler için izin ister. Kabul ve ret eşit büyüklüktedir. Tercih saklanır.

    • CSS
    • JavaScript
    • React
    • Vue
27. Başvuru gerekçeniz

    200 karakter kaldı

    Çok satırlı metin

    kararlı

    Textarea · Form

    Kullanıcının birden çok satır metin girmesini sağlar.

    • CSS
    • JavaScript
    • React
    • Vue
28. Hizmet verilen iller

    Yazın ve listeden seçin. Birden çok il seçebilirsiniz.

    AnkaraİstanbulİzmirBursaAntalyaKonyaAdanaGaziantep

    Çoklu seçim

    kararlı

    Multi-select · Seçim

    Uzun bir listeden birden çok seçim. Yazarak süzülür, seçilenler etiket olur.

    • CSS
    • JavaScript
    • React
    • Vue
29. Dil seçici

    kararlı

    Language selector · Gezinme

    Kullanıcının içerik dilini değiştirmesini sağlar. Her dil kendi adıyla ve kendi yazısıyla yazılır.

    • CSS
    • React
    • Vue
30. İkametgâh belgesi

    PDF veya JPG. En çok 5 MB.

    Dosya seç

    veya dosyayı buraya sürükleyin

    Dosya yükleme

    kararlı

    File upload · Form

    Kullanıcının cihazından bir veya daha çok dosya seçmesini sağlar. Sürükle ve bırak alanı ve dosya listesi ile.

    • CSS
    • JavaScript
    • React
    • Vue
31. Başvuruyu gönder

    Düğme

    kararlı

    Button · Eylem

    Kullanıcının bir işlemi başlatmasını sağlar. Her ekranda tek bir birincil düğme bulunur.

    • CSS
    • React
    • Vue
32. e-Devlet ile giriş yap

    e-Devlet şifreniz yoksa PTT şubelerinden alabilirsiniz.

    e-Devlet ile giriş TR

    kararlı

    e-Devlet sign in · Türkiye’ye özgü hizmet

    Kullanıcıyı e-Devlet Kapısı kimlik doğrulamasına gönderen tek ve değişmez düğme.

    • CSS
    • React
    • Vue
33. E-posta adresiniz

    Başvuru sonucunu bu adrese göndereceğiz.

    E-posta girişi

    kararlı

    Email input · Form

    E-posta adresi için tek satırlık alan. Telefonda @ tuşlu klavye açılır.

    • CSS
    • React
    • Vue
34. Görünüm ayarları

    Yazı boyutu

    Normal Büyük Çok büyük

    Tema

    Açık Koyu Yüksek karşıtlık

    Erişilebilirlik menüsü TR

    kararlı

    Accessibility menu · Türkiye’ye özgü hizmet

    Kullanıcının yazı boyutunu, karşıtlığı ve temayı değiştirmesini sağlar.

    • CSS
    • JavaScript
    • React
    • Vue
35. İnceleniyor Onaylandı Reddedildi Belge bekleniyor Başlanmadı

    Etiket

    kararlı

    Tag · İçerik

    Bir kaydın durumunu kısa bir sözcükle gösterir.

    • CSS
    • React
    • Vue
36. Eylemler

    Eylem menüsü

    kararlı

    Action menu · Eylem

    Bir düğmenin altında açılan eylem listesi. Düzenle, indir, sil.

    • CSS
    • JavaScript
    • React
    • Vue

37. Başvurunuz kaydedildi.

    Belge indiriliyor.

    Oturumunuz 2 dakika içinde kapanacak.

    Geçici bildirim

    kararlı

    Toast · Geri bildirim

    Bir işlemin sonucunu köşede, kısa süre gösterir. Kaydedildi, gönderildi, silindi.

    • CSS
    • JavaScript
    • React
    • Vue
38. Geniş menü

    kararlı

    Mega menu · Gezinme

    Başlık çubuğunun altında, her ana konu için tam genişlikte bir bağlantı paneli. Bir kerede bir panel açık.

    • CSS
    • JavaScript
    • React
    • Vue
39. Geri

    Geri bağlantısı

    kararlı

    Back link · Gezinme

    Çok adımlı bir akışta kullanıcıyı bir önceki adıma götürür.

    • CSS
    • React
    • Vue
40. Tutar

    Türk Lirası olarak, kuruşsuz.

    ₺

    Girdi grubu

    kararlı

    Input group · Form

    Bir alanın başına veya sonuna birim, para işareti veya sabit metin ekler.

    • CSS
    • React
    • Vue
41. Başvuru referans numarası

    12 hane. Örnek: 2026 0450 1234

    Girdi maskesi

    kararlı

    Input mask · Form

    Yazarken boşluk ve ayraçları kendisi koyar. Kart numarası, referans numarası.

    • CSS
    • JavaScript
    • React
    • Vue
42. 1. Kişisel bilgiler Tamamlandı
    2. Belgeleri yükleyin Başlanmadı

    Görev listesi

    kararlı

    Task list · İçerik

    Çok parçalı bir başvuruda hangi bölümün tamamlandığını gösterir.

    • CSS
    • React
    • Vue

43. 

    Görsel

    kararlı

    Figure · İçerik

    Bir görsel ve altında bir açıklama. Görsel içeriğin genişliğini aşmaz.

    • CSS
    • React
    • Vue

44. Hata: T.C. kimlik numarası 11 hane olmalıdır.

    Hata mesajı

    kararlı

    Error message · Geri bildirim

    Tek bir alandaki hatayı alanın yanında anlatır.

    • CSS
    • React
    • Vue

45. Bir sorun var

    • T.C. kimlik numarası 11 hane olmalıdır
    • Doğum tarihi bugünden sonra olamaz

    Hata özeti

    kararlı

    Error summary · Geri bildirim

    Sayfadaki tüm hataları en üstte toplar ve her birine bağlantı verir.

    • CSS
    • JavaScript
    • React
    • Vue
46. Emeklilik başvurusu

    Hizmet gezinmesi

    kararlı

    Service navigation · Gezinme

    Bir hizmetin adını ve kendi bölümlerini taşıyan ikinci çubuk. Başlık çubuğu kurumu, bu çubuk hizmeti söyler.

    • CSS
    • React
    • Vue
47. IBAN numaranız

    TR hazır yazılıdır. 24 rakam yazın. Boşluklu yapıştırabilirsiniz.

    IBAN girişi TR

    kararlı

    IBAN input · Türkiye’ye özgü form

    TR ile başlayan 26 karakterlik IBAN alır, dörderli gösterir ve mod 97 sağlamasını yapar.

    • CSS
    • JavaScript
    • React
    • Vue
48. Ana içerik · 8 sütun

    Yan bölge · 4 sütun

    4

    4

    4

    Izgara

    kararlı

    Grid · Yerleşim

    On iki sütunlu yerleşim. Küçük ekranda sütunlar alt alta iner.

    • CSS
    • React
    • Vue
49. Ana içeriğe geç

    Sayfa başlığı

    İçeriğe atlama bağlantısı

    kararlı

    Skip link · Gezinme

    Klavye kullanıcısının menüyü atlayıp doğrudan ana içeriğe gitmesini sağlar.

    • CSS
    • React
    • Vue
50. ikametgah.pdf yükleniyor %60

    %60

    İlerleme çubuğu

    kararlı

    Progress · Geri bildirim

    Süresi bilinen bir işlemin ne kadarının bittiğini gösterir.

    • CSS
    • React
    • Vue
51. • Emeklilik başvuru formuPDF, 240 KB
    • 2026 prim tablosuXLSX, 1,2 MB

    İndirme bağlantısı

    kararlı

    Download link · Eylem

    Bir dosyaya giden bağlantı. Dosya türünü ve boyutunu bağlantı metninin içinde söyler.

    • CSS
    • React
    • Vue
52. Yazdır

    İpucu

    kararlı

    Tooltip · Geri bildirim

    Bir düğme veya simge için kısa bir açıklama gösterir. Odak veya işaretçi ile açılır.

    • CSS
    • JavaScript
    • React
    • Vue
53. İskelet

    kararlı

    Skeleton · Geri bildirim

    İçerik yüklenirken yerini tutan gri şekiller. Sayfa zıplamaz.

    • CSS
    • React
    • Vue
54. 69.596.229Kayıtlı kullanıcı

    9.409Hizmet

    6.426Mobil hizmet

    1.129Kurum

    İstatistik kutusu

    kararlı

    Stat tile · İçerik

    Bir kurumun büyüklüğünü dört rakamla anlatır. Kayıtlı kullanıcı, hizmet sayısı gibi.

    • CSS
    • React
    • Vue
55. trds-kap · en çok 75rem

    trds-kap--dar · en çok 48rem

    Kap

    kararlı

    Container · Yerleşim

    İçeriği ortalar ve genişliğini sınırlar. Her sayfa bloğu bir kap içinde durur.

    • CSS
    • React
    • Vue
56. EmeklilikNe zaman emekli olurum, başvuru, maaş. SağlıkProvizyon, rapor, ilaç. İşverenBildirge, prim, teşvik.

    Karo

    kararlı

    Tile · Yerleşim

    Bir konuya giden büyük bağlantı kutusu. Simge, başlık ve bir cümle. Kartın bağlantı olan hali.

    • CSS
    • React
    • Vue

57. Sosyal Güvenlik Kurumu

    Daima Yanınızda

    Çalışan, işveren, emekli ve hak sahibi için sosyal güvenlik işlemleri tek adreste.

    e-Devlet ile giriş yapHizmetleri gör

    Karşılama bloğu

    kararlı

    Hero · Yerleşim

    Ana sayfanın ilk bloğu. Bir başlık, bir cümle ve bir arama veya düğme. Fotoğraf yok.

    • CSS
    • React
    • Vue

58. Emeklilik başvurusu

    Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.

    Kart

    kararlı

    Card · Yerleşim

    Bir hizmeti veya duyuruyu başlık, açıklama ve bağlantı ile tanıtır.

    • CSS
    • React
    • Vue

59. Durdur

    • Annelik Yolculuğu

      Gebelikten doğuma kadar her adımda rehber.

      Detaylı bilgi

    • Şehir Hastanelerimiz

      23 şehir hastanesi, 34 bin yatak.

      Detaylı bilgi

    • e-Nabız

      Kişisel sağlık sistemi.

      Detaylı bilgi

    • Alo 171

      Arayanların 135 bini sigarayı bıraktı.

      Detaylı bilgi

    Kayan pano

    kararlı

    Carousel · Yerleşim

    Yan yana kartlardan bir şerit. Kendiliğinden dönmez. Düğmeler bir kart kaydırır.

    • CSS
    • JavaScript
    • React
    • Vue

60. • 2 Eylül 2026 · Genel Sağlık Sigortası Genel Müdürlüğü

      Bedeli Ödenecek İlaçlar Listesinde Yapılan Düzenlemeler Hakkında Duyuru 2026/34

      Liste 5 Eylül 2026 tarihinden itibaren geçerlidir.

      Duyuru

    • 31 Ağustos 2026 · İnşaat ve Emlak Daire Başkanlığı

      Gayrimenkul Satış İlanı

      İhale

    Kayıt listesi

    kararlı

    Collection · İçerik

    Haber, duyuru veya belge kayıtlarının listesi. Her kayıt başlık, tarih, özet ve etiket taşır.

    • CSS
    • React
    • Vue
61. Başvuruyu sil

    Kip pencere

    kararlı

    Modal · Yerleşim

    Kullanıcıdan tek bir onay veya küçük bir karar ister.

    • CSS
    • JavaScript
    • React
    • Vue

62. Belirteçleri node packages/tokens/build.mjs ile üretin.

    <input class="trds-girdi" inputmode="numeric" maxlength="11">

    Kod

    kararlı

    Code · İçerik

    Satır içi kod ve kod bloğu. API belgeleri ve teknik kılavuzlar için.

    • CSS
    • React
    • Vue
63. 

    Kurum logosu TR

    kararlı

    Logo lockup · Kimlik

    Kurumun kendi logosu, tek bir bağlantıda ve sabit yükseklikte. Logosu olmayan kurum için bayrak ve ad kilidi.

    • CSS
    • React
    • Vue

64. Sosyal Güvenlik Kurumu

    Çalışma ve Sosyal Güvenlik Bakanlığı bağlı kuruluşudur.

    Kurum tanıtıcısı TR

    kararlı

    Identifier · Kimlik

    Sayfanın sonunda hizmeti işleten kurumu ve bağlı olduğu bakanlığı adlandırır.

    • CSS
    • React
    • Vue

65. 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ı).

    KVKK açık rıza TR

    kararlı

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

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

    • CSS
    • React
    • Vue
66. • Nüfus cüzdanı
    • İkametgâh belgesi
    • Son üç aylık maaş bordrosu

    1. e-Devlet ile giriş yapın.
    2. Başvuru formunu doldurun.
    3. Belgeleri yükleyin.

    • Başvurunuz alındıktan sonra 15 iş günü içinde değerlendirilir.
    • Eksik belge varsa SMS ile bilgilendirilirsiniz ve 10 gün ek süre verilir.

    Liste

    kararlı

    List · İçerik

    Madde işaretli, numaralı ve aralıklı liste biçimleri.

    • CSS
    • React
    • Vue
67. Adınız

    Nüfus cüzdanınızda yazdığı gibi yazın.

    Metin girişi

    kararlı

    Text input · Form

    Kullanıcının tek satırlık kısa bir metin girmesini sağlar.

    • CSS
    • React
    • Vue
68. Hangi belgeleri yükleyeceksiniz?

    Kimlik fotokopisi

    İkametgâh belgesi

    Onay kutusu

    kararlı

    Checkbox · Seçim

    Kullanıcının bir listeden birden çok seçenek seçmesini sağlar.

    • CSS
    • React
    • Vue

69. Ad soyad

    Ayşe Yılmaz

    Değiştir ad soyad

    Doğum tarihi

    27.03.1997

    Değiştir doğum tarihi

    Özet listesi

    kararlı

    Summary list · İçerik

    Kullanıcının girdiği bilgileri gönderim öncesinde tek sayfada gösterir.

    • CSS
    • React
    • Vue
70. Parolanız

    Göster

    Parola girişi

    kararlı

    Password input · Form

    Parola alanı. Kullanıcı yazdığını görmek için "Göster" düğmesine basar.

    • CSS
    • JavaScript
    • React
    • Vue

71. Paylaş

    Paylaş

    kararlı

    Share · Eylem

    Sayfayı sosyal medyada veya e-posta ile paylaşan bağlantılar. Haber ve duyuru sayfasının sonunda durur.

    • CSS
    • React
    • Vue
72. Araç plakası

    Örnek: 34 ABC 123

    Plaka girişi TR

    kararlı

    Licence plate input · Türkiye’ye özgü form

    Türk araç plakasını alır, büyük harfe çevirir ve biçimini denetler.

    • CSS
    • JavaScript
    • React
    • Vue
73. Bu hizmetten ne kadar memnun kaldınız?

    5 üzerinden 5 5 üzerinden 4 5 üzerinden 3 5 üzerinden 2 5 üzerinden 1

    Puanlama

    kararlı

    Rating · Seçim

    Bir hizmeti 1 ile 5 arasında puanlar. Beş seçenek düğmesi, yıldız görünümünde.

    • CSS
    • React
    • Vue
74. 

    Bu, Türkiye Cumhuriyeti’ne ait resmî bir devlet sitesidir.

    Nasıl anlarım?

    Resmî site afişi TR

    kararlı

    Masthead · Kimlik

    Sayfanın en üstünde durur ve kullanıcıya bu sitenin resmî bir devlet sitesi olduğunu söyler.

    • CSS
    • JavaScript
    • React
    • Vue
75. Bildirimler 12 Taslak Yeni Beta

    Rozet

    kararlı

    Badge · İçerik

    Bir öğenin yanında küçük bir sayı veya kısa bir kelime gösterir. Etiketten küçüktür.

    • CSS
    • React
    • Vue
76. Randevu saati

    24 saat biçimi. Örnek: 14 30

    Saat

    :

    Dakika

    Saat girişi

    kararlı

    Time input · Form

    Saat ve dakika için iki kısa alan. Tarih girişiyle aynı kalıp.

    • CSS
    • React
    • Vue
77. Sayfa içi gezinme

    kararlı

    In-page navigation · Gezinme

    Uzun bir sayfanın bölümlerini listeler ve her birine bağlantı verir.

    • CSS
    • React
    • Vue
78. Sayfa yolu

    kararlı

    Breadcrumb · Gezinme

    Kullanıcının site yapısında nerede olduğunu gösterir ve üst seviyeye dönmeyi sağlar.

    • CSS
    • React
    • Vue
79. Acil Sayfadan çık

    Shift tuşuna üç kez basmak da sayfadan çıkarır.

    Sayfadan çık

    kararlı

    Exit this page · Eylem

    Şiddet ve istismar konulu sayfalarda kullanıcının sayfayı bir dokunuşla terk etmesini sağlar.

    • CSS
    • JavaScript
    • React
    • Vue
80. Sayfalama

    kararlı

    Pagination · Gezinme

    Uzun bir listeyi sayfalara böler ve sayfalar arasında gezinmeyi sağlar.

    • CSS
    • React
    • Vue
81. Hanede yaşayan kişi sayısı

    Sayı girişi

    kararlı

    Number input · Form

    Sayı için tek satırlık alan. Metin türü ve sayısal klavye kullanır, sayı türü kullanmaz.

    • CSS
    • React
    • Vue
82. Başvuru türü

    Bireysel

    Kurumsal

    Seçenek düğmesi

    kararlı

    Radio · Seçim

    Kullanıcının birbirini dışlayan seçeneklerden birini seçmesini sağlar.

    • CSS
    • React
    • Vue
83. Emekli Çalışan İşveren Ankara

    Seçim etiketi

    kararlı

    Chip · Seçim

    Basılabilen küçük etiket. Süzgeç seçmek veya seçileni kaldırmak için.

    • CSS
    • JavaScript
    • React
    • Vue
84. <link type="image/svg+xml">

    Sekme simgesi

    gerekmiyor

    Favicon · Kimlik

    Tarayıcı sekmesinde ve yer imlerinde duran küçük simge. Kurumun arması, iki boyutta.
85. Genel Belgeler

    Başvurunuz 12 Mart 2026 tarihinde alındı.

    Sekmeler

    kararlı

    Tabs · Yerleşim

    Aynı alanda birbirini dışlayan içerik bölümleri arasında geçiş yapar.

    • CSS
    • JavaScript
    • React
    • Vue

86. Sağlık Bakanı’nın açıklaması, 6 Eylül 2026, 4 dakika

    Döküm

    Değerli basın mensupları, bugün Dikili Devlet Hastanesi’ni hizmete açıyoruz.

    Ses

    kararlı

    Audio · İçerik

    Ses kaydı ve altında dökümü. Tarayıcının kendi oynatıcısı kullanılır.

    • CSS
    • React
    • Vue

87. Sosyal güvenlik il müdürlükleri

    İl	Merkez sayısı	Çalışan
    İzmir	28	1.940
    Ankara	31	2.310
    Çanakkale	7	312
    İstanbul	52	4.120

    Sıralanabilir tablo

    kararlı

    Sortable table · İçerik

    Başlığa basınca sütuna göre sıralanan tablo. Sayı sütunları sayı olarak sıralanır.

    • CSS
    • JavaScript
    • React
    • Vue

88. Sağlık hizmetleri

    Simge

    kararlı

    Icon · İçerik

    e-Devlet resmî simge setinden bir simgeyi üç boyda gösterir. Yeni simge çizilmez.

    • CSS
    • React
    • Vue
89. e-Hizmetler

    Sorgulama, başvuru ve ödeme hizmetleri.

    Kurumlar

    Resmî kurumların hizmetleri ve iletişim bilgileri.

    Belediyeler

    Belediyelerin iletişim bilgileri ve hizmetleri.

    Simge kartı

    kararlı

    Icon card · Yerleşim

    Bir portalın ana bölümlerine giden büyük simgeli bağlantı. e-Devlet’in beş temel işlevi bu kalıptadır.

    • CSS
    • React
    • Vue
90. • T.C. kimlik kartı
    • İkametgâh belgesi, son 30 gün içinde alınmış
    • Bir e-posta adresi

    Simgeli liste

    kararlı

    Icon list · İçerik

    Her maddesi bir simge ile başlayan liste. Gerekli belgeler, koşullar.

    • CSS
    • React
    • Vue

91. Son güncelleme: 6 Eylül 2026

    Son güncelleme

    kararlı

    Date modified · İçerik

    Sayfanın en son ne zaman değiştiğini söyler. Her içerik sayfasının sonunda durur.

    • CSS
    • React
    • Vue

92. Başvurunuz alındı

    Başvuru numaranız2026-EM-004512

    Sonuç paneli

    kararlı

    Panel · Geri bildirim

    Bir işlemin bittiğini büyük ve yeşil söyler. Başvuru numarası bu kutuda durur.

    • CSS
    • React
    • Vue

93. 1. Belgeleri hazırlayın

       Kimlik kartı ve ikametgâh belgesi. İkisi de e-Devlet’ten alınır.

    2. Başvuruyu doldurun

       Form 10 dakika sürer. Kaydedip sonra devam edebilirsiniz.

    3. Sonucu bekleyin

       Sonuç 15 iş günü içinde e-Devlet’e düşer.

    Süreç listesi

    kararlı

    Process list · İçerik

    Bir işin adımlarını numaralı ve açıklamalı anlatır. Başvurudan önce okunur.

    • CSS
    • React
    • Vue
94. T.C. kimlik numaranız

    Nüfus cüzdanınızın ön yüzünde yazan 11 haneli numara.

    T.C. kimlik numarası girişi TR

    kararlı

    National identity number input · Türkiye’ye özgü form

    11 haneli T.C. kimlik numarasını alır, biçimini denetler ve sağlama toplamını doğrular.

    • CSS
    • JavaScript
    • React
    • Vue

95. Başvuru geçmişi

    Tarih	İşlem	Tutar
    12.03.2026	Başvuru alındı	0,00 ₺
    18.03.2026	Harç ödendi	1.250,00 ₺

    Tablo

    kararlı

    Table · İçerik

    Veriyi satır ve sütun olarak düzenler.

    • CSS
    • React
    • Vue

96. Bültene abone olun

    Ayda bir e-posta. İstediğiniz zaman ayrılın.

    E-posta adresiniz

    Abone ol

    Bizi takip edin

    Takip et

    kararlı

    Follow · İçerik

    Bülten kaydı ve sosyal medya hesapları tek blokta. Alt bilginin hemen üstünde durur.

    • CSS
    • React
    • Vue
97. Randevu tarihi

    GG.AA.YYYY. Örnek: 14.09.2026

    Takvim

    kararlı

    Date picker · Form

    Tarih alanının yanında bir takvim düğmesi. Alan yazılabilir kalır, takvim yardımcıdır.

    • CSS
    • JavaScript
    • React
    • Vue

98. Başvuru numarası

    2026-004512

    Başvuru tarihi

    12.03.2026

    Durum

    İnceleniyor

    Tanım listesi

    kararlı

    Description list · İçerik

    Terim ve karşılık çiftlerini gösterir. Düzenleme bağlantısı yoktur, o özet listesindedir.

    • CSS
    • React
    • Vue
99. Doğum tarihiniz nedir?

    Örnek: 27 03 1997

    Gün

    Ay

    Yıl

    Tarih girişi TR

    kararlı

    Date input · Türkiye’ye özgü form

    Gün, ay ve yıl için üç ayrı alan verir. Türkçe gg.aa.yyyy biçimini kullanır.

    • CSS
    • JavaScript
    • React
    • Vue
100. Cep telefonu numaranız

     Doğrulama kodu bu numaraya gönderilecek.

     +90

     Telefon girişi TR

     kararlı

     Phone input · Türkiye’ye özgü form

     +90 ülke kodunu sabit tutar ve 10 haneli numarayı alır.

     • CSS
     • JavaScript
     • React
     • Vue

101. Sosyal Güvenlik Kurumu

     Emeklilik başvurusu

     Yaş ve prim gün sayısı koşullarını sağlıyorsanız çevrim içi başvurun.

     Başvuru koşulları

     Yaş koşulu

     İstisnalar

     Tipografi

     kararlı

     Typography · İçerik

     Başlık, üst başlık, alt başlık, gövde ve etiket sınıfları. Dokuz kademeli ölçek.

     • CSS
     • React
     • Vue

102. Başvurunuz alındı. Başvuru numaranız: 2026-004512.

     Uyarı

     kararlı

     Alert · Geri bildirim

     Sayfa içinde bilgi, başarı, uyarı veya hata mesajı gösterir.

     • CSS
     • React
     • Vue
103. !

     Uyarı: Başvurunuzu 30 gün içinde tamamlamazsanız yeniden başlamanız gerekir.

     Uyarı metni

     kararlı

     Warning text · Geri bildirim

     Kullanıcının atlamaması gereken bir sonucu söyler. Para cezası, hak kaybı, süre.

     • CSS
     • React
     • Vue
104. Vergi kimlik numarası

     Vergi kimlik numarası girişi TR

     kararlı

     Tax number input · Türkiye’ye özgü form

     10 haneli vergi kimlik numarasını alır ve sağlama toplamını doğrular.

     • CSS
     • JavaScript
     • React
     • Vue
105. Dikili Devlet Hastanesi açılış töreni, 6 Eylül 2026, 12 dakika

     Döküm

     Törenin tam dökümü burada durur.

     Video

     kararlı

     Video · İçerik

     Altyazılı video ve altında dökümü. 16:9 kutu, sayfa zıplamaz.

     • CSS
     • React
     • Vue

106. Yurt dışında yaşıyorsanız başvurunuzu en yakın konsolosluk üzerinden yapın. Çevrim içi başvuru yurt dışı adresini kabul etmez.

     Vurgulu metin

     kararlı

     Inset text · İçerik

     Metnin geri kalanından ayrılması gereken bir paragrafı sol çizgiyle öne çıkarır.

     • CSS
     • React
     • Vue
107. Kurumunuzun web sitesi

     Örnek: ornek.com.tr

     Web adresi girişi

     kararlı

     URL input · Form

     Web adresi için tek satırlık alan. Telefonda nokta ve eğik çizgi tuşlu klavye açılır.

     • CSS
     • React
     • Vue
108. Yan menü

     kararlı

     Side navigation · Gezinme

     Bir bölümün alt sayfaları arasında gezinmeyi sağlar. İçeriğin solunda durur.

     • CSS
     • React
     • Vue
109. Süzgeçleri aç

     Alt sayfayı aç

     Yan panel

     kararlı

     Drawer · Yerleşim

     Kenardan kayan panel. Yardım metni, süzgeçler veya telefonda alt sayfa için. Altta açılan hali alt sayfadır.

     • CSS
     • JavaScript
     • React
     • Vue

110. Nüfus cüzdanınızın ön yüzünde yazan 11 haneli numara.

     Yardım metni

     kararlı

     Hint · Form

     Bir alanın nasıl doldurulacağını kısaca anlatır.

     • CSS
     • React
     • Vue

111. Bu paragrafın altında boşluk yok.

     Bu paragraf 6 birim üst boşluk taşır ve sağa yaslıdır.

     Bu paragraf telefonda görünmez.

     Yardımcı sınıflar

     kararlı

     Utility classes · Yerleşim

     Boşluk, hizalama ve görünürlük için tek işli sınıflar. Bileşen olmayan yerde kullanılır.

     • CSS
112. Bu sayfayı yazdır

     Yazdır

     kararlı

     Print button · Eylem

     Tarayıcının yazdırma penceresini açan düğme. Onay sayfasında ve belgelerde.

     • CSS
     • JavaScript
     • React
     • Vue
113. Sayfayı tanıt

     Başvurularım

     2 açık başvuru

     Belgelerim

     7 belge

     Mesajlar

     1 yeni mesaj

     Yönlendirme

     kararlı

     Coach mark · Geri bildirim

     İlk kullanımda sayfanın parçalarını sırayla tanıtır. Her adım bir hedefi halkalar ve yanında bir kutu açar.

     • CSS
     • JavaScript
     • React
     • Vue
114. Başvurunuz sorgulanıyor

     Yükleniyor

     kararlı

     Spinner · Geri bildirim

     Bir işlemin sürdüğünü ve süresinin bilinmediğini gösterir.

     • CSS
     • React
     • Vue
115. Randevu al

     Yüzen düğme

     kararlı

     Floating action button · Eylem

     Ekranın köşesinde her zaman görünen tek eylem. Telefonda "Randevu al" gibi.

     • CSS
     • React
     • Vue
116. 1. 4 Eylül 2026

        İnceleme başladı

        Başvurunuz Emeklilik Hizmetleri Genel Müdürlüğüne iletildi.

     2. 2 Eylül 2026

        Belgeler alındı

        3 belge yüklendi.

     3. 1 Eylül 2026

        Başvuru oluşturuldu

     Zaman çizelgesi

     kararlı

     Timeline · İçerik

     Bir başvurunun geçtiği adımları tarih sırasıyla gösterir. En yenisi en üstte.

     • CSS
     • React
     • Vue

Bu süzgeçlere uyan bileşen yok. Süzgeçleri temizleyin veya başka bir ad deneyin.

Bir bileşen eksik mi

Bir bileşenin sisteme girmesi için beş ölçütü karşılaması gerekir: yararlı, benzersiz, kullanılabilir, tutarlı ve çok yönlü. Öneriyi bileşen önerisi olarak açın. Ölçütler yönetişim sayfasında yazılıdır.