{
    "componentChunkName": "component---src-templates-doc-template-js",
    "path": "/tr/docs/form",
    "result": {"data":{"current":{"fields":{"page":{"path":"/docs/form","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Form","markdown":"\nGralig provides simple form elements including custom [checkboxes](/docs/checkbox), [radio buttons](/docs/radio), [switches](/docs/switch) along with simple inputs.\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-form-group\">\n    <label for=\"user-content-test-input-text\">Name</label>\n    <input id=\"test-input-text\" type=\"text\" placeholder=\"Name\" />\n  </div>\n</div>\n\n```html\n<div class=\"gra-form-group\">\n  <label for=\"test-input-text\">Name</label>\n  <input id=\"test-input-text\" type=\"text\" placeholder=\"Name\" />\n</div>\n```\n\n## Simple Form Example\n\n<div class=\"gra-doc-s-wrapper\">\n  <fieldset class=\"example-form\">\n    <legend>\n      <h5 class=\"gra-heading\">Gralig Form</h5>\n    </legend>\n    <div class=\"gra-form-group\">\n      <label for=\"user-content-test-form-input-text\">Name</label>\n      <input id=\"test-form-input-text\" type=\"text\" placeholder=\"Name\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label for=\"user-content-test-form-input-email\">Email</label>\n      <input id=\"test-form-input-email\" type=\"email\" placeholder=\"Email\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Disabled</label>\n      <input type=\"text\" placeholder=\"disabled\" disabled />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Subscribe</label>\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\" />\n          <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio\">Yes</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\" />\n          <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-2\">No</label>\n        </div>\n      </div>\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Accept Terms</label>\n      <div class=\"gra-custom-form-control gra-checkbox\">\n        <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\" name=\"checkbox\" />\n        <label class=\"gra-custom-form-label\" for=\"user-content-custom-checkbox\">Accept</label>\n      </div>\n    </div>\n    <div class=\"gra-form-actions\">\n      <button class=\"gra-btn\">Send</button>\n      <button class=\"gra-btn gra-btn-clear\">Cancel</button>\n    </div>\n  </fieldset>\n</div>\n\n```html\n<form>\n  <fieldset class=\"example-form\">\n    <legend>\n      <h5 class=\"gra-heading\">Gralig Form</h5>\n    </legend>\n    <div class=\"gra-form-group\">\n      <label for=\"test-text\">Name</label>\n      <input id=\"test-text\" type=\"text\" placeholder=\"Name\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label for=\"test-email\">Email</label>\n      <input id=\"test-email\" type=\"email\" placeholder=\"Email\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Disabled</label>\n      <input type=\"text\" placeholder=\"Disabled\" disabled />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Subscribe</label>\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\" />\n          <label class=\"gra-custom-form-label\" for=\"custom-radio\">Yes</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\" />\n          <label class=\"gra-custom-form-label\" for=\"custom-radio-2\">No</label>\n        </div>\n      </div>\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Accept Terms</label>\n      <div class=\"gra-custom-form-control gra-checkbox\">\n        <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\" name=\"checkbox\" />\n        <label class=\"gra-custom-form-label\" for=\"custom-checkbox\">Accept</label>\n      </div>\n    </div>\n    <div class=\"gra-form-actions\">\n      <button class=\"gra-btn\">Send</button>\n      <button class=\"gra-btn gra-btn-clear\">Cancel</button>\n    </div>\n  </fieldset>\n</form>\n```\n\n## Search Input\n\n<div class=\"gra-doc-s-wrapper\">\n  <span class=\"gra-search-input\">\n    <input type=\"search\" name=\"search\" placeholder=\"Search...\" />\n  </span>\n</div>\n\n```html\n<span class=\"gra-search-input\">\n  <input type=\"search\" name=\"search\" placeholder=\"Search...\" />\n</span>\n```\n\n## Textarea\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-form-group\">\n    <label for=\"user-content-textarea\">Textarea Label</label>\n    <textarea id=\"textarea\" name=\"textarea\" placeholder=\"Textarea content here...\"></textarea>\n  </div>\n</div>\n\n```html\n<div class=\"gra-form-group\">\n  <label for=\"textarea\">Textarea Label</label>\n  <textarea id=\"textarea\" name=\"textarea\" placeholder=\"Textarea content here...\"></textarea>\n</div>\n```","mdtype":"MDHTML","section":"form"},{"lang":"tr","title":"Form","markdown":"\nGralig özelleştirilmiş [onay butonları](/docs/checkbox), [radyo butonları](/docs/radio), [anahtar butonları](/docs/switch) ve basit inputlar içeren form öğeleri sağlar.\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-form-group\">\n    <label for=\"user-content-test-input-text\">Adınız</label>\n    <input id=\"test-input-text\" type=\"text\" placeholder=\"Adınız\" />\n  </div>\n</div>\n\n```html\n<div class=\"gra-form-group\">\n  <label for=\"test-input-text\">Adınız</label>\n  <input id=\"test-input-text\" type=\"text\" placeholder=\"Adınız\" />\n</div>\n```\n\n## Basit Form Örneği\n\n<div class=\"gra-doc-s-wrapper\">\n  <fieldset class=\"example-form\">\n    <legend>\n      <h5 class=\"gra-heading\">Gralig Form</h5>\n    </legend>\n    <div class=\"gra-form-group\">\n      <label for=\"user-content-test-form-input-text\">Adınız</label>\n      <input id=\"test-form-input-text\" type=\"text\" placeholder=\"Adınız\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label for=\"user-content-test-form-input-email\">Email Adresiniz</label>\n      <input id=\"test-form-input-email\" type=\"email\" placeholder=\"Email Adresiniz\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Devre Dışı</label>\n      <input type=\"text\" placeholder=\"Devre Dışı\" disabled />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Abone Olun</label>\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\" />\n          <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio\">Evet</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\" />\n          <label class=\"gra-custom-form-label\" for=\"user-content-custom-radio-2\">Hayır</label>\n        </div>\n      </div>\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Kullanım Şartları</label>\n      <div class=\"gra-custom-form-control gra-checkbox\">\n        <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\" name=\"checkbox\" />\n        <label class=\"gra-custom-form-label\" for=\"user-content-custom-checkbox\">Onay</label>\n      </div>\n    </div>\n    <div class=\"gra-form-actions\">\n      <button class=\"gra-btn\">Gönder</button>\n      <button class=\"gra-btn gra-btn-clear\">İptal Et</button>\n    </div>\n  </fieldset>\n</div>\n\n```html\n<form>\n  <fieldset class=\"example-form\">\n    <legend>\n      <h5 class=\"gra-heading\">Gralig Form</h5>\n    </legend>\n    <div class=\"gra-form-group\">\n      <label for=\"test-text\">Adınız</label>\n      <input id=\"test-text\" type=\"text\" placeholder=\"Adınız\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label for=\"test-email\">Email Adresiniz</label>\n      <input id=\"test-email\" type=\"email\" placeholder=\"Email Adresiniz\" />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Devre Dışı</label>\n      <input type=\"text\" placeholder=\"Devre Dışı\" disabled />\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Abone Olun</label>\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\" />\n          <label class=\"gra-custom-form-label\" for=\"custom-radio\">Evet</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\" />\n          <label class=\"gra-custom-form-label\" for=\"custom-radio-2\">Hayır</label>\n        </div>\n      </div>\n    </div>\n    <div class=\"gra-form-group\">\n      <label>Kullanım Şartları</label>\n      <div class=\"gra-custom-form-control gra-checkbox\">\n        <input class=\"gra-custom-form-input\" id=\"custom-checkbox\" type=\"checkbox\" name=\"checkbox\" />\n        <label class=\"gra-custom-form-label\" for=\"custom-checkbox\">Onay</label>\n      </div>\n    </div>\n    <div class=\"gra-form-actions\">\n      <button class=\"gra-btn\">Gönder</button>\n      <button class=\"gra-btn gra-btn-clear\">İptal Et</button>\n    </div>\n  </fieldset>\n</form>\n```\n\n## Arama Çubuğu\n\n<div class=\"gra-doc-s-wrapper\">\n  <span class=\"gra-search-input\">\n    <input type=\"search\" name=\"search\" placeholder=\"Ara...\" />\n  </span>\n</div>\n\n```html\n<span class=\"gra-search-input\">\n  <input type=\"search\" name=\"search\" placeholder=\"Ara...\" />\n</span>\n```\n\n## Metin Alanı\n\n<div class=\"gra-doc-s-wrapper\">\n  <div class=\"gra-form-group\">\n    <label for=\"user-content-textarea\">Metin Alanı</label>\n    <textarea id=\"textarea\" name=\"textarea\" placeholder=\"Metninizi yazın...\"></textarea>\n  </div>\n</div>\n\n```html\n<div class=\"gra-form-group\">\n    <label for=\"textarea\">Metin Alanı</label>\n    <textarea id=\"textarea\" name=\"textarea\" placeholder=\"Metninizi yazın...\"></textarea>\n  </div>\n```\n","mdtype":"MDHTML","section":"form"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/form/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/form","redirect":false,"defaultLanguage":"en"}}},
    "staticQueryHashes": ["63159454"]}