{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/tr/docs/custom-inputs",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/custom-inputs","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Custom Inputs","markdown":"\nFor using our customized inputs, you need to use `.gra-custom-form-input` class for input, `.gra-custom-form-label` class for label and `.gra-custom-form-control` class for the wrapper.\n\nIn addition, as you will see in the examples below, you should use the name of the relevant input next to the container class.\n\n## Checkbox\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-custom-form-control gra-checkbox\">\n    <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\"  />\n    <label class=\"gra-custom-form-label\" for=\"user-content-custom-checkbox\">Checkbox</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-checkbox\">\n    <input class=\"gra-custom-form-input\" id=\"custom-checkbox-2\" type=\"checkbox\" disabled checked/>\n    <label class=\"gra-custom-form-label\" for=\"custom-checkbox-2\">Checkbox Disabled</label>\n  </div>\n</div>\n\n```html\n<div class=\"gra-custom-form-control gra-checkbox\">\n  <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\"  />\n  <label class=\"gra-custom-form-label\" for=\"custom-checkbox\">Checkbox</label>\n</div>\n<div class=\"gra-custom-form-control gra-checkbox\">\n  <input class=\"gra-custom-form-input\" id=\"custom-checkbox-2\" type=\"checkbox\" disabled checked/>\n  <label class=\"gra-custom-form-label\" for=\"custom-checkbox-2\">Checkbox Disabled</label>\n</div>\n```\n\n[More Examples](/docs/checkbox 'More Examples')\n\n## Radio\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"radio-group\" role=\"radiogroup\">\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio\" type=\"radio\" name=\"radio-c\" />\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio\">Radio - 1</label>\n    </div>\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio-2\" type=\"radio\" name=\"radio-c\" />\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-2\">Radio - 2</label>\n    </div>\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio-3\" type=\"radio\" name=\"radio-c\" disabled/>\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-3\">Radio Disabled</label>\n    </div>\n  </div>\n</div>\n\n```html\n<div role=\"radiogroup\">\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio\" type=\"radio\" name=\"radio-c\" />\n    <label class=\"gra-custom-form-label\" for=\"custom-radio\">Radio - 1</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio-2\" type=\"radio\" name=\"radio-c\" />\n    <label class=\"gra-custom-form-label\" for=\"custom-radio-2\">Radio - 2</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio-3\" type=\"radio\" name=\"radio-c\" disabled/>\n    <label class=\"gra-custom-form-label\" for=\"custom-radio-3\">Radio Disabled</label>\n  </div>\n</div>\n```\n\n[More Examples](/docs/radio 'More Examples')\n\n## Switch\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-custom-form-control gra-switch\">\n    <input class=\"gra-custom-form-input\" id=\"custom-switch\" type=\"checkbox\" name=\"\" />\n    <label class=\"gra-custom-form-label\" for=\"user-content-custom-switch\">Switch</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-switch\">\n    <input class=\"gra-custom-form-input\" id=\"switch-disable\" type=\"checkbox\" disabled checked />\n    <label class=\"gra-custom-form-label\" for=\"switch-disable\">Switch Disabled</label>\n  </div>\n</div>\n\n```html\n<div class=\"gra-custom-form-control gra-switch\">\n  <input class=\"gra-custom-form-input\" id=\"custom-switch\" type=\"checkbox\" name=\"\" />\n  <label class=\"gra-custom-form-label\" for=\"custom-switch\">Switch</label>\n</div>\n<div class=\"gra-custom-form-control gra-switch\">\n  <input class=\"gra-custom-form-input\" id=\"switch-disable\" type=\"checkbox\" disabled checked />\n  <label class=\"gra-custom-form-label\" for=\"switch-disable\">Switch Disabled</label>\n</div>\n```\n\n[More Examples](/docs/switch 'More Examples')\n","mdtype":"MDHTML","section":"custom-inputs"},{"lang":"tr","title":"Özel İnputlar","markdown":"\nÖzelleştirilmiş inputları kullanırken input tagine `.gra-custom-form-input` classını, label tagine `.gra-custom-form-label` classını ve kapsayıcısına da `.gra-custom-form-control` classını vermelisiniz.\n\nBunun yanı sıra, aşağıdaki örneklerde de göreceğiniz gibi kapsayıcı classının yanında ilgili inputun adını kullanmalısınız. (Örn: gra-checkbox)\n\n## Onay Butonu\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-custom-form-control gra-checkbox\">\n    <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\"  />\n    <label class=\"gra-custom-form-label\" for=\"user-content-custom-checkbox\">Onay Butonu</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-checkbox\">\n    <input class=\"gra-custom-form-input\" id=\"custom-checkbox-2\" type=\"checkbox\" disabled checked />\n    <label class=\"gra-custom-form-label\" for=\"custom-checkbox-2\">Onay Butonu Devre Dışı</label>\n  </div>\n</div>\n\n```html\n<div class=\"gra-custom-form-control gra-checkbox\">\n  <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\"  />\n  <label class=\"gra-custom-form-label\" for=\"custom-checkbox\">Onay Butonu</label>\n</div>\n<div class=\"gra-custom-form-control gra-checkbox\">\n  <input class=\"gra-custom-form-input\" id=\"custom-checkbox-2\" type=\"checkbox\" disabled checked />\n  <label class=\"gra-custom-form-label\" for=\"custom-checkbox-2\">Onay Butonu Devre Dışı</label>\n</div>\n```\n\n[Daha fazla örnek](/docs/checkbox 'Daha Fazla')\n\n\n## Radyo Buton\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"radio-group\" role=\"radiogroup\">\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio\" type=\"radio\" name=\"radio-c\" />\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio\">Radyo - 1</label>\n    </div>\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio-2\" type=\"radio\" name=\"radio-c\" />\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-2\">Radyo - 2</label>\n    </div>\n    <div class=\"gra-custom-form-control gra-radio\">\n      <input class=\"gra-custom-form-input\" id=\"custom-radio-3\" type=\"radio\" name=\"radio-c\" disabled />\n      <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-3\">Radyo Devre Dışı</label>\n    </div>\n  </div>\n</div>\n\n```html\n<div role=\"radiogroup\">\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio\" type=\"radio\" name=\"radio-c\" />\n    <label class=\"gra-custom-form-label\" for=\"custom-radio\">Radyo - 1</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio-2\" type=\"radio\" name=\"radio-c\" />\n    <label class=\"gra-custom-form-label\" for=\"custom-radio-2\">Radyo - 2</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-radio\">\n    <input class=\"gra-custom-form-input\" id=\"custom-radio-3\" type=\"radio\" name=\"radio-c\" disabled />\n    <label class=\"gra-custom-form-label\" for=\"custom-radio-3\">Radyo Devre Dışı</label>\n  </div>\n</div>\n```\n\n[Daha fazla örnek](/docs/radio 'Daha Fazla')\n\n## Anahtar\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-custom-form-control gra-switch\">\n    <input class=\"gra-custom-form-input\" id=\"custom-switch\" type=\"checkbox\"  />\n    <label class=\"gra-custom-form-label\" for=\"user-content-custom-switch\">Anahtar</label>\n  </div>\n  <div class=\"gra-custom-form-control gra-switch\">\n    <input class=\"gra-custom-form-input\" id=\"switch-disable\" type=\"checkbox\" disabled checked />\n    <label class=\"gra-custom-form-label\" for=\"user-content-switch-disable\">Anahtar Devre Dışı</label>\n  </div>\n</div>\n\n```html\n<div class=\"gra-custom-form-control gra-switch\">\n  <input class=\"gra-custom-form-input\" id=\"custom-switch\" type=\"checkbox\"  />\n  <label class=\"gra-custom-form-label\" for=\"custom-switch\">Anahtar</label>\n</div>\n<div class=\"gra-custom-form-control gra-switch\">\n  <input class=\"gra-custom-form-input\" id=\"switch-disable\" type=\"checkbox\" disabled checked />\n  <label class=\"gra-custom-form-label\" for=\"switch-disable\">Anahtar Devre Dışı</label>\n</div>\n```\n\n[Daha fazla örnek](/docs/switch 'Daha Fazla')\n","mdtype":"MDHTML","section":"custom-inputs"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/custom-inputs/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/custom-inputs","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}