{"_id":"primer-forms","_rev":"910-c6559876d102b5f7230d4b604c772915","name":"primer-forms","dist-tags":{"mono":"1.0.7-mono.0","monotest":"1.0.7-monotest.0","monobeta":"1.0.7-monobeta.0","themyscira":"1.0.7-themyscira.0","alpha":"1.0.8-0","beta":"1.0.8-1","canary":"1.1.0-alpha.9d047e94","rc":"3.1.0-alpha.82c06bb2","latest":"3.0.0","pr":"3.1.0-alpha.df004242"},"versions":{"0.2.0":{"name":"primer-forms","version":"0.2.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.2.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"37aaf0817a51687f3d8da2b1caaad7efc9b5e9ba","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.2.0.tgz","integrity":"sha512-MPeD2+MNJHUDYzEC79lnl+33zKrjR6YgH/4siAdsm0P0ouKITtCjkPeENCjUQqCt1t47UzwpZKlYdz8FSROGUg==","signatures":[{"sig":"MEYCIQDBYvyCUyTxkGEMvQoZec5edfkhuaXER8CujznZJcaNkQIhAPcNHcOf1k0yDZH9Ubmrmh7kcLwiERP2mjdHDFI1xsSs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib"],"style":"index.scss","_shasum":"37aaf0817a51687f3d8da2b1caaad7efc9b5e9ba","gitHead":"c62c6c9d61e78ddb58be8e6fa7eedfbebb7982eb","scripts":{"lint":"scss-lint **/*.scss","test":"npm run lint","build":"npm run setup && npm run preprocess","setup":"npm install","preprocess":"node-sass index.scss --include-path node_modules | postcss -c .postcss.json -o build/build.css"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.11.1","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.2.0.tgz_1464179865722_0.026964489836245775","host":"packages-16-east.internal.npmjs.com"}},"0.2.1":{"name":"primer-forms","version":"0.2.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.2.1","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"699896c95845046e33d55f30978b8a1d9c3da4ec","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.2.1.tgz","integrity":"sha512-HGaa54Hj7LVFWSBCo7VcChp90DGoHY+wFtEZnvh7kq60dEGv0h58wHXkjalb+tK0c/u+nnRbq5J+o0SfV83XBA==","signatures":[{"sig":"MEQCIAnOBJzkcIjRYRREbmg/3bL/EGGOrqKxjPAyfO5Rrl1gAiAN/pVOjQnxn5JGcrYk+c11d7GoDxorFqxOI5nJ4ikpOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib"],"style":"index.scss","_shasum":"699896c95845046e33d55f30978b8a1d9c3da4ec","gitHead":"25ea718fc8535cfbd446e534c49888f712a822a4","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run lint","build":"npm run setup && npm run preprocess","setup":"npm install","preprocess":"node-sass index.scss --include-path node_modules | postcss -c .postcss.json -o build/build.css"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.11.1","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^6.5.1","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-value-border-zero":"^1.0.2","stylelint-at-rule-import-path":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.2.1.tgz_1464383234640_0.6153089636936784","host":"packages-16-east.internal.npmjs.com"}},"0.2.2":{"name":"primer-forms","version":"0.2.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.2.2","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"1ace3b6cb560ff8c5647b2725a7ef7ee99d499d0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.2.2.tgz","integrity":"sha512-TjynikQ2lUmtbPVlJtRXxMIICumluBCKjRSdU1nSGalNMlGwQl0EMFMMI+HKtm/4l7721dfpdrDfUSkfisEzXQ==","signatures":[{"sig":"MEUCIB2uXKP4Fcq1budNHtwv8CLUZsfdDc6SWUmme/PUKBBpAiEAneKIssDsv5OUbLqhQztG5yHxwVXd6BXeUAH7e0wl8XE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"1ace3b6cb560ff8c5647b2725a7ef7ee99d499d0","gitHead":"b7de35d6518a4302383b51fa6fdd9cd45b12f2b0","scripts":{"test":"stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.11.1","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^6.5.1","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-value-border-zero":"^1.0.2","stylelint-at-rule-import-path":"^1.0.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.2.2.tgz_1464877115123_0.9467579119373113","host":"packages-16-east.internal.npmjs.com"}},"0.3.0":{"name":"primer-forms","version":"0.3.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.3.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"8df57a9e9cd1d87ac0e24aba106b544bd369fddc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.3.0.tgz","integrity":"sha512-reKg0J+dz3g0GWAPfbp7pvIq0VuB9rN3lBCj+Ce8ny2sU4B0BDNEFh4tOtZ7DUZSVM7y9DXyNhzicZTAep6p5g==","signatures":[{"sig":"MEUCIQDjgIrdjU/DnS+Z8U42Q12SE5ERnADtMck3sakJdg2/pAIgaXQxyvim7I/sP/lpqkj/pBPLQHZD1ZIutKEtqPXJKxQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"8df57a9e9cd1d87ac0e24aba106b544bd369fddc","gitHead":"251246556fed2dbeb8bfe218e6561794217668d9","scripts":{"test":"stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.12.0","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^6.6.0","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-config-primer":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.3.0.tgz_1467722997655_0.4661897448822856","host":"packages-12-west.internal.npmjs.com"}},"0.4.0":{"name":"primer-forms","version":"0.4.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.4.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"d0440bf5c5fbc8c76d7c0cfa894ef536fde84364","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.4.0.tgz","integrity":"sha512-mvvvQ9W4KHLGbAg5a1x8uso3f+2KmsdnPRu9mF3ydmWoH4C7F9RhDettTSR+3FIeQHwHdREzwYxJ//SYwLZUfw==","signatures":[{"sig":"MEQCIGoiOUAalrXQ0sxB2GlDi6C2CPRNrN+Uy70WGjWNLLT6AiAwoahI1mg55r4i6Xa3x1AiqunihyYReI3F3KLg/lk8ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d0440bf5c5fbc8c76d7c0cfa894ef536fde84364","gitHead":"7350afedf4aadc376ccd03e274e9f511b44ba5aa","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.12.0","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^6.6.0","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-config-primer":"^1.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.4.0.tgz_1468514121443_0.7508342727087438","host":"packages-16-east.internal.npmjs.com"}},"0.5.0":{"name":"primer-forms","version":"0.5.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.5.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/forms/issues"},"dist":{"shasum":"6f67e4d15b77af77e0f1141beaa12a7582a92f62","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.5.0.tgz","integrity":"sha512-okCrT6qirIP37u+1yJdnO3ytwsMCaGXHRA+kLws+VF8pFHOHsSoSkmHj3n0FdiWqKWSCUnb9oKOW8I3Swrfr3w==","signatures":[{"sig":"MEUCIQDAeGgwMZBSIhLepcwJU2qiZ9CdsK8tuhPqLM7h/80roAIgKEGdO5mUIsdhP3CsC/sH3xIYbL2mZIPjWIPCKlSxDaQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"6f67e4d15b77af77e0f1141beaa12a7582a92f62","gitHead":"9271898a34174f623c040ba657d99bc67eab1b71","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.12.0","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^7.0.3","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-config-primer":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.5.0.tgz_1471631105280_0.2605833422858268","host":"packages-16-east.internal.npmjs.com"}},"0.6.0":{"name":"primer-forms","version":"0.6.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.6.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"7acf650d3eb88de7d9f799ae885aea4a1d62bca4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.6.0.tgz","integrity":"sha512-/pOitOx5QJWisxw8uncGIzkjFCbHRYmTs4vdDPvzByL/e2R5+1SzVjaXW4KmxR9NGYr6xnKwa/I/+9haj5BjaA==","signatures":[{"sig":"MEQCIEaW17FeP74B3mDDR3IZvlgfdLyIH1CKgE4tC6M7J5MyAiA3anNW4T/0e26V4NG+LYSLbTQoAq/T4Wp5Xs0n8/328w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"7acf650d3eb88de7d9f799ae885aea4a1d62bca4","gitHead":"e77f38dbe368996b4ce05e7df663bdfc9aebea85","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.12.0","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^7.0.3","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-config-primer":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.6.0.tgz_1478177919026_0.9527204192709178","host":"packages-12-west.internal.npmjs.com"}},"0.7.0":{"name":"primer-forms","version":"0.7.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.7.0","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"c36ca1d89dbdea82cd176e736ca79911e7db7a48","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.7.0.tgz","integrity":"sha512-0lUd/lq+BVO6iTaBF2gubNQPtPONGQ8m8HNf6pF116wLM4W3VaPv0a20s/DwBjPv/ic8MCcZs0Z5EM3s7/OWPg==","signatures":[{"sig":"MEYCIQDCx5LMABErmumz5acIDFzGpuvejIFbFHrEyEX0Iqw+/wIhAOn2m/ftemFpFLsqjrw75WY9V7izwqHZ9tduxXv6pmR3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c36ca1d89dbdea82cd176e736ca79911e7db7a48","gitHead":"7458d1917a2cd88e743fc408918e3d09f2fb4521","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"node-sass index.scss --include-path node_modules --output-style compressed | postcss -c .postcss.json -o build/build.css","setup":"if [ ! -d \"node_modules\" ]; then npm install; fi","prepublish":"npm run setup && npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"3.8.6","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"5.12.0","dependencies":{"primer-support":"*"},"devDependencies":{"node-sass":"^3.7.0","stylelint":"^7.0.3","postcss-cli":"^2.5.2","autoprefixer":"^6.3.6","stylelint-config-primer":"^1.1.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.7.0.tgz_1484355412807_0.8189200153574347","host":"packages-12-west.internal.npmjs.com"}},"0.7.1":{"name":"primer-forms","version":"0.7.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.7.1","maintainers":[{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"dc382f9d64c3f08c01d4d4ccc64d887c3f83e20e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.7.1.tgz","integrity":"sha512-yvguZs60KLE7Wc2LmjQiFod0li7aQHPu/FpHTok6JLveUWi2NH3IrvKt26QEB4Z4wxOuK4VNOgnAMtUkOBRQKQ==","signatures":[{"sig":"MEUCIQCuxM0vIyIbF9moExjYlndXm2qzSxpwHW2/NA4aBhwIJQIgGB6xNMvZyJ35JpUTWSZWVRqG+Luzx6vljB+oOhKcASc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"dc382f9d64c3f08c01d4d4ccc64d887c3f83e20e","gitHead":"a73ec0356a1cfc655e5a1740ddd43fac94392f9c","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.0.5","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.4.0","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.7.1.tgz_1484826784062_0.9366119524929672","host":"packages-12-west.internal.npmjs.com"}},"0.7.2":{"name":"primer-forms","version":"0.7.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.7.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"f51608c126853ef47ce3e40be6a42315825de367","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.7.2.tgz","integrity":"sha512-FPNNPYjh4XKkXb5clLQsVZdqlbO1Az/7oSAj+Kul+BQ6tTqpP20bQG7h09+EQTJo7K1N0Gh9WilUXLzyMJWwRQ==","signatures":[{"sig":"MEUCIQCK1ZpieSgLYUdx8sq/zvqs0ryYP6LlznCsKwBHpgQMTAIgQbimxfrPNj8JqwYikTqYE0lKoejbolDzFUSrBXj+qEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"f51608c126853ef47ce3e40be6a42315825de367","gitHead":"2784bc8fc55f65cd1901bd047e616b72006e1952","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.0.5","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.4.0","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.7.2.tgz_1485397923931_0.32982634752988815","host":"packages-18-east.internal.npmjs.com"}},"0.7.3":{"name":"primer-forms","version":"0.7.3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@0.7.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"eb7bea2af904cdbb24de9944d75dc68c450afb80","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-0.7.3.tgz","integrity":"sha512-FSI3/RhqSTk1NE/2U4ZT/3rAQ9wzX5bmnSX6e2KmiMORut9ZCsBtzlG5lJlAcEKwqQ4pIuM8zE8nw1SEHre0vw==","signatures":[{"sig":"MEUCIQDFNe9AsOlkhkIBbcvJRaItRzG45LaEI/xqgi71aOE8CwIgNaqh42tSZmgGwf1B7LNDYDEL4XTUtdVn4pUCatK1Z8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"eb7bea2af904cdbb24de9944d75dc68c450afb80","gitHead":"8d202a092706a0cb7cc2162e05b62ea22ea27f1d","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.1.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.5.0","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-0.7.3.tgz_1486415325734_0.5257813173811883","host":"packages-18-east.internal.npmjs.com"}},"1.0.3":{"name":"primer-forms","version":"1.0.3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"3e5993e2fa7544ddc822670acb75ff2cb69136a5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.3.tgz","integrity":"sha512-p1dfHjK4D68aqPuew2NVszUHE+gGOLtjBbUATCWr5ODIgk56NyIqYXFPsw+Dxmxyg6m31mWAGNAkRtVY4yEIAA==","signatures":[{"sig":"MEUCIQDbgR4TT8iLAEBFukVqmAeP3FR5AjSnEiOlkM9CJJFZNwIgUSTYSpN5j536IEWjava1D/5PA2qBGqJ83G3kDEPnxsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"3e5993e2fa7544ddc822670acb75ff2cb69136a5","gitHead":"528a9bff2195f5e324f316446a2506f02ffea51a","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.1.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.7.1","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.3.tgz_1488583817532_0.009077001130208373","host":"packages-18-east.internal.npmjs.com"}},"1.0.4":{"name":"primer-forms","version":"1.0.4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"4bd04fd05dbc9d416fa94da5fbfa2570cfcb9421","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.4.tgz","integrity":"sha512-frNxc/vIFUYUuOwSNCRSZUxBzWP4HR+QICaHt/C9aqRabucLyqvHLHVjv4x+QuFkYR5n8Qflb1/EWD90yBWBBw==","signatures":[{"sig":"MEYCIQDLX2uIhmwmGEh7/EiUOXJU6Vpsv6NJ1pkOobG5+lVf2wIhAItssjGX8d8HFeaQECK1RtAwJVvvXLlSr+sB15yS8T64","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4bd04fd05dbc9d416fa94da5fbfa2570cfcb9421","gitHead":"c37e57e9ac72bd4f6c5cc198d1b5a66b2c064fae","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.1.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.7.1","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.4.tgz_1488595155177_0.8959723226726055","host":"packages-18-east.internal.npmjs.com"}},"1.0.5":{"name":"primer-forms","version":"1.0.5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"5b666489c2aabe6acd67d21e335f83e221587a12","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.5.tgz","integrity":"sha512-TQDllFbMZH5IkIxg4KQ1atDeNl/5P5rgFsPkFPsgRUp9UXwpnUfbkU2WbO6mQllHPaDp2mnEEb3OcG742zQOBg==","signatures":[{"sig":"MEUCIEg8aa7cQXeNb7TnIY1c0mHVxPrA9r/xvuwtGLnE3m70AiEA0xxUhJ2bFO5x5qRj/8/TH3mAHv5QviKREPT8jwGjVcQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5b666489c2aabe6acd67d21e335f83e221587a12","gitHead":"5dc3f984cf79066a417741b043d31f881f5b25f8","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.1.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.7.3","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.5.tgz_1490108549730_0.837647783337161","host":"packages-18-east.internal.npmjs.com"}},"1.0.6":{"name":"primer-forms","version":"1.0.6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-forms/issues"},"dist":{"shasum":"473db3826146ffd8da1698f86a5517a560b63590","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.6.tgz","integrity":"sha512-4GXZo/T/jrLP3lR94AbxFxBts7is6ZuCz7FqEq1qf3fK+CiLRgmW/WQFtAFtAvy03NAxXkOE/tSw15KK4OU8sw==","signatures":[{"sig":"MEYCIQDE+G3yFaTwp+A5cmIfDfeO1rWCU6Ggffi07N/zMfhNnwIhALO2/4R79QNFaDOlDk3ejLmVY63FdtERmyr3Y52PJjN3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"473db3826146ffd8da1698f86a5517a560b63590","gitHead":"a0bdc9b1d60ef019bbaa546fde43eef022e1b6ba","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"git+https://github.com/primer/primer-forms.git","type":"git"},"_npmVersion":"4.1.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.7.3","dependencies":{"primer-support":"*"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.6.tgz_1490129621060_0.7725227565970272","host":"packages-12-west.internal.npmjs.com"}},"1.0.7-mono.0":{"name":"primer-forms","version":"1.0.7-mono.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.7-mono.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"65b89bf79a4da20b63c43a1fec889a07aa344557","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.7-mono.0.tgz","integrity":"sha512-m5lDVm5AYpGWiREm+WIpDqtkifP0f/DW1iTNDslI168Wq7IGZzYwg43UQnK0gigEAdzksOQfQQBgKCbt038dQw==","signatures":[{"sig":"MEYCIQCfc1eoQ8rQ8WCgMnqaIzej6uKQbFlhFHIJNerMAwgA/AIhAIevtU3MSDZ8euLv8LOAtaAmwRoLcQhSqs4en5EM0Jf3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.1-mono.0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.7-mono.0.tgz_1496951317774_0.1670220207888633","host":"s3://npm-registry-packages"}},"1.0.7-monotest.0":{"name":"primer-forms","version":"1.0.7-monotest.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.7-monotest.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cd74f83eb2098a6dda37972ce17d98d4c3ab8b3f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.7-monotest.0.tgz","integrity":"sha512-rI7rkBhW+Mht/P//n7a7ITbZ9NlL4VXnPfv0l6KSy0o2arm9b2MSzMJZFV8SJJWzwUyBhTvStUiVWDd8ClQtFQ==","signatures":[{"sig":"MEQCIAcdHBffumAen/AdgBFKdGc/xJ5UjHrx0M7AN0BVP5yDAiBUEHulm1XE2jgaaA0N33KwKW+4WwIhyaVsDhXGga2rCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepublish":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.1-monotest.0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.7-monotest.0.tgz_1497197204114_0.0037894558627158403","host":"s3://npm-registry-packages"}},"1.0.7-monobeta.0":{"name":"primer-forms","version":"1.0.7-monobeta.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.7-monobeta.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d2b13aab169d98fb39fcf921e16fefd0dbfecba0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.7-monobeta.0.tgz","integrity":"sha512-8NDjzSCrLW7YloxMn09pKFQT+QJLFPnvLufCSDTYoJB6+wtTyLNJSMbjrWsAoLqUb954iKoLUal8uMYEznst1w==","signatures":[{"sig":"MEQCIFBo7v9JolKhm4Qfdq6oM6sHzqslQpK4ScDsfdk6PApEAiBzV49v+0VZoQPxxPPUN0AQ+aWpQadYSfBVxzY7rECvCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.1-monotest.0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.7-monobeta.0.tgz_1497211823141_0.2303793376777321","host":"s3://npm-registry-packages"}},"1.0.7-themyscira.0":{"name":"primer-forms","version":"1.0.7-themyscira.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.7-themyscira.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d8b52831a6a58cfd04f11d1d2758c021c649e17e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.7-themyscira.0.tgz","integrity":"sha512-b5FEPUbrmZ4ICzRKZTNdCfsWBx8nB6JJrDXbN7KQveJwuKlu8N9BGGCFyN3YyMM3/YT78M1pRydjQvDqGHtNzA==","signatures":[{"sig":"MEQCIFDsLZG1jwQmu9EaufXM/At+EN+70cLi8paYVxXxnyBMAiBRiRCoGICv44UsLRoymBLIGejuSa/K5UCpG9VBRsGaEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.1-themyscira.0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.7-themyscira.0.tgz_1497286182803_0.9986119952518493","host":"s3://npm-registry-packages"}},"1.0.8-0":{"name":"primer-forms","version":"1.0.8-0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.8-0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f4644b426e194ec01bec6accf1d1facd2b8c2f41","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.8-0.tgz","integrity":"sha512-mW3Pu+Mo1uI0ofy1fdouEdZIwTB5obkTjFwMYhLWjhql4/K8TSEe32TLtPxKbJ5UhyOF3NIcr/VKbiFG0IZAYw==","signatures":[{"sig":"MEUCIHC9ueOwhyruuHq2ndZpuUxiuH8fwTF6DMUr7vgJ6u4rAiEAwf0BPoWHPxHNj5vdX1McRAGnDQwZtPmDuIrfQfI1AmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.2-0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.8-0.tgz_1497309181193_0.7804392555262893","host":"s3://npm-registry-packages"}},"1.0.8-1":{"name":"primer-forms","version":"1.0.8-1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.8-1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"muan","email":"me@muanchiou.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"82fbfcd0430330ac3e2f4b180cb6bc9c6e597e61","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.8-1.tgz","integrity":"sha512-e9C2r9nR4hR4kIZLo3O/fDbw6d8FLVNtpFCaEB+A4G0ofIdYGZx1GxGQKRvhlu3VYzbZ0Rdzun/M14Z9A5SQZw==","signatures":[{"sig":"MEUCIQCyrZaUFtxCnr87Tf2dKY+jNzfnJe/2WRe40wOlbWRzvQIgTaiXq+Z5p1jBTmH02MGDAYBWV6zY3mKsXCcd1otPLRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"5.0.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.2-1"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.8-1.tgz_1497915692307_0.04042452108114958","host":"s3://npm-registry-packages"}},"1.0.8":{"name":"primer-forms","version":"1.0.8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"177cda12075203732d2b082c2737fbb4486351a1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.8.tgz","integrity":"sha512-eb1cQQRvrKEP87LTFYrueaadONH04ZLJXoW5ptqR8z4mkFZCsx4of9fuw7ibYRDNsxLfFmOt1N8Ee6Wbvw0FIQ==","signatures":[{"sig":"MEYCIQDlYTfXq710HZKAzf1u0/be9HmGphTD/JT3Gqk55jztBQIhAJHu6jhILpZygN3AJhtmGGUMWzqXwrjBakg4aX/PTWHf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"177cda12075203732d2b082c2737fbb4486351a1","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.2"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.8.tgz_1498253355143_0.906596846645698","host":"s3://npm-registry-packages"}},"1.0.9":{"name":"primer-forms","version":"1.0.9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4e875f89a53a20dd51bbc979c276257bae26058b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.9.tgz","integrity":"sha512-epN8WpDJoi2QNQhY4n12BG56VEDLfD3LJbequFUpeRuHBpFbO8UuWPQiYg5I6RnJwKJbzz+Jj3PvfeVb7Wn9zQ==","signatures":[{"sig":"MEUCIQCqMZb8DJqe1LTw6E6a/xbxMCu4Iz5KgooBglXi61iyGwIgfsQtCSXwHfPzTmtqhfGBW168D34g6ir42MW9XEG+M+o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4e875f89a53a20dd51bbc979c276257bae26058b","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.3"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.9.tgz_1498254775327_0.859856158029288","host":"s3://npm-registry-packages"}},"1.0.10":{"name":"primer-forms","version":"1.0.10","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c8f9c4f4527b68f10bbfc92662edbe11ff4c22b5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.10.tgz","integrity":"sha512-qkQOxLc+dsF5bvz8UdMfWLz7Vo4yts8pIP4eRgIsZflOnyYiZ/VkHepX5HpEn7QfVYk5Qb6+jqefM076QvYZ+Q==","signatures":[{"sig":"MEUCIQC7lx7PL1+qwIotIm++kb3uGuzz5j1cNHhSZbG9filXyAIgParxvabyc4GeOqvLpIxdoHWR+1q+er/GNcFel1q//Ms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c8f9c4f4527b68f10bbfc92662edbe11ff4c22b5","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.4"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.10.tgz_1498260079602_0.5950249682646245","host":"s3://npm-registry-packages"}},"1.0.11":{"name":"primer-forms","version":"1.0.11","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ee8b8533f2b314d82a6a8fe7bb92bdc16f269f3e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.11.tgz","integrity":"sha512-ifs7spmyqNphq0xj3XaCEqv8RxI3/fdqNyp5XOV9qr7vedX2OSOblx/fmmbW7nA07yJ8yym0mrBXBMX95kQK4A==","signatures":[{"sig":"MEYCIQCrk/Fu3gfmuK2OaZhzWdipGJ0CeuY9QrfCW1pi21Z+ugIhANldZnNue/mllDmSFXpppE478zWQThnQpdvHNhneMy1d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"ee8b8533f2b314d82a6a8fe7bb92bdc16f269f3e","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.5"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.11.tgz_1498690871795_0.6521013763267547","host":"s3://npm-registry-packages"}},"1.0.12":{"name":"primer-forms","version":"1.0.12","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"01b98f50885272fa8b787e204337983e57f7f015","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.12.tgz","integrity":"sha512-F03euAJdu6PaDf0rqzeR+L6lJ1ntcO4+kuRq9RUCWOSaxvmJMNDV/M+sCJGXx+4O2nPsliKTQaWmlr0UQSo8fQ==","signatures":[{"sig":"MEUCIBCo20zFu3QDP3AW1MwxiKrSSCzz//aI2oINqnZJafUKAiEA49xyvfCaTH7MAKPr08lGaFHGHge3C1VDWkT28/uXlGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"01b98f50885272fa8b787e204337983e57f7f015","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/packages/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.6"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.12.tgz_1498766102022_0.7176277609542012","host":"s3://npm-registry-packages"}},"1.0.13-0":{"name":"primer-forms","version":"1.0.13-0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13-0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"450e192a851343c53a519cb69507f2615f60d21b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13-0.tgz","integrity":"sha512-nIG5W5sOrSloVbj1RVOxy4xSAm6RLQ1nq9tR7PcgSNhV8h5WEpTEcNel/dk7hVoP1Rb0gyTyIZrmY5lIIm/JEg==","signatures":[{"sig":"MEUCID2XmpQpXuXrWrBvhA0A4qtUjONtTn0ClqYqPyFXNI5+AiEAtejWoO2opUWkWIZBzLtbKJyqmtDebZFFXy/ehJcoQIA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"450e192a851343c53a519cb69507f2615f60d21b","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.7-0"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13-0.tgz_1499640614885_0.4802575435023755","host":"s3://npm-registry-packages"}},"1.0.13":{"name":"primer-forms","version":"1.0.13","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5ddc008cb083b625871dcb4b0e394cdb3dc44991","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13.tgz","integrity":"sha512-MDfFjVvvW1+7Y/iZGs+BcjYCeSiDkNqxQ+BniqK3hapoLS/rtjf7Yu9UkBgokBMn4466mCKUXtGITGIf6vl9Bg==","signatures":[{"sig":"MEYCIQDJHoJevAu6p6w8yUZaZ7IPePe6/okGnNcOnOkeXPtD7wIhALrW5FG5q7ks98uM5Kn27lCZxha7i+mJXK+0XoyUezTS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5ddc008cb083b625871dcb4b0e394cdb3dc44991","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"broccolini","email":"diana.mounter@gmail.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.6.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"6.9.4","dependencies":{"primer-support":"^4.0.7"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13.tgz_1499718616302_0.20693054050207138","host":"s3://npm-registry-packages"}},"1.1.0-alpha.92656aa4":{"name":"primer-forms","version":"1.1.0-alpha.92656aa4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.92656aa4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6bbb44fa77d022c4bff1fe4fafbcac02e0db35e4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.92656aa4.tgz","integrity":"sha512-aAfXx/KhygDFz5kW8SPQH+1HlEL5rRrQPFVibqaws+UroKgddwMGFqD3zbtXkfFnjajMcSuUVejWGrDfU7b5Qw==","signatures":[{"sig":"MEQCIGh75zETHPmQHjocCFFyyjZWKIaUs3DA5acvDdmWUOPjAiAtyj15pYCwHZAdq+zDP2tzzn7x9H1LCq8ZJNnzGQcaFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"6bbb44fa77d022c4bff1fe4fafbcac02e0db35e4","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.92656aa4"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.92656aa4.tgz_1499892308427_0.6284968999680132","host":"s3://npm-registry-packages"}},"1.1.0-alpha.c1ad9722":{"name":"primer-forms","version":"1.1.0-alpha.c1ad9722","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.c1ad9722","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a1b89507dd52d26d5d825e5fff17fd218f8975a5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.c1ad9722.tgz","integrity":"sha512-cixbFJ1QIzip8TSlVJoS8f7d+fEOR/fRqB5p0afOeMsRMdjWOlLMn9zIT7JIDxNfSyDMMfJ8Rj6Ygj1Q23WfmA==","signatures":[{"sig":"MEYCIQDYhC68JvznatnqI6Ns+ex0Q4g5gFhLxp7PlOKBJVdYGAIhAOK9hKuOfihus8iGjEPkDNmF6EbJCU8fBIFRTodv5uI3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"a1b89507dd52d26d5d825e5fff17fd218f8975a5","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.c1ad9722"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.c1ad9722.tgz_1499895529685_0.22623229888267815","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9991349f":{"name":"primer-forms","version":"1.1.0-alpha.9991349f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.9991349f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0d95bc317620d80c5b74f842449f7dcf3de24302","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.9991349f.tgz","integrity":"sha512-LB0u5KPk4TthKmAiFCYXK0q7xCMTmuCCcRH5DVVB/hBE7mDt8bpAcEGnCNdTqZb3R+/pMScyUun4xInFmwYnHg==","signatures":[{"sig":"MEYCIQDPInJx/BBW1gW25s83918v/WvRmb6Lr9jXH7zsMsclNwIhAPYW/C7njOY3O+BjTI/kGoC8mow2zx9C//SHz1AiGchP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"0d95bc317620d80c5b74f842449f7dcf3de24302","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.9991349f"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.9991349f.tgz_1499897306210_0.07958936155773699","host":"s3://npm-registry-packages"}},"1.1.0-alpha.a7f1f710":{"name":"primer-forms","version":"1.1.0-alpha.a7f1f710","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.a7f1f710","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0045f15b6e6b2ddf82d53dd9f40bf72cb185207e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.a7f1f710.tgz","integrity":"sha512-MUsvgnkfDwPM+VmQdkNDIWLQ8HpX3n7d4LuA/2KkyC8RXVazogg0kujl4VRLRM/IuwfjQx422pVUf9Cv2WVRIg==","signatures":[{"sig":"MEYCIQDAS3s9Eql8ggFAT3eRymnUBb/+WNzINhGfcQ5vK4RCbwIhAKFR+TW/bN/jVSjYo7ODpRMPGpqBKlSB7hYEPrK4m9ap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"0045f15b6e6b2ddf82d53dd9f40bf72cb185207e","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.a7f1f710"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.a7f1f710.tgz_1499902485506_0.5045893238857388","host":"s3://npm-registry-packages"}},"1.1.0-alpha.0ec98f7c":{"name":"primer-forms","version":"1.1.0-alpha.0ec98f7c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.0ec98f7c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4dfb230b3dac8c52286c698995efe74e331461d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.0ec98f7c.tgz","integrity":"sha512-08mWGDDAmo1zXakQTWatS+Ld4BvVT28UBzCTxUE2fpegHJHcmzU10w7ShQGRxziwpPASkhGb33Z3hi/H0Y7Iow==","signatures":[{"sig":"MEYCIQDQhjG8uW20c5T3SnQsoiX82LSycaeI+iKLqc3QPcZCmQIhAI8eHrMpt6n4hUuWT6lzacq6a2ch/O1xCXURmbT6eoYl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4dfb230b3dac8c52286c698995efe74e331461d9","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.0ec98f7c"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.0ec98f7c.tgz_1499974104278_0.8487733600195497","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9c2cb073":{"name":"primer-forms","version":"1.1.0-alpha.9c2cb073","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.9c2cb073","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"42e7806a93627d62f7c4df2fc71aeb4baf571a07","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.9c2cb073.tgz","integrity":"sha512-/FGEFSMhKpCYsoaqcwLo+ef9YdR1bLaIAmTfw8Uu7W1YCCMktsEql7ht/YrTdwQ5ucg4kQn+Cbddll7g7h2RQg==","signatures":[{"sig":"MEQCICbRQU/ur8cBWnaep3u/8CtrVfNfwyXKQlHdG2hPa2iKAiALdSUyCFxCTPeGQ3a7H76FyBEnkc9ytIlmJv7yDGgAGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"42e7806a93627d62f7c4df2fc71aeb4baf571a07","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.9c2cb073"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.9c2cb073.tgz_1499978808417_0.2832047666888684","host":"s3://npm-registry-packages"}},"1.1.0-alpha.2da4646b":{"name":"primer-forms","version":"1.1.0-alpha.2da4646b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.2da4646b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8a839418c878772f7296cb4411bf685e674a623f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.2da4646b.tgz","integrity":"sha512-vCRtvaKoX8kjbA1KHYGouHBgMNMHXJEoyXU2pV840XG1EdPqzq/t5uNt35ZcJsKHGcNQq7X6Tmb/iCBc22IdmA==","signatures":[{"sig":"MEYCIQDLxqsEFXYGOQ2aQHUL1xQyD3qjn5CXNhJ+z9TIMxf+LgIhAIU6aUAo6OqND1tM0nxzra/vcKUglPEisxS73Owx3zyj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"8a839418c878772f7296cb4411bf685e674a623f","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.2da4646b"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.2da4646b.tgz_1499979824006_0.2544544246047735","host":"s3://npm-registry-packages"}},"1.1.0-alpha.d7875d5c":{"name":"primer-forms","version":"1.1.0-alpha.d7875d5c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.d7875d5c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"3bea3f6d5c370bd0546c56b7c091e16dcf38d598","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.d7875d5c.tgz","integrity":"sha512-82SlB9HEUjQbB8Pk5BAF1H67RGAArC+9+hP1x+BXuhYBjjWo1EERMnqUV6ogM8nMVayvIyLHkUg69lOnRTJYNw==","signatures":[{"sig":"MEYCIQCbTs44BSfyNMFO+FNl3EqTz89ZQRRqMff67cwmjS8YNAIhALE/tFDrgoOvnRYslul8tm+/fxxWdVOPK/US9EdYIxak","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"3bea3f6d5c370bd0546c56b7c091e16dcf38d598","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.d7875d5c"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.d7875d5c.tgz_1499982135386_0.014539880445227027","host":"s3://npm-registry-packages"}},"1.1.0-alpha.c5efc988":{"name":"primer-forms","version":"1.1.0-alpha.c5efc988","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.c5efc988","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"14fd1aa487994d91d8be73cac9b2718e0d32ce2a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.c5efc988.tgz","integrity":"sha512-TCVjiXWrrtq0XKD7ApmIbaJCOeUJ78Wjnh3oJ5cRfF7sOiUCXgKvaz3WPeh2fVpBqXJlE1E2lNcGizJ/kptdqw==","signatures":[{"sig":"MEUCIQCiEMV++b2XZUTMUYJ94n/EJN/gD5hclgMC1+rX/jzS9QIgEfQ5JDUPU7JGoAdfUxUnz0GxBAcYNiB9O8Xdf7v9QyA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"14fd1aa487994d91d8be73cac9b2718e0d32ce2a","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.c5efc988"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.c5efc988.tgz_1499983364080_0.9560304230544716","host":"s3://npm-registry-packages"}},"1.1.0-alpha.164ab439":{"name":"primer-forms","version":"1.1.0-alpha.164ab439","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.164ab439","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"121e01745e8a626fe55f376bab125ab18de61be8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.164ab439.tgz","integrity":"sha512-0VA/6ve9CoYuekHdo0+4cz1LdSn8Kj/WfVlSo6gQj8L3UHUDfTItie/KxypEP8uxrwNnUB1Ocz+bXxDAosZU0Q==","signatures":[{"sig":"MEUCIEnRkvS4dAfxVQoGK08B5XCUQcE2lt83R0SavAAi94aEAiEAhsZNtXpHr49lC7sqxFO+VK90TLz0unFQu0e17udRR04=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"121e01745e8a626fe55f376bab125ab18de61be8","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.164ab439"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.164ab439.tgz_1499984606443_0.08683411381207407","host":"s3://npm-registry-packages"}},"1.1.0-alpha.aca4e37a":{"name":"primer-forms","version":"1.1.0-alpha.aca4e37a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.aca4e37a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b0d1507f6389a3a74125a80e5b37140e0f59a53f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.aca4e37a.tgz","integrity":"sha512-ccKEsZ7bWu7SMld4oKnqXbwO4BTrDxSDFxV3CsGZkyQF638t5LMvPOIedXU5H17lx/P7BVwxdkFlmTkX1Sk2TQ==","signatures":[{"sig":"MEYCIQD31h3oSgN0zWEs5IaT8ojVQD74TbFjo0PXRuFPheQkwQIhAN0nSl7NoP2nBN8qj1PxiHXUpMV8Qn1lvFwYw1sPp5F/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"b0d1507f6389a3a74125a80e5b37140e0f59a53f","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.aca4e37a"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.aca4e37a.tgz_1499984942152_0.4576657679863274","host":"s3://npm-registry-packages"}},"1.1.0-alpha.9d047e94":{"name":"primer-forms","version":"1.1.0-alpha.9d047e94","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.9d047e94","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ef3f14fd6674aca5c0c773c16edb318839443e51","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.9d047e94.tgz","integrity":"sha512-tOBJQli0BPY8C4FnOddV25EiL6Nv6xtHmXOiDc9SINEomsUhHAFcSoqAhedGrpL7is/ERG9+SQaMHVXgL1M8FQ==","signatures":[{"sig":"MEUCIQClTFks5vD0D6qJB5KdSetseuc4n7M8CYrNXJbAHKic6AIgQ7zgIhEfYlRRFOLqQqYGMDTEPMeaF1g0z0BBReAwBeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"ef3f14fd6674aca5c0c773c16edb318839443e51","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.9d047e94"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.9d047e94.tgz_1499988149654_0.5809264024719596","host":"s3://npm-registry-packages"}},"1.1.0-alpha.35cfeeda":{"name":"primer-forms","version":"1.1.0-alpha.35cfeeda","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.35cfeeda","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cc286b91f00371dee5f4ecc2adeda4879db9cb30","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.35cfeeda.tgz","integrity":"sha512-/++sEuMf42CmZZMfuidVYa8h/5qOODhBe7hbf9I+fqeUqHOzfI0+ZI7lPZOJBI/rG/6H1GPU/YGcOmMtha44QA==","signatures":[{"sig":"MEUCIBpcP4f+DOlHBVRdPE45BIhXOzmdme+/EIYHIULxIp6PAiEA04pwhU7QHqILl0l/MGneEQmznd+JdWYMtQyEebya8QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"cc286b91f00371dee5f4ecc2adeda4879db9cb30","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.35cfeeda"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.35cfeeda.tgz_1499988677056_0.010685358429327607","host":"s3://npm-registry-packages"}},"1.1.0-alpha.46d97219":{"name":"primer-forms","version":"1.1.0-alpha.46d97219","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.46d97219","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"daada52c20c9b947d0a894ee2c26490b38f8d8a6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.46d97219.tgz","integrity":"sha512-zbQzYi7Ovm5F9XuBobqqxg8BXEqW+7I322OsGKCrHvZeBAwTTmDar2UEydQgB98VzbCa6pygPmI+Migj/vNMAw==","signatures":[{"sig":"MEYCIQCKW0mviUHcmHiPy5tw8op37gWo572ALKWKvb5vnaz8GgIhAJzApCc1Ma7N2HlXBIXiEg5e84UedBjGW3BsQRC2y9Cn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"daada52c20c9b947d0a894ee2c26490b38f8d8a6","scripts":{"test":"npm run build && stylelint **/*.scss -c .stylelintrc.json -s scss","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.46d97219"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"*"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.46d97219.tgz_1499989394552_0.8469854204449803","host":"s3://npm-registry-packages"}},"1.1.0-alpha.36799d9b":{"name":"primer-forms","version":"1.1.0-alpha.36799d9b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.36799d9b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"3b735c41348988e05cb21bf362efc755d7e242fc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.36799d9b.tgz","integrity":"sha512-f9V2+IouopbDs6IUu16Jar4Umn1i9CirdB4PLvxYdfrgRy8Yo7g45fBLRQu6hN17zE9UJdtuEtXrgzCICXxRDA==","signatures":[{"sig":"MEUCIHvDYvXHxQ09s6ARfrgJ4IRRN/tnoj+ru/eC6wXrcxloAiEA4UOvIzqc1QRkRjw50XzZF0E5zaI8edF1MbodhLRSgi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"3b735c41348988e05cb21bf362efc755d7e242fc","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.36799d9b"},"devDependencies":{"stylelint":"*","primer-module-build":"*","stylelint-config-primer":"^2.0.0-0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.36799d9b.tgz_1500070825838_0.571999401319772","host":"s3://npm-registry-packages"}},"1.1.0-alpha.656d1ead":{"name":"primer-forms","version":"1.1.0-alpha.656d1ead","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.656d1ead","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d2ff9dfac10b8f1a60d3d49ad6168709a7b4ce62","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.656d1ead.tgz","integrity":"sha512-X/aOlkUDfzoBXf2SPwVzKmOFZBzFUU6lSf8F8DthmqgtAeUAV5twaYcZS2E0XBTsInEsqvcp5l0uc57HZCV8nQ==","signatures":[{"sig":"MEUCIQDH6eaE812325Hxsbl4P3zGRqXb5paPzDCURe8YF2r45QIgW/mFONejYpnXi+HgYlNmoKYVArl2sHmo75gK+Yf10FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d2ff9dfac10b8f1a60d3d49ad6168709a7b4ce62","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.656d1ead"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.656d1ead.tgz_1500075096961_0.0561599510256201","host":"s3://npm-registry-packages"}},"1.1.0-alpha.a246e616":{"name":"primer-forms","version":"1.1.0-alpha.a246e616","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.a246e616","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"de4a1fcf4a9f79cfbc1b403ae7fa794e0f28ae96","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.a246e616.tgz","integrity":"sha512-qRiXiF1K3aLUwO35Y91gohvhAErBlxGVFhZ61gMIK2U5kPukoWdkJ7SIfvmeB6ONefyeZKr+YwcTztpOVQCL+g==","signatures":[{"sig":"MEUCIFNrF5nyKVQjLRzOmD32Xgqv4JTw50tD42mEZSJO+CZyAiEAgkTWrKbA7xm7ZY7JH58ALPSHirpf6aS8uRfKeKr/YqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"de4a1fcf4a9f79cfbc1b403ae7fa794e0f28ae96","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.a246e616"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.a246e616.tgz_1500393318344_0.17220647749491036","host":"s3://npm-registry-packages"}},"1.1.0-alpha.6401d7cf":{"name":"primer-forms","version":"1.1.0-alpha.6401d7cf","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.6401d7cf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c74d80fa1f2215ed9138f0e56b911b62fda0a020","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.6401d7cf.tgz","integrity":"sha512-5lOQzZLwrehPvITBzlRG1acD0ZeSUv8YTBAiUTOSE+cU+N6MrpNs455EvvhPPu21SA8AMeJ7oBVkehZvOrq9ww==","signatures":[{"sig":"MEQCIF1roC+bmSy/E6mXpUlbmjFmsOG41TgfL290XlzU6zDAAiBTn75Ma8+gUuiF+kZDatzna18tSznZS/+YXxqWNIVj8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c74d80fa1f2215ed9138f0e56b911b62fda0a020","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.6401d7cf"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.6401d7cf.tgz_1500401409545_0.25691951951012015","host":"s3://npm-registry-packages"}},"1.1.0-alpha.7974d22b":{"name":"primer-forms","version":"1.1.0-alpha.7974d22b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.7974d22b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"707bd50061d43c0312e4d116addf3b5767a28e05","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.7974d22b.tgz","integrity":"sha512-8FadvuKWJWOqxHf5MNlyLxUbPTtUSve/9IV4WG7k7ZBhEatNcgDgISq5U6lnz7H1kTVVzJGsg0/qzOgg55QCPQ==","signatures":[{"sig":"MEQCIGM237ePeLss/6LjzdFAmtRxBKbHCjVdNjp9oyN821FoAiB6h9Q68IhsAt+HlcfVpmtMJsH+bxo/zUmpn1TQy8gDwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"707bd50061d43c0312e4d116addf3b5767a28e05","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.7974d22b"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.7974d22b.tgz_1500406838101_0.75005072937347","host":"s3://npm-registry-packages"}},"1.1.0-alpha.6dae25c2":{"name":"primer-forms","version":"1.1.0-alpha.6dae25c2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-alpha.6dae25c2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d0eac0b4f2adb35e54b451e7cfb17363482cf6a1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-alpha.6dae25c2.tgz","integrity":"sha512-Xvoi4mSx39T6ZVaHUKMIQRJFNdKLyBfTRpJ44mot5U/vEdYkS7Jf2BhuNZRcizZkids1URV4hUBCuil9uOW5Ig==","signatures":[{"sig":"MEQCIEOe+6REYJOx8puwx926hpHUbHTxeBLKfFaXU34tCrezAiBfPQ/577RH9urUmsEwcKq/DyBLCYF85rOJO/oCRa8leg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d0eac0b4f2adb35e54b451e7cfb17363482cf6a1","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0-alpha.6dae25c2"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-alpha.6dae25c2.tgz_1500497696757_0.1252090239431709","host":"s3://npm-registry-packages"}},"1.2.0-alpha.47779470":{"name":"primer-forms","version":"1.2.0-alpha.47779470","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.47779470","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"94f00d5334a357a3bc36fcd987d7d42222f18855","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.47779470.tgz","integrity":"sha512-+RUXA9lNIiwSqiRJwnlaCzHVEummpNxwy7R/XrCDu5txJRmWWqAYNYaXIVLGziNov9b2mUO/vcIdRW0YtWHk7g==","signatures":[{"sig":"MEYCIQCLYYfy9AhIcD6NXqFZ2d+7Y/bb+gu1U+47NYomk0DhaQIhALWGTGmvOtZbvOySoain4Bo5116ru4HrC6SVlNifjAoW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"94f00d5334a357a3bc36fcd987d7d42222f18855","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.47779470"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.47779470.tgz_1500500819332_0.5013612876646221","host":"s3://npm-registry-packages"}},"1.0.13-1":{"name":"primer-forms","version":"1.0.13-1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13-1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"97312cfd512494eecbe12730c7d8e31b5cf8dbb5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13-1.tgz","integrity":"sha512-PPZMLHvTi2fwXeCI0EuWRX7qBzXMx9KTmru0C4HOf8RfGzuwMbkfmNI8MIfE+5zCp6nHllPsBbvCSUv5BAeOkQ==","signatures":[{"sig":"MEUCIDJwrjbhUk1DgCQj53AopLvOVi8P4xZIOwcPtYTxM1AuAiEA0An6Bjr50ss5pTVGx1J65LIaKUVZeYjn6UYCqg8PKek=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"97312cfd512494eecbe12730c7d8e31b5cf8dbb5","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13-1.tgz_1500582389570_0.46715396642684937","host":"s3://npm-registry-packages"}},"1.0.13-2":{"name":"primer-forms","version":"1.0.13-2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13-2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"52feff733d49268bd75837c4bf5d8885e3d60a61","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13-2.tgz","integrity":"sha512-HoTlj8PYvO2lvvSswdpRkeWw5Ek9cnoBn5LR3PfVVrGcXWf/h17LRnHsbWzRHSYxPl3jPjCTnxCgj0fa6KyDyw==","signatures":[{"sig":"MEQCIAeE9ZlsmkrkOzwmfoIuxqqc6IKQ+LpM77Tlih+6rGFFAiBfSv4kUdVUzSeIll6n5Zm3EN1Edxh7G4IGYjsdzdLUhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"52feff733d49268bd75837c4bf5d8885e3d60a61","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13-2.tgz_1500582773022_0.06275085126981139","host":"s3://npm-registry-packages"}},"1.0.13-3":{"name":"primer-forms","version":"1.0.13-3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13-3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"982b03298a3fd33eb4f0e9c68fc5aa12b9a5ae1d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13-3.tgz","integrity":"sha512-/32rP4Wh1M7G22EsPDt8aVQ5lCsqsrhynd0ViXcKvzC6yoHRE/b8pDp8dAiBbUg+tv6B9cztdugwcCFImULRqw==","signatures":[{"sig":"MEYCIQCkFaCggnd5Z3SIQv8spOMRtcT/HWGcDr8udMbUMNtGPQIhAJRVtMMN/aM96WlL6PW19I1GQeiGGz5bylOBqGaMsNxK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"982b03298a3fd33eb4f0e9c68fc5aa12b9a5ae1d","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13-3.tgz_1500583239781_0.8746757507324219","host":"s3://npm-registry-packages"}},"1.0.13-4":{"name":"primer-forms","version":"1.0.13-4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.0.13-4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5a898133d8175e924bd2513e6ea6570a2b05c7a6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.0.13-4.tgz","integrity":"sha512-IkPEDETj6KZKgqDa+4rWQmYgqwKsnh/MxR5sb+OmjXnwluRuK2rAjwE6oVyJxICCpEVpfi8cra2pdYuGbIRn7g==","signatures":[{"sig":"MEUCIBjMKypcEvb7q5hGAbCu7XERRjlaXBWvg9lO8nH4e5w6AiEAk4ZjiCUv9qS0g+Mf77aj5rGW//cwyKLfVTiHwhNW89w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5a898133d8175e924bd2513e6ea6570a2b05c7a6","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.0.13-4.tgz_1500583669024_0.22507702629081905","host":"s3://npm-registry-packages"}},"1.2.0-alpha.39d50db9":{"name":"primer-forms","version":"1.2.0-alpha.39d50db9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.39d50db9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"37afc569b230adef67cd9114876f5b7f63f1d58f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.39d50db9.tgz","integrity":"sha512-6lsdHD+87PDtj3Sf/cOQ0D5L7ipB8nThZf407rGw7GVWlicLQL+CfeqdbCA5g1D2YFYB96CLt7auToXGkmeDfQ==","signatures":[{"sig":"MEYCIQCn8xpYDZkP00FSrflW+lQP1GAkxd2sg3eFWH5uym+JJgIhAKe7lKAJoopviSSqs2mD9HFlTXUwUxPjLSPYkeGliStR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"37afc569b230adef67cd9114876f5b7f63f1d58f","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.39d50db9"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.39d50db9.tgz_1500588748321_0.15240290039218962","host":"s3://npm-registry-packages"}},"1.2.0-alpha.7c1f4bf1":{"name":"primer-forms","version":"1.2.0-alpha.7c1f4bf1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.7c1f4bf1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f193d869801edf2811f80d59561e378ac3b59484","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.7c1f4bf1.tgz","integrity":"sha512-DL2tKauIBTDi9FHBsalh1EclZPqCBXYNM9ChmU7G2vnkuhYXW4McUy9eSiuPQKhc3CYzAwHeeLVDcYb/7HC9wg==","signatures":[{"sig":"MEUCIBz8LvAnAgqxDLyJhUDSMyy00oVW1huebbffua3UiNwFAiEAuWjBvkbLFUZg2opX5yoInMtf5qoKq5ZxhxRKC7HWnTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"f193d869801edf2811f80d59561e378ac3b59484","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.7c1f4bf1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.7c1f4bf1.tgz_1500589594354_0.5896538118831813","host":"s3://npm-registry-packages"}},"1.2.0-alpha.a1bd7859":{"name":"primer-forms","version":"1.2.0-alpha.a1bd7859","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.a1bd7859","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4a2008a544966b0728024b7c7fadfb74f4df617d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.a1bd7859.tgz","integrity":"sha512-kB7lo9L9c1SPCXf3G0mU7P0MJpiI3lWl/cNfP0C3NwkgbsClgBJxM2S9JN85ovZHQCirGmd9BZGSFlYNwow/Tw==","signatures":[{"sig":"MEQCIAmo2jg4WJmSoCt1v2/TprTwI/8mWAbmtgVkUCVBKSIVAiBnP2jJ8xwynHoYzqmz7BU21HU9je9eYDmDWpSmU74Stw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4a2008a544966b0728024b7c7fadfb74f4df617d","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.a1bd7859"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.a1bd7859.tgz_1500589936982_0.46067934297025204","host":"s3://npm-registry-packages"}},"1.2.0-alpha.17c4cf97":{"name":"primer-forms","version":"1.2.0-alpha.17c4cf97","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.17c4cf97","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c7a6beca9b5aed2f39d9cf7556ad0fe6406fb69c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.17c4cf97.tgz","integrity":"sha512-Xa2DVOdNSef0VVOccopciGHdpfaiEh2pQGqR7DItdZZXpwbf6+eaCfbDABbx/1t/Vk+LWDfS4x3CtdiY5KyK0g==","signatures":[{"sig":"MEQCIEWI4S8mw5OLmTRU6giRF50+KG7GviZFkKPn/Qe8lpXtAiAoybZB1IquHpA4b2JfiE+ABt3sgcu4CHYS5Bacev3y/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c7a6beca9b5aed2f39d9cf7556ad0fe6406fb69c","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.17c4cf97"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.17c4cf97.tgz_1500590823279_0.006291212048381567","host":"s3://npm-registry-packages"}},"1.2.0-alpha.71aa3894":{"name":"primer-forms","version":"1.2.0-alpha.71aa3894","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.71aa3894","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1a991c1cb73ed52946be8005be46e6e433576a46","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.71aa3894.tgz","integrity":"sha512-oxYACzod357oinYdSsQWpvJquj4ITxJfsdFCSH70ZTjKl3n7/Xyhjf/Vg20CDXptpq12iRtj3ZreUyxWC3XJag==","signatures":[{"sig":"MEUCICb89ItGTb17TLfW7HaE0Tq5w7dGIFn9ddY83BMFSkY/AiEAxzImaKSbTqTCDyvkpacMGAS3TnMJYaHBm/vi1v3XcVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"1a991c1cb73ed52946be8005be46e6e433576a46","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.71aa3894"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.71aa3894.tgz_1500593942527_0.34387512458488345","host":"s3://npm-registry-packages"}},"1.2.0-alpha.d0281a6b":{"name":"primer-forms","version":"1.2.0-alpha.d0281a6b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.d0281a6b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7f04131ef5003a215d75ac7735bade98b2c0368a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.d0281a6b.tgz","integrity":"sha512-DpFE3S3untt+bWGbi62POjHFPPzygYPXREq2xXrPCEaUt1NsKDXsrOOH+F+qZOqeaF64rvZ9t8GzWZvUK0CRXA==","signatures":[{"sig":"MEYCIQDjp4FERhUVjzq2eMVcg1dPnS7SamQRx3OtCVDl+p7VVAIhAO4xKdYWurOHrIBp+WMsFCfndYB885Bs727ZNL1IPw+A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"7f04131ef5003a215d75ac7735bade98b2c0368a","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.d0281a6b"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.d0281a6b.tgz_1500594242805_0.9948405942413956","host":"s3://npm-registry-packages"}},"1.2.0-alpha.72cfd878":{"name":"primer-forms","version":"1.2.0-alpha.72cfd878","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.72cfd878","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"86a54650ad80fccf195797b81ae724655f73d061","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.72cfd878.tgz","integrity":"sha512-kz0xjGyPA5cDlA6G2346B+wXVSrDVm1duNTC2OOQaD9ALx5Xs2kl/zI135zXL4XeHDk0EoSnj7hIZNlHnyuiEQ==","signatures":[{"sig":"MEQCIEF1DxTIFp6l51y3J9OXGho7YSzkhaTdXgqQZGz7ibxUAiBtivzqKed+DF5sNu9i2Ab8tGCzPvKnHmpSB0fn79Youg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"86a54650ad80fccf195797b81ae724655f73d061","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.72cfd878"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.72cfd878.tgz_1500595591739_0.41373275127261877","host":"s3://npm-registry-packages"}},"1.2.0-alpha.3d54e445":{"name":"primer-forms","version":"1.2.0-alpha.3d54e445","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.3d54e445","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"01f34d7ac8a3ba7939d0dca6899f5e4e8665dde3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.3d54e445.tgz","integrity":"sha512-8IAUbvSMePSEaqza0GEQ7i2FEXtx1NYHdVuB9/mIIlhaw20S5wLPRjzTvcxlfLcqWWFLZSqKn8eJNAAFpuGXdg==","signatures":[{"sig":"MEMCIGKtXtHkobVBFXuMpgdwdOztrbOu0A+xaAwqDShSBQ1IAh8qSDr8qaefCyXxWK1eJZK1xwOrrkjkrRUVGh+GgP/u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"01f34d7ac8a3ba7939d0dca6899f5e4e8665dde3","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.3d54e445"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.3d54e445.tgz_1500596259262_0.5048946614842862","host":"s3://npm-registry-packages"}},"1.1.0-rc.4":{"name":"primer-forms","version":"1.1.0-rc.4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5b15d3973707dcb7021a260af51a3533c6d8cc64","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-rc.4.tgz","integrity":"sha512-O4/OQksPYGL5LdUwIz3EPzh71ak3eaeo0SQXGTbWsMrYWJB3EzNxoCqvSMqQLyv+pMMS0RxggZmS9DjXILt9mg==","signatures":[{"sig":"MEUCIFP6cwRD81dn8LE+l/PI5xyI9S7tN0PjREWi7Q+2/m03AiEAi7FhtXXrOvveGVLbDTeY04HdRAivnp81fAG60fvYSEs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5b15d3973707dcb7021a260af51a3533c6d8cc64","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-rc.4.tgz_1500598003579_0.8888121203053743","host":"s3://npm-registry-packages"}},"1.1.0-rc.5":{"name":"primer-forms","version":"1.1.0-rc.5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6cba830b0b4cb466a1356d6540d587881a1c23d5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-rc.5.tgz","integrity":"sha512-5t/ZlfFZO7KsC/pcnazCHZ5HPO1RN+XavNFI6JxgT9gatc4zGmfa2V0YC4rrvR5kprup9DMea6FC3FhO3fzKWw==","signatures":[{"sig":"MEYCIQDHocj3YqsMNQQfp47QKeFnMt2DupHStRdlcNxQU1iaKwIhAJD5P5dTy9EGoDOe0MoZ0o2MmkdyAd1D958n+QNfKmVV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"6cba830b0b4cb466a1356d6540d587881a1c23d5","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-rc.5.tgz_1500598514226_0.8610593797639012","host":"s3://npm-registry-packages"}},"1.1.0-rc.6":{"name":"primer-forms","version":"1.1.0-rc.6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f2ec5e0012fc1461a3c6c7d82f5371e97ade8ba6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-rc.6.tgz","integrity":"sha512-N4iJZPoD1KkSvlyZVhWIyL16Dg20FqJms+RKJP8H4oAYsO9FNN++cLNW7GK1AVafSrcYjCQRIXUXwSCKKUSH+w==","signatures":[{"sig":"MEUCIQDN5yoKT0xR90kJRbpeTZZsTKXQoEiSsQndI+ovrNELRQIgMD5xCRraYI4XhBATPqECsUesO0/OlER0uH8Nk7PLG18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"f2ec5e0012fc1461a3c6c7d82f5371e97ade8ba6","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-rc.6.tgz_1500678089200_0.14761684508994222","host":"s3://npm-registry-packages"}},"1.1.0-rc.7":{"name":"primer-forms","version":"1.1.0-rc.7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d73206d149d4c88ea86491f215caad7d8d7eb593","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0-rc.7.tgz","integrity":"sha512-/liSeL/5auXGJbQsFn2DBjMdha8xYcC+dURcWoO1AY5lMjwrXIhDPCUwdDFvB1ayN2tk4T72qmJgr1zECGyI6A==","signatures":[{"sig":"MEYCIQCkcgNxpC1Loc3x3hzRE0whxaknzfXISt5xarM6zYOtrwIhAN49HNfMDY4SM2apum+j6kZKHoKMtmFGhOLZWQrfMOQb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d73206d149d4c88ea86491f215caad7d8d7eb593","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0-rc.7.tgz_1500924324494_0.2009069740306586","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"primer-forms","version":"1.1.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"633be55f86df502611ef371c3c6207c2b2a41e69","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.0.tgz","integrity":"sha512-zmGj8gvBhTzNLYC6075O09vV0klDxOqLIve2CMD9SOfrFZjAti67n2IGJX2Ix3g2wN3yrPvUjEFCBdjb+INWiQ==","signatures":[{"sig":"MEQCIGNEkzTMKcodDrOvRswsusqSu9jo/rfWPicWPVh98fdPAiB7mz+XupwNyjaePteqjSkN93qB9GLltAR34kn13SIqrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"633be55f86df502611ef371c3c6207c2b2a41e69","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.0"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.0.tgz_1500924867652_0.5522189473267645","host":"s3://npm-registry-packages"}},"1.2.0-alpha.e97d9417":{"name":"primer-forms","version":"1.2.0-alpha.e97d9417","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.e97d9417","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"38437106d901496b17df5a86502ef4e122a00d13","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.e97d9417.tgz","integrity":"sha512-fhxPzLk63s9J4l4l4M+ZeXEq/6MypVH0xGynbLqUjXPyh5SjiFopJXTtfxZsju/W2ed4iWWAaztd3vlez/Bmuw==","signatures":[{"sig":"MEYCIQDTNr34R4Xy5VmnK2vb6UKPchJsoOSBtEtrz/sd5wTyoQIhAIZz5SjVAJdKaPKhGz2ACZGnCDDiEIba72ONHDNn29Ek","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"38437106d901496b17df5a86502ef4e122a00d13","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.e97d9417"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.e97d9417.tgz_1500929992719_0.2654000003822148","host":"s3://npm-registry-packages"}},"1.2.0-alpha.376de7cb":{"name":"primer-forms","version":"1.2.0-alpha.376de7cb","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.376de7cb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"45237d883972ff7174ef0261d4be9f7b61543479","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.376de7cb.tgz","integrity":"sha512-92VfkYawAPkG/o+qYh5ME3lPv1DCK78FLakRttUsj9zIT/nZ/q2deFbG3dPWcEOm0IW0bz26kmWQNeJrytx6JA==","signatures":[{"sig":"MEUCIGhoylJKj2bGCHH3qYCzVgZceiVq3Ihyis1fqh9dztmJAiEAl3IRAkOgLWjBXZx+nQMN509EVH20g3dXH0bJz5fT0tA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"45237d883972ff7174ef0261d4be9f7b61543479","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.376de7cb"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.376de7cb.tgz_1500930484146_0.14055349328555167","host":"s3://npm-registry-packages"}},"1.2.0-alpha.70168740":{"name":"primer-forms","version":"1.2.0-alpha.70168740","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.70168740","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4789ac0656c51ebd399999c6ae8e8a97458df14b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.70168740.tgz","integrity":"sha512-TO2APv/T+NBuQkh2IKBKhg4y5o7l0HvpcSk3CWjhBRMI4zotQ5oq2luinAxwL3nPsUHCpHHBAfn0moooowzIEQ==","signatures":[{"sig":"MEQCIBdtTrTQtKmfj4HrfHHJs8JffgCqHQ/Kj7CYzZTYlaZWAiBc+58wkx5t3U77ZZw40O+I8T9qO/FlsvhW782/WjFvPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4789ac0656c51ebd399999c6ae8e8a97458df14b","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.70168740"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.70168740.tgz_1500931576193_0.7603467518929392","host":"s3://npm-registry-packages"}},"1.2.0-alpha.410ddacb":{"name":"primer-forms","version":"1.2.0-alpha.410ddacb","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.410ddacb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fe3958a3babad994fc015166d4c9e08ed5156841","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.410ddacb.tgz","integrity":"sha512-Qdd7m7GcanTQ3ggi844xBotOEOUPX04zkqFgoJ3ayjIrNHJ7ZmlRJqJrML74Y3pIvB7Kj4cJTPxWjvBPPJ5/vQ==","signatures":[{"sig":"MEUCIQD4roc/k1n41DIqwr2KPbVj+jDOdZAcdNIg/+BWqtQ42wIgHT14CU8D98VNZLvtI+9gVl+TthjN9b1HG8Z67jiRrVg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"fe3958a3babad994fc015166d4c9e08ed5156841","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.410ddacb"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.410ddacb.tgz_1500931798890_0.8217315648216754","host":"s3://npm-registry-packages"}},"1.1.1-rc.8":{"name":"primer-forms","version":"1.1.1-rc.8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5d3a1ee43cdd45c5dca83fac574940d83cdfc91c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.8.tgz","integrity":"sha512-w0eOEL8HBvyVTjtpioghdbt+sNs1RPs54LQX32ExSkaNuTnrv524GoEcsXj4ZjPHnAzPl/bq7umea3MVZyuozA==","signatures":[{"sig":"MEUCIDLEvayvEvu9vj4MgByhjMyi5oF9iDJ5wDReZnLU+Y+/AiEA8dcDC54tcdN7WzG3oIcocuixtuNVaM4a/2iZmqiFTiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5d3a1ee43cdd45c5dca83fac574940d83cdfc91c","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.8.tgz_1500933318399_0.4095344510860741","host":"s3://npm-registry-packages"}},"1.1.1-rc.9":{"name":"primer-forms","version":"1.1.1-rc.9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c7a19748af60b8801de2139aaddfda25da4a5ec9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.9.tgz","integrity":"sha512-wH+U9uEWGweFOWdE3oxi4iqTHBwL8gpOgNJEJrZqBP59zK//fuUWyOSvn+F5kEw4oxy9QdojXHAibEbDccMAKg==","signatures":[{"sig":"MEUCIBT0jaMOEBLf9/sL7rKTOJeoD/AqizumQfhruwtaCH/7AiEAjFhQllh6DZJPPHEA8JjxgiifaOAfEpjz5dPWn5aPgqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c7a19748af60b8801de2139aaddfda25da4a5ec9","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.9.tgz_1500934768711_0.7073189201764762","host":"s3://npm-registry-packages"}},"1.1.1-rc.10":{"name":"primer-forms","version":"1.1.1-rc.10","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2eab307e1015a572358ab507697be75d0b755a21","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.10.tgz","integrity":"sha512-iB9hrPDMpKfukhL7ynC0RP32H6FBI7f7NWDS9NNIFP8gFp74kPuggsTweFxUQpBVde3fjmNqBxQWKSNEpu5vsg==","signatures":[{"sig":"MEQCIA8Maxh60O/Kkxn9Kkr3lB+Z1lvZG2HQqRSDx1ACJh6DAiAzJdXcYwyq/ODVE6eeZ/P9z06P2NHcNyMcDUYxVzDblQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"2eab307e1015a572358ab507697be75d0b755a21","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.10.tgz_1500935753165_0.6979341907426715","host":"s3://npm-registry-packages"}},"1.2.0-alpha.eb8a8768":{"name":"primer-forms","version":"1.2.0-alpha.eb8a8768","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.eb8a8768","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"092ff2b7fa4bf15242bf12789efa97df4ab4ae89","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.eb8a8768.tgz","integrity":"sha512-TXm1GMqHMgsPuq9Y3yH6c8TeSpFsy4XboSjmO1PRS0IKA4+iltYmVn44jjqAjI6Ul/iD78R7hTF/mFPWd8rFNw==","signatures":[{"sig":"MEUCICUqsWU/gL3m6wIyVKEDrgmaC9C3iJ5Cvv2cIQ0tdAZNAiEA5/BwaMgvmdmiUJsSv+VYkElDacSMvITqU4LG/Axsyew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"092ff2b7fa4bf15242bf12789efa97df4ab4ae89","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.eb8a8768"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.eb8a8768.tgz_1500936982043_0.3095034246798605","host":"s3://npm-registry-packages"}},"1.2.0-alpha.dc93c0dc":{"name":"primer-forms","version":"1.2.0-alpha.dc93c0dc","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.dc93c0dc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f96e248a9dd5634a5d693bfcd0993d2cd3f35972","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.dc93c0dc.tgz","integrity":"sha512-gSs8umJIgpYz6tsyRy4pbntpcM5yoeaywRakvtVS/h0MWMRJ1jNT0t/GJHwT6ilXAzEAfjIbnT6vnpHEdNhw8Q==","signatures":[{"sig":"MEUCIBE0jBZSokbG960bYEALqnq3/kKMttsyCdJthS+FRQG2AiEAz8Ywt5vZ0uLfSRWWmN0gUHwQukDeBpz3MXVxGd5ykNA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"f96e248a9dd5634a5d693bfcd0993d2cd3f35972","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.dc93c0dc"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.dc93c0dc.tgz_1500937336944_0.4496962281409651","host":"s3://npm-registry-packages"}},"1.2.0-alpha.18393b95":{"name":"primer-forms","version":"1.2.0-alpha.18393b95","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.18393b95","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"de95f96439f52d2d89df97055d623f27b6b201ae","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.18393b95.tgz","integrity":"sha512-7nGMvWs2ArJjCvOpI62vWzSnCqzOB66JFAcu/02YMW+R9HX0YwyccduGvRoVDCOtV5WhzumrcKxJddPwgwOV5w==","signatures":[{"sig":"MEUCIDf/TB8N0cpf/PHshJ6Z0em2vH220VMC8mQS4uUF+rTMAiEA2LBEX7ETgC4YupTB84vH/aRUTLnkkcBUWKDyUPxeQOc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"de95f96439f52d2d89df97055d623f27b6b201ae","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.18393b95"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.18393b95.tgz_1500937638961_0.46690834290347993","host":"s3://npm-registry-packages"}},"1.2.0-alpha.dc1c6de7":{"name":"primer-forms","version":"1.2.0-alpha.dc1c6de7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.dc1c6de7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2db27716eafa2f18f66935f2f7cf74330efbe12e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.dc1c6de7.tgz","integrity":"sha512-ElQtk75NzjuDpo0YGHYC02mE+IEtd4OdkTCMIgYDunXSI5rjlyYD4HFyaCS9B51QgV3tbq0F0V3S9Bz1/E2Uzg==","signatures":[{"sig":"MEUCIGZjsP4nKr+lwIrSFRddryzvN/QWHboex31J3FFXRxeQAiEA9SvcVRgQ8nKgvRgpgsGJE4VXAKgmhq8qyFc+qqen+6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"2db27716eafa2f18f66935f2f7cf74330efbe12e","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.dc1c6de7"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.dc1c6de7.tgz_1500938407653_0.41058118431828916","host":"s3://npm-registry-packages"}},"1.2.0-alpha.e353ed52":{"name":"primer-forms","version":"1.2.0-alpha.e353ed52","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.e353ed52","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d50590bfbd4dbe0c04a33b207ab3adaf5997d3c7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.e353ed52.tgz","integrity":"sha512-6d6hFQE0D53bTdM059iBp2XhzLDrHYLFRhaL2bDR04+nZ6aC/GwnhX62GZW1hs57wX7tg/1ls6yb0upnnBX9SQ==","signatures":[{"sig":"MEUCIDTW97r7qkM5OzGdrec78q9NjFX0PZvLQWnqv1HyeX8YAiEAlDThWBSR788K41zmGSNomr7UEHhVkH39KxQnOvpZ6Ro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d50590bfbd4dbe0c04a33b207ab3adaf5997d3c7","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.e353ed52"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.e353ed52.tgz_1500963864613_0.9857638932298869","host":"s3://npm-registry-packages"}},"1.1.1-rc.11":{"name":"primer-forms","version":"1.1.1-rc.11","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"3b640fef6dfbde898a65449e0b3130d4abeea239","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.11.tgz","integrity":"sha512-0mVtVARkd6X3ijWZ8nbEJsPmlExLSluIlZoGexC5az+O6y6v2jJGr+wxhK2XIOIEYUDonkwIYxLdkqwJQRqNUw==","signatures":[{"sig":"MEYCIQDdhbEwdJFmZqJcF8pAEC/I9RN8ybcJIimaEyCE6AlDygIhAP7e+vkmaWyyNYPM+Bq1dmkWoCpPdyfNHy6qFJw9GqSQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"3b640fef6dfbde898a65449e0b3130d4abeea239","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.11.tgz_1501007481225_0.76159781916067","host":"s3://npm-registry-packages"}},"1.1.1-rc.12":{"name":"primer-forms","version":"1.1.1-rc.12","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4d439822ad0ed4b2eae688e241a091555849d5ad","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.12.tgz","integrity":"sha512-uVGx5XvPnQOOrtURk2+mmKUJvHFL8q7kJpz/ysrhC++vZBi8fE05GmgAbkp2X/FGG5PAsN5cLuy0dvvoCs8gvw==","signatures":[{"sig":"MEYCIQCwLE186cfEeXgr6PUf08r46nhL9csNk9V0ZP02G7LY3gIhAIKL+cCaQyDBT4AoWiTZV4mDVXVrvbdyHWxJNmGCEyvH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"4d439822ad0ed4b2eae688e241a091555849d5ad","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.12.tgz_1501012909870_0.20745347393676639","host":"s3://npm-registry-packages"}},"1.2.0-alpha.4f0a1ee6":{"name":"primer-forms","version":"1.2.0-alpha.4f0a1ee6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.4f0a1ee6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8e01054426421d94aed33c38bf1b775c5cd509a8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.4f0a1ee6.tgz","integrity":"sha512-wybpDRU+36tbz/YNrNZNbpF1mfVUuPBhvXQ50chjJNaXgOy1N8mIqFc/gYQYYM+dobynNtpCW4SX7ZF9NJDa9g==","signatures":[{"sig":"MEUCIQC7S3WNcjnFHFxvK8cvPWTKRxCIP/eb5olSGtu17PAr2AIgCQjYb1DNv4EnkQwVcSqxeqACvalENZ69fFCz+q0VMVs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"8e01054426421d94aed33c38bf1b775c5cd509a8","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.4f0a1ee6"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.4f0a1ee6.tgz_1501017715965_0.0030702624935656786","host":"s3://npm-registry-packages"}},"1.1.1-rc.13":{"name":"primer-forms","version":"1.1.1-rc.13","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"955a05a0d3ae16016bbd922fc95d21f49aea8514","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.13.tgz","integrity":"sha512-1KjAUQjcvMzDIyjn4CFz1wiAZoh9Hhs4nJraiGG9oP+CBJYsSI2+T32GS84YJtdUNMc11e0h5FrgPr/eqnoQTg==","signatures":[{"sig":"MEYCIQC6Kyv9YKM2dLqRQNb6EMH5ZeTfUVN1wNqkibNbbzRjWAIhALWFvfwwgdkcy8bLKuw3CBBP4ztf/5zO07S2Va6FV4zv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"955a05a0d3ae16016bbd922fc95d21f49aea8514","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.13.tgz_1501018765796_0.345277521526441","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"primer-forms","version":"1.1.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d1587a2050a556c28552c69747716109bc1bc9e3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1.tgz","integrity":"sha512-e+hwI5pbpT6m6I2D6jUrLzc2SotsBc8PpDnkCmDOdi9ZQZxB/sOoEpxJuTpdWzzD0QqiGmwCISU8SxzeHh7QLQ==","signatures":[{"sig":"MEUCIFi7MI08bDfw68+d09HjjX85ldrfl8DFg2cl8w/r4iF1AiEAk0kFpv0nQQ3u5zWBf7epIqQSk/CzmT9vbHCWf1J1eAo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d1587a2050a556c28552c69747716109bc1bc9e3","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm run build && npm run lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{"stylelint":"^7.13.0","primer-module-build":"*","stylelint-config-primer":"^2.0.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1.tgz_1501022690508_0.23728188080713153","host":"s3://npm-registry-packages"}},"1.2.0-alpha.bcb1bad6":{"name":"primer-forms","version":"1.2.0-alpha.bcb1bad6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.bcb1bad6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b56c1a2cfdaae3c0a5c61c675f7def0e04cb3263","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.bcb1bad6.tgz","integrity":"sha512-ZM6bJpDSWJdjd9L0RZXKhiFQTH/sFoKaqan+9JBkMl+ubSB0QxFERJNinGhPAfqM5zXNz32U6GPXxdvkpqwccw==","signatures":[{"sig":"MEUCIQCm3ktVFPkljAGZq/Cwr8drr8mfSNIbHLnpF0NPTsO5fQIgasA9ZjD3rWrqqVOYbbdQmJE6/pRKZ8NK/OaCsWbv+Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"b56c1a2cfdaae3c0a5c61c675f7def0e04cb3263","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.bcb1bad6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.bcb1bad6.tgz_1501106757696_0.34283216460607946","host":"s3://npm-registry-packages"}},"1.2.0-alpha.e9cfc652":{"name":"primer-forms","version":"1.2.0-alpha.e9cfc652","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.e9cfc652","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"040ee162394d2d9e9cb60950b3da09c7977950d7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.e9cfc652.tgz","integrity":"sha512-zggOiY9RP+HJrgkDe0/lnkVpcieGpdXA4s/hC/Ccyk4ffqaX2ynVtG0F16SSgVpyxGxASJ4zLfGiZDC6tQHTFw==","signatures":[{"sig":"MEQCIGBX5fOTiVhDrwiHHmmjQd6qA0ZiOrURHk70o+MUyvcmAiA9eDR1ytEpnFMn9XwOWPJQ4HskWp8F457snHyLRrZFTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"040ee162394d2d9e9cb60950b3da09c7977950d7","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.e9cfc652"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.e9cfc652.tgz_1501107235960_0.5068298024125397","host":"s3://npm-registry-packages"}},"1.2.0-alpha.95570ed3":{"name":"primer-forms","version":"1.2.0-alpha.95570ed3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.95570ed3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c99e50f5d1c61ac3f793540d97647410fe6a59db","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.95570ed3.tgz","integrity":"sha512-47tHaEC35M7NvUGy2DuVAgL7RIqqYCy2alWZIhE3xUerNB4dWfORedJiaEbUAmjTNir7W/SulHQRw6V1rg4h9Q==","signatures":[{"sig":"MEUCIQD6s8bP+53uwf6ei/SpfQNV0J8MzcBarZatF3Te1mOxbgIgHjVZeuCU/OO4c19Z7SYdjBZ7iCpvEGK71UJFkGPI5vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"c99e50f5d1c61ac3f793540d97647410fe6a59db","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.95570ed3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.95570ed3.tgz_1501107456359_0.07396340509876609","host":"s3://npm-registry-packages"}},"1.2.0-alpha.d6a171d3":{"name":"primer-forms","version":"1.2.0-alpha.d6a171d3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.d6a171d3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"26b0ffd5652049c9e40a23dced44d29310661bd9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.d6a171d3.tgz","integrity":"sha512-DnDzMH03hBmBAjbMQgfbTwn/DOzVKBB7JKqS0vYsoh4g4SVdDfXUgdH2A24LjsRlmHKX59St2/yTBPESo/T9Sw==","signatures":[{"sig":"MEUCIQCnvmDrNlqyyO4fYiMc4FrOYZUHGttCgO9sFqxsntXxcAIgaK02c8jvRpAoV1H7MBhp29mICOyQet5xnUd2h5EfBlg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"26b0ffd5652049c9e40a23dced44d29310661bd9","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.d6a171d3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.d6a171d3.tgz_1501108475576_0.007026954321190715","host":"s3://npm-registry-packages"}},"1.2.0-alpha.df13c7be":{"name":"primer-forms","version":"1.2.0-alpha.df13c7be","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.df13c7be","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"42d4f43445366b417d9c6788e1faae6ebaf34e91","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.df13c7be.tgz","integrity":"sha512-GDv2z/0Vr0tc4s3PTnTXD2xma1TQzmGBlW9c0pNUUoqKqU8hOYAy8OCeQNEv6Yhmwtt/gDWuS40t8oJ9rkL36g==","signatures":[{"sig":"MEUCIQDmkHmOFBcuS0nmLhtKXBKhCSIjl4yG+dxpTr7OQJ4rdgIgMnRc6Lgn2ayEDZoeQek6xL4BKcLitquKZoEpEvEeedg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"42d4f43445366b417d9c6788e1faae6ebaf34e91","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.df13c7be"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.df13c7be.tgz_1501110830887_0.2596847862005234","host":"s3://npm-registry-packages"}},"1.2.0-alpha.d66d9e50":{"name":"primer-forms","version":"1.2.0-alpha.d66d9e50","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.d66d9e50","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e75e6ea711dd1e0610ca10eb445bb726cfe67097","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.d66d9e50.tgz","integrity":"sha512-9KjepQDV1uqMyOnQDF1DQjF+nCquMgrLMcLoIjntTP3vD19+DjBPVpk1x5/+Y4NL/j6BhBDxyJw11AxMzHYgag==","signatures":[{"sig":"MEYCIQCcEkXhv8mp496xxRfvcyL1M+xqDxjsmQWHRRMMUWUwdgIhALcgNc6BeqOHRUKbl6C7cLBlvJmh5sJbuwq7TiygWK5B","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"e75e6ea711dd1e0610ca10eb445bb726cfe67097","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.d66d9e50"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.d66d9e50.tgz_1501116247384_0.24566797236911952","host":"s3://npm-registry-packages"}},"1.2.0-alpha.5393754b":{"name":"primer-forms","version":"1.2.0-alpha.5393754b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.5393754b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d10a0d5c901593f57f74db155feca995fe15faef","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.5393754b.tgz","integrity":"sha512-FIjCDw/CSa2PO4PpaTer7jcoE+gazbU4zi1ic8Izfpcl7+B7/dWhOwsQPm66nG51nJybHqwWHTsFstDhf8v9tQ==","signatures":[{"sig":"MEUCIQCgJnjeAswUJRznYsYhrvklidkhVsV1zBUL26vnVemYCAIgaeCdYLT5bNVkH7x9YF/oh7NaSvb2xZevQQrgvML6nXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"d10a0d5c901593f57f74db155feca995fe15faef","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.5393754b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.5393754b.tgz_1501116925507_0.7963669367600232","host":"s3://npm-registry-packages"}},"1.2.0-alpha.5966046b":{"name":"primer-forms","version":"1.2.0-alpha.5966046b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.5966046b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9794e2c6dcaf5489e249ece5d48c1b85aff5d52a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.5966046b.tgz","integrity":"sha512-8DNwiDdSc4f0PicJa2AvX1mAaHk/hXp8RhvgXKO74AqSANMrUHiNjmNf29TRjJ5XLbv3lEaPbI5cj8/B86rfeQ==","signatures":[{"sig":"MEUCIQD13cQNu/kcOqVlzLBEOV0r6r6bTVz47StW7RGsTeIJUgIgOWIfkNX5wXx8s4djtZBqp+jbII+B+ulw6TNJe0lPFCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"9794e2c6dcaf5489e249ece5d48c1b85aff5d52a","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.5966046b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.5966046b.tgz_1501117139673_0.33898328710347414","host":"s3://npm-registry-packages"}},"1.2.0-alpha.3715510e":{"name":"primer-forms","version":"1.2.0-alpha.3715510e","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.3715510e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fbf7616572038364c18283dc7a2637be7d04f6bd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.3715510e.tgz","integrity":"sha512-LZCk3TgDQSTWbPhEoNMG+QpukslrYNYDvc9iCFrMESDnjLWTdD2dhZPUFp3+8PEYrcjW/wxM1W57CjLsuiUiXA==","signatures":[{"sig":"MEUCIQDaaICqZN5J18bTECbp5pFhNA0hu2+GQIwLLaBG29WKgAIgFLHaBRm6/7TJDV93UuiLjmP2/Mlfk5N27Lod7x9bb4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"fbf7616572038364c18283dc7a2637be7d04f6bd","scripts":{"lint":"stylelint **/*.scss -c .stylelintrc.json -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.3715510e"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.3715510e.tgz_1501117270586_0.6116141867823899","host":"s3://npm-registry-packages"}},"1.2.0-alpha.0522c357":{"name":"primer-forms","version":"1.2.0-alpha.0522c357","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.0522c357","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9ccec10ad930934a15b1209226415da66895c5ec","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.0522c357.tgz","integrity":"sha512-IghCztvqKhNltUxBC3L2t7toBb1cZ6PuaukQuKsN4vQlamLzat3G3Cqd1WMoWogWLU7Kqqtwlq1c24HcG1cZ4Q==","signatures":[{"sig":"MEUCIADTK47Vyt27FLuzFN901VWzMutSgcGE9othyaYAw1l/AiEA1v0swkxKXMPjPwemLvQTUhzIBccYBh5aldZdo5hvGZ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"9ccec10ad930934a15b1209226415da66895c5ec","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.0522c357"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.0522c357.tgz_1501187708436_0.6646059958729893","host":"s3://npm-registry-packages"}},"1.2.0-alpha.e7831590":{"name":"primer-forms","version":"1.2.0-alpha.e7831590","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.e7831590","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"45551d5ae61fb30d902f59ffe0c0fe31ebba81ce","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.e7831590.tgz","integrity":"sha512-srvgsRwwk4AKdt3e+RdUEue00LjlxTXcC6L4CqcwzBVrYMoKfkDpI9p5rnfneMyqyube56zYoYZmIfbahNXKGw==","signatures":[{"sig":"MEUCIHuvmpUFh2DEvjgCIKm4NuPzDsjArJC/i7IWmD8EY009AiEA5aQy0EisUbFPGxWweNg5F9QD2ig1ihrSgP3Y9bj/vYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"45551d5ae61fb30d902f59ffe0c0fe31ebba81ce","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.e7831590"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.e7831590.tgz_1501195371977_0.3484698901884258","host":"s3://npm-registry-packages"}},"1.2.0-alpha.0eb9fa6a":{"name":"primer-forms","version":"1.2.0-alpha.0eb9fa6a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.0eb9fa6a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a50d029a4a9f2cfb2eb1a8732093006c874cecc3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.0eb9fa6a.tgz","integrity":"sha512-Z8REuFRn8zbBUJWKCkl8qezhnsRf8wp5nWZ/Lm42MuT7kVx4kaVD+3I6oSv3leLtuPBHHnpL5TvQsXYEOOEMCQ==","signatures":[{"sig":"MEUCIQC/JQxN1vdrGL/2YUrocIsN1CJUW8jTSxeBrwjgQsc+bAIgVN4ZsELZhL+SpKuSC2tRK2zvvmoGmdLb7bQEd+patXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"a50d029a4a9f2cfb2eb1a8732093006c874cecc3","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.0eb9fa6a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.0eb9fa6a.tgz_1501276290082_0.08396413596346974","host":"s3://npm-registry-packages"}},"1.1.1-rc.14":{"name":"primer-forms","version":"1.1.1-rc.14","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.14","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"930012452f955c8c3baf13183829c346ef9e8529","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.14.tgz","integrity":"sha512-H+3AemM/J3ylgrzNmq33nxQGpqVFcKfg2CTzk8XnR74nMHsu0SRNFSo/P7PZ8O3+oJJu7wqP+e2nTotgYdVsAQ==","signatures":[{"sig":"MEUCIQCrCEcnIo7M4GmepgjUXeZPBPDJHdkt5SII01jZ/lxOOQIgDBv/592RPomvDExNyJKhc5CJzldLtj8IkLA3mgJnFdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"930012452f955c8c3baf13183829c346ef9e8529","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.14.tgz_1501526317452_0.7956875341478735","host":"s3://npm-registry-packages"}},"1.1.1-rc.15":{"name":"primer-forms","version":"1.1.1-rc.15","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.1.1-rc.15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"43af126d20460a6d358072ba67d602409f65d414","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.1.1-rc.15.tgz","integrity":"sha512-DPNQtLSI2gD/XNlj1dU38bVb4rVkbzLB/Q5ud1T8dSguhgBuDSSEFjjQ1fWjfjRZdlSA4QXCAMwd/EYMra1qCw==","signatures":[{"sig":"MEUCIQC4huMNAYsZqpKXsIWQMkcBvno8LD1YlRttbRfw6uSEqAIgREQq4xb8mLQyRDyOlzcoYCWNOdLKpgje3vWZrFGAY38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"43af126d20460a6d358072ba67d602409f65d414","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.1.1"},"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.1.1-rc.15.tgz_1501534577284_0.9762254068627954","host":"s3://npm-registry-packages"}},"1.2.0-rc.0":{"name":"primer-forms","version":"1.2.0-rc.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"da515a2c6dace844fa648af186bc295289af21a3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-rc.0.tgz","integrity":"sha512-XoU5EuNToENVJA1OhkE2Q1emyomCBn7SB4P3uDceykr3Lg2/aUmRv/O9Aemk+4qwuBoV86bP2dx4cOAGTpReXw==","signatures":[{"sig":"MEUCIQCkBtEPrezlKgxhH7ALjE50KCFwJaCw66FjuSs0qxAgzwIgMPklqI6fI4avZzQu+6aO5LTRn4JCV1VvsJrvtOiOleA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"da515a2c6dace844fa648af186bc295289af21a3","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-rc.0.tgz_1501535395799_0.9823563338723034","host":"s3://npm-registry-packages"}},"1.2.0-rc.1":{"name":"primer-forms","version":"1.2.0-rc.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"76cc448796d5dec30681607b1f2f826ee0d976b0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-rc.1.tgz","integrity":"sha512-PJh0rcIRUavTRM+ZCX+zZDckD4SbRBRbRhqorrbZqmXYahONmQWoVx2fsd9jzTYFxgatPOTgbiwvbqv/taOEIA==","signatures":[{"sig":"MEQCIHLbTVmYMlxjIbMuLK/6C1EpKqrIlhSqa+epqdzlFqfjAiBH/3VVWzNlCJIBEpdMie0UAmXZ6//wbtjxHjWCHPEUvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"76cc448796d5dec30681607b1f2f826ee0d976b0","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-rc.1.tgz_1501536014776_0.7315744373481721","host":"s3://npm-registry-packages"}},"1.2.0":{"name":"primer-forms","version":"1.2.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"feda526cb03b1dcf07b5cece41a04c7375e4621a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0.tgz","integrity":"sha512-TZJ2er28NMLj48NeSJXhigWkDSWu1PY/tFD6xPnumtZfDr7ebGZvRnPUDOqXVWFkWcd6JUf3vXoHEiudIIeO3w==","signatures":[{"sig":"MEQCIEcvR+cLD0jc/u5ZE6P+TGivK6WRy50NkjOlobgkr6BXAiB5rFtYIXuS42vk9YHaFIT6AqWn3EJr8AiOz8rljaFzFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"feda526cb03b1dcf07b5cece41a04c7375e4621a","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0.tgz_1501538111816_0.4948741488624364","host":"s3://npm-registry-packages"}},"1.3.0-alpha.fe5e3a3d":{"name":"primer-forms","version":"1.3.0-alpha.fe5e3a3d","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.fe5e3a3d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f7fe3b685a65e6562355591785ed8d04eea34c04","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.fe5e3a3d.tgz","integrity":"sha512-JmxrLM55dCyoi2UFNszHfs5ixXWsvDqhb4k0VhhySHfb/KzPKWi6YbgR7ccB3/f1DQ/w9rZvn7TPlCHssnIECg==","signatures":[{"sig":"MEUCIQC2O7LTw/rtOz68aJdoCg4zsjN15L5P2BmaxZtVGgE3ggIgMKYn8Ti+MZCbfFCWonpB0PwOsHfMWnBKfKA22GEuf+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"f7fe3b685a65e6562355591785ed8d04eea34c04","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.fe5e3a3d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.fe5e3a3d.tgz_1501538328203_0.031630300683900714","host":"s3://npm-registry-packages"}},"1.2.0-alpha.835d6aca":{"name":"primer-forms","version":"1.2.0-alpha.835d6aca","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.835d6aca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8857fd467001184edc9dad309ad66510d19ceb02","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.835d6aca.tgz","integrity":"sha512-5KOIvjJwfCtVRVLl8En820S6k0gQ3/m2ek0ETCMtqs3XzncWrmKZ/c/Gf+Mz7YPZ5fVWuJCXB3VPtAH0RnukHw==","signatures":[{"sig":"MEUCIDafeibYFcP+tCoBhTTPLpxTmPSQm3mkVvIKajfxnoEUAiEAgaszaTpOmL7Tr6yMi0jX4PspVpC7nDSQyYRwzVsH+HQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"8857fd467001184edc9dad309ad66510d19ceb02","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.835d6aca"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.835d6aca.tgz_1501792315172_0.6203809329308569","host":"s3://npm-registry-packages"}},"1.2.0-alpha.1e61e099":{"name":"primer-forms","version":"1.2.0-alpha.1e61e099","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.1e61e099","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"328296293dc475c351c42d892eb2d45550e1eb55","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.1e61e099.tgz","integrity":"sha512-yIZxmckhrCHZTY4E+B/mQYxglPGkflira+DhPI9bljtZBlw8lkGzmHfJ24tOcURLKWHm0KwSHNB4SKyiJHTC5g==","signatures":[{"sig":"MEYCIQC0Sq3uxA0ZGFL9Dbn6HxcMPwoaGFcygXcxnG4znrJhTAIhAJRKJ5Tx9xHefDyG1byWXGsQJFjrWO9dHDQ1hDxLCJMZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"328296293dc475c351c42d892eb2d45550e1eb55","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.1e61e099"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.1e61e099.tgz_1501792582636_0.1662009134888649","host":"s3://npm-registry-packages"}},"1.2.0-alpha.872c7b8c":{"name":"primer-forms","version":"1.2.0-alpha.872c7b8c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.872c7b8c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"188c0f40ec5664b36e209cbeabb9620a0e1c24a4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.872c7b8c.tgz","integrity":"sha512-2VcQ4SiHYIC3SdA9H7N2/7BxgNMXzrgFPSYv0hcAr5//s+SYcSa+NGuemOwHnO5VHCX95O9eFnnp3dMl6a+Elw==","signatures":[{"sig":"MEYCIQDa7YzQu/tAIbktF+TQTU7hLMz1nY+jxLUKYTGB8frAiQIhAN9OMHXLiHKov7PcFYLjVkzdzTnAl0b/kCFg1uH8iPwF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"188c0f40ec5664b36e209cbeabb9620a0e1c24a4","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.872c7b8c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.872c7b8c.tgz_1501792688771_0.6850109086371958","host":"s3://npm-registry-packages"}},"1.2.0-alpha.a90a48ad":{"name":"primer-forms","version":"1.2.0-alpha.a90a48ad","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.a90a48ad","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a46b0e86f214d45c1f9be35f554cf459b0f68f9e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.a90a48ad.tgz","integrity":"sha512-racDcwDxphAISwww+QRxZ5a409oox3n55hfEGH+yisN8rUVFNZoYCgJcQKCDjMAEp2LY3KugKzeDGj7aMXvImA==","signatures":[{"sig":"MEQCIC7VSxdCVYTilfxfyig+G31hxDOImH7orByxYeoocBUyAiA17UiXPaaW+VFQDC6o2l7lW8Hwm9fw2PzdcAbj+OrD/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"a46b0e86f214d45c1f9be35f554cf459b0f68f9e","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.a90a48ad"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.a90a48ad.tgz_1501800662584_0.12339580105617642","host":"s3://npm-registry-packages"}},"1.2.0-alpha.d4d52eda":{"name":"primer-forms","version":"1.2.0-alpha.d4d52eda","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.d4d52eda","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fb04453e707663bfd7de09d9d9d816d51313c105","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.d4d52eda.tgz","integrity":"sha512-UuvJoecLXLUFqOLE2ENYVvOmN8Hayi0cfs/gjgICpX1AY3BbGl4HbEQpIHIyWzB9OpZ7uk/aByVLCZw6hDs3XA==","signatures":[{"sig":"MEUCIQDwmm7jJ/pj1+Bs3JqyGdfRM6yf2S8vJ1fDEzv7jeXgSwIgRc+dLvJSxI69yLYJU4KoGgX4URDwSlXsuTlgsabSdRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"fb04453e707663bfd7de09d9d9d816d51313c105","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.d4d52eda"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.d4d52eda.tgz_1501800892517_0.2560767764225602","host":"s3://npm-registry-packages"}},"1.2.0-alpha.b11ddab3":{"name":"primer-forms","version":"1.2.0-alpha.b11ddab3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.2.0-alpha.b11ddab3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"67dd7fb49bf6d318b7843f040b45463521b14a95","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.2.0-alpha.b11ddab3.tgz","integrity":"sha512-7NbhdOrqY/iXnvdsvra/Ap6rw7G3EQRsjXDwijkhL0Rcdc6IuR031QYdoN8ccvDyOcubDXAy1mNwfGrDwKnbaQ==","signatures":[{"sig":"MEYCIQCT+K2V/pbahpfww3fUF860dr9sm+PGTLeLTfqqGrGwZQIhAO/0czKiyXYNvtH0tZ3iB3jUvV+MrLdYtbmDSGkcUIgf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"67dd7fb49bf6d318b7843f040b45463521b14a95","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.2.0-alpha.b11ddab3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.2.0-alpha.b11ddab3.tgz_1501883095222_0.27925474918447435","host":"s3://npm-registry-packages"}},"1.3.0-alpha.6cf70ab8":{"name":"primer-forms","version":"1.3.0-alpha.6cf70ab8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.6cf70ab8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"09094ea4ec38069139fbc90a08dabda8fb988b09","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.6cf70ab8.tgz","integrity":"sha512-LTRr/Yh2NndLYO8/gcoFygsfdn5nUD+PpSvOXqN0TduLIan135eT4La02V61cBc2r8dVicYxp0Cjvl2QU7Q7Xw==","signatures":[{"sig":"MEUCIQDAA640UrTqA+oRuHhyg6z5Gq2D4QPbujJVekFUBiTLvAIgOYOP4NOWJwYtdtUASn3bzbBuqkDe0zGN/uN2BUPxZQE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"09094ea4ec38069139fbc90a08dabda8fb988b09","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.6cf70ab8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.6cf70ab8.tgz_1502211867476_0.4247069184202701","host":"s3://npm-registry-packages"}},"1.3.0-alpha.cd9a484a":{"name":"primer-forms","version":"1.3.0-alpha.cd9a484a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.cd9a484a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"083a469438dede2a87d50e6164e4a3bb8d974b01","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.cd9a484a.tgz","integrity":"sha512-QFyrY+0qicRlabKUjsQUfkuAyq5SPtq0oNpN7GjBHAbD4XadDVHt9yT5UXQc15nA3mgdfKEa1P+MsHxcjIvk2w==","signatures":[{"sig":"MEQCIAnCdAPPCHiIQ/InSrKwKXxbg/5zjiAMfEXAQ63MwjqFAiAEJOTyBOnykXl/f0fV5HM2X6ug+t6z8WBV6NCp/D65wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"083a469438dede2a87d50e6164e4a3bb8d974b01","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.cd9a484a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.cd9a484a.tgz_1502305934905_0.808589176973328","host":"s3://npm-registry-packages"}},"1.3.0-alpha.5125486c":{"name":"primer-forms","version":"1.3.0-alpha.5125486c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.5125486c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5c8ba18a1aac164c4036a992aa1da0ec0d091d50","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.5125486c.tgz","integrity":"sha512-KjLc8936ze0SdVuPGoOmTpBMF8gKSmM1JHV8YjHSyV0r0QQuJsoR8MoZJAMQC5ejHwaW9WKxbLPYmqjJYZcNsQ==","signatures":[{"sig":"MEUCIQCxmOzbs+ipYWpnX5tiwvKQ5J1A/nXEqm+pMaSn1brd6QIgTEmc2MR2cYQ+G5YATv6NuQxah0w73kucSOHELam0+G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"5c8ba18a1aac164c4036a992aa1da0ec0d091d50","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.5125486c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.5125486c.tgz_1502312328988_0.6074658746365458","host":"s3://npm-registry-packages"}},"1.3.0-alpha.34671876":{"name":"primer-forms","version":"1.3.0-alpha.34671876","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.34671876","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"84d347c6a1afd1588617dd1f366fc460eb83a7dc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.34671876.tgz","integrity":"sha512-1WEtcdjE+nOJc9qGiOmPbBLvXhoI1jdZ+UFmVaoI8iGnUxMm5b9hbZGgXMGJCBwNma5zAt0hPlRr223hwWYZ/Q==","signatures":[{"sig":"MEQCIHlYSdDInwVtf5bdYtb3/GfxQlRLgbtTaV1R2p57zaPfAiBkc2PTy0eeJjdrR5jxjhfeJuHdXEsYcId0SqAPihhuqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"84d347c6a1afd1588617dd1f366fc460eb83a7dc","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.34671876"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.34671876.tgz_1502317529891_0.2849282342940569","host":"s3://npm-registry-packages"}},"1.3.0-alpha.4607fa12":{"name":"primer-forms","version":"1.3.0-alpha.4607fa12","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.4607fa12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"80acf0de9e55d44b94f3c50ee6c06796bca5c464","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.4607fa12.tgz","integrity":"sha512-dVGaDXF37oiTmQLAKuF0LtNABkYNcWMHOLMIysElTMYNe319dO0NpB0V0eGKv3cqC2zI6wgiKgxDJnhePrpLbA==","signatures":[{"sig":"MEQCIHlAaOHd8hZIll6YqOOv4fzTdi4VeQyT6XmR3SM4CgE+AiA9wNQJzjDD8/UlTuYtsw/2trW2pXIHvWl5ZLcfRfFtWA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"80acf0de9e55d44b94f3c50ee6c06796bca5c464","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.4607fa12"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.4607fa12.tgz_1502318029236_0.20530069386586547","host":"s3://npm-registry-packages"}},"1.3.0-alpha.0dd13c10":{"name":"primer-forms","version":"1.3.0-alpha.0dd13c10","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.0dd13c10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0a7c009cceee3a7a0c7d94e4457fac2045f01a19","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.0dd13c10.tgz","integrity":"sha512-Fmqw9CQGImIzkKnugu5SEAJGccM8QySQ+ogfL/5s08vL8dviStrBYjlV16xCDOwFvz8BhH6s0B5OlFmWexWThA==","signatures":[{"sig":"MEUCIQDEC1C8avXj6IB10LtTqpZTXarhkbeXki85vnoFQXHRbAIgWu/2H13fSTEEa/iKJR6YNH7wRxxqvzPLT8iRXrFZ+UQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","_shasum":"0a7c009cceee3a7a0c7d94e4457fac2045f01a19","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.0dd13c10"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.0dd13c10.tgz_1502319241284_0.40930248983204365","host":"s3://npm-registry-packages"}},"1.3.0-alpha.a2faeb3f":{"name":"primer-forms","version":"1.3.0-alpha.a2faeb3f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.a2faeb3f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1b11ea59e52d12838117fd7669adcace5786b958","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.a2faeb3f.tgz","integrity":"sha512-4Bce0w92r/IYlJiPa46KmX4Nbygkr/JK/P3Z7XwEI1UioQVkLUthzCvmQHv/5hD4WIFgzyP3C4TeHgmM+7+9gQ==","signatures":[{"sig":"MEUCIQCXH7yGGyEVEtgYybYNogKjkMZAX44bwLskszP/Wc6w4gIgZpf/UNZMtylwhO++UKqSU7+MsnVyPH8ezEfJeQCLsnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1b11ea59e52d12838117fd7669adcace5786b958","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.a2faeb3f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.a2faeb3f.tgz_1502407868580_0.5656401079613715","host":"s3://npm-registry-packages"}},"1.3.0-alpha.c350fb30":{"name":"primer-forms","version":"1.3.0-alpha.c350fb30","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.c350fb30","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"090501bc140389ab966016781ca7b057b192b479","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.c350fb30.tgz","integrity":"sha512-MC45/3TSiTpBNUM683cGklEbrMDaZaXcbzjtSdaLxxMhkQcTSg7DSH2aCvcVLbYbLXva4Nstm+XOeNW4gFr+zg==","signatures":[{"sig":"MEYCIQCqWouPd8psVkcY/ooB7S24v1hNWoVDsZmzdv+ruRrO+wIhAP0BXh7ALklXXbz0noP4KsfoEw3K1fRVnQEijCq+ulIu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"090501bc140389ab966016781ca7b057b192b479","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"^4.3.0-alpha.c350fb30"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.c350fb30.tgz_1502408075668_0.7553138295188546","host":"s3://npm-registry-packages"}},"1.3.0-alpha.ed908c17":{"name":"primer-forms","version":"1.3.0-alpha.ed908c17","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.ed908c17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"09f9706dbcd1651721a2c82902985a4ce2b06c5a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.ed908c17.tgz","integrity":"sha512-U9Ytngcfrh4N9nwmdx/Y+A8aVFxh9t5WMl0il1a/Lfm/jeozeNfoN2AR4Mlq9Js74V1H8w1ND5Cs+h83Lwv2+g==","signatures":[{"sig":"MEUCIDQS+eeeVB2yZ5E9wU0Dy/AnaA8FV4ybV0oxRM4QgWNzAiEAqzR3RPR1M92iK5Wk8b7FRvnsIYzg3b2GhG/N3ghTjgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"09f9706dbcd1651721a2c82902985a4ce2b06c5a","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.ed908c17"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.ed908c17.tgz_1502468153532_0.8659747277852148","host":"s3://npm-registry-packages"}},"1.3.0-rc.0":{"name":"primer-forms","version":"1.3.0-rc.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2252499a252d0518b4d799a81bbcebf7a9d77a29","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.0.tgz","integrity":"sha512-m5yIWcK3z348I300hKST6IVRbQCd9pZVRCWsF/BEfuYOL06hEBam5L0mEHdU/hvF2BQ4X6XqcBQsz7yrYzVApg==","signatures":[{"sig":"MEQCIE/GB/j7BIe3v5mVGMxarQHCY+pY1sbIMhAykOW1PoVNAiA3ugsRYdwwlJKWyUsfXBLAJuBGsF5ygsXUUekt7qGp5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2252499a252d0518b4d799a81bbcebf7a9d77a29","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.0.tgz_1502484280974_0.9026108896359801","host":"s3://npm-registry-packages"}},"1.3.0-alpha.2c694a6f":{"name":"primer-forms","version":"1.3.0-alpha.2c694a6f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.2c694a6f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cbe8f695099ec39490139aed184cc76a00a16ac0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.2c694a6f.tgz","integrity":"sha512-ePrUlNGqvY0PTK8YLgDf1TdiixtWV6GLQVTjUr6uu8ue2bDEs9X3eUQAqAr2KeVNRSjj05Gk8JIpNwY6uyWWnw==","signatures":[{"sig":"MEUCIQDVluR7YNB1p638+6h3mQq25S08rDuEjP+sdh4D2qOLqgIgdQIbo/mb1iB+t5CmCsSi9ZNeLzuziLpK97u/XiFQa7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cbe8f695099ec39490139aed184cc76a00a16ac0","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.2c694a6f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.2c694a6f.tgz_1502486398877_0.8453099534381181","host":"s3://npm-registry-packages"}},"1.3.0-alpha.c1ca5b73":{"name":"primer-forms","version":"1.3.0-alpha.c1ca5b73","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.c1ca5b73","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"dabaed64b82fc54fd2c95005068fc138fc4f584a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.c1ca5b73.tgz","integrity":"sha512-sAtbJmyG24PPHIsSZ/n2G+P87ZHetWQVogHkHO/KOQM77Kwm5VJGSSi/OzFnEkgnia8L+4hcF/A8Gy2HeV8MnA==","signatures":[{"sig":"MEQCIBWtvJjmo7gAD6YZffaQ/1bS+7MpQOnziYBhXtAbBhZ8AiB6N5fr5CZVNrwbAoSbZTmqd4+zzKLIWjANx7Sz5hR64A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"dabaed64b82fc54fd2c95005068fc138fc4f584a","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.c1ca5b73"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.c1ca5b73.tgz_1502486735658_0.20831283810548484","host":"s3://npm-registry-packages"}},"1.3.0-alpha.1ea1c542":{"name":"primer-forms","version":"1.3.0-alpha.1ea1c542","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.1ea1c542","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d91a8fe905905ae69635b1529d9967ef35b56103","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.1ea1c542.tgz","integrity":"sha512-PkEHT/+Mlo/MwLssKdQwZ2eqGhYhC00+1WHJNcxYAFCNOjRRzBc5aa5vgkrbI4PDXKwKGcee1PB9iXta40WL+A==","signatures":[{"sig":"MEUCIQDSjTlYYk+TMYvJSr1kLXXoCbl00AXc7G51yxraftIlfwIgDB5F/sqTJGr1zXrsROf5+El9ylrhj94ILRtnwQNOGQA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d91a8fe905905ae69635b1529d9967ef35b56103","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.1ea1c542"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.1ea1c542.tgz_1502490436941_0.897486568428576","host":"s3://npm-registry-packages"}},"1.3.0-alpha.63868222":{"name":"primer-forms","version":"1.3.0-alpha.63868222","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.63868222","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"55b540c6ec4b7731b52e7148aa700a13989fc1d0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.63868222.tgz","integrity":"sha512-UUx0SVIs+Jaf3kPrEtyLr+Ft9UyAXtTd6wibCCmWDM/lqvfNdzjLKttcuBAS8stSCuIsi8/UFAnKd0kXHT1lmg==","signatures":[{"sig":"MEUCIQCuP1YVbkjV08Vbnykkod3EoG+W5pofZ4FTIuP2QBePuAIgYNK2eltBaz+EKLq8hDN4M/uet1wYY+z4BtNw03zIbUg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"55b540c6ec4b7731b52e7148aa700a13989fc1d0","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.63868222"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.63868222.tgz_1502490667897_0.45700548053719103","host":"s3://npm-registry-packages"}},"1.3.0-alpha.6767e15b":{"name":"primer-forms","version":"1.3.0-alpha.6767e15b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.6767e15b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d142962bbec22540b6f29087045125216b64a862","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.6767e15b.tgz","integrity":"sha512-Cl6AIUE9rH6jbJ777muTAiDy1Zs1kdGVBbv72Qdx4IXtSfJcxWAffqypSVc+FJAlwO5OcDm/fTs0UZhMTsV7UQ==","signatures":[{"sig":"MEYCIQCQ/K46Dyi3yPN3vKu9qKK/Y/IynW8jPqDnxA1z3UJgRQIhAImgbdG8EJrpipetZBZagFTSrZS887FVEprCKfQ/LnTW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d142962bbec22540b6f29087045125216b64a862","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.6767e15b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.6767e15b.tgz_1502491334440_0.26325077866204083","host":"s3://npm-registry-packages"}},"1.3.0-alpha.bc699360":{"name":"primer-forms","version":"1.3.0-alpha.bc699360","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.bc699360","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9587f1fda6b9160f88c37a975b11eb0935268862","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.bc699360.tgz","integrity":"sha512-MIssYHOFmktizF4wwddeAB3k7uCsUaKvmK0AQIdMOj8k5HxVMQf99jWPH33BPEE7MjgZMjiEoUK5FmppilHVjg==","signatures":[{"sig":"MEYCIQDQcyZwQpateLTFkrlpvCnuSQHBmQtF26+DxRpRgTFXCAIhANJCQsdt2d5Y6N88dSTM1a9/p1lC3xQ2oQ3P1JGJ/xIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9587f1fda6b9160f88c37a975b11eb0935268862","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.bc699360"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.bc699360.tgz_1502754238494_0.3796299500390887","host":"s3://npm-registry-packages"}},"1.3.0-alpha.86dc9d85":{"name":"primer-forms","version":"1.3.0-alpha.86dc9d85","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.86dc9d85","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b2d1c8b81d526af2b9dcac276ae01d7676248223","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.86dc9d85.tgz","integrity":"sha512-v6gLsmoZ3oTJaYEODm32K1BYN4yeTh90tT97WzMlrNerh40OSR/PqxqoVZIwOa4/8pH5rbq9eKgb5oN8v/YnSQ==","signatures":[{"sig":"MEUCIFhgamZfS6sbdyTrgaBh0/9Khj5uCMX4c0VSFdoQ4NBFAiEA4gOAoObNJCu0IKQiOFh0vKoxHVTJ4igITbFzio0ivN4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b2d1c8b81d526af2b9dcac276ae01d7676248223","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.86dc9d85"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.86dc9d85.tgz_1502754411180_0.9480813031550497","host":"s3://npm-registry-packages"}},"1.3.0-alpha.0794a612":{"name":"primer-forms","version":"1.3.0-alpha.0794a612","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.0794a612","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5203e772824c6849dd76a7a6f2cb63608cdb8554","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.0794a612.tgz","integrity":"sha512-Cm9Gl6w+HUk8LvYvUJ5vjzySBRh/iSTwCh8hAujzvRY6tslCBp4Zo05dlFF7tbm7cBx7nCYhU64EYNxDQpnrjg==","signatures":[{"sig":"MEUCIQC7Fe6rc/+nUXmXAi6iUKEsIJBpod2VoPWkMPAhlcc0AgIgXRzBc3UEQVyMlMrKDPhv/zbKQIZJdYmrP2xJ15nFtXo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"5203e772824c6849dd76a7a6f2cb63608cdb8554","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.0794a612"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.0794a612.tgz_1502754520608_0.8453735820949078","host":"s3://npm-registry-packages"}},"1.3.0-alpha.07ea7d95":{"name":"primer-forms","version":"1.3.0-alpha.07ea7d95","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.07ea7d95","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"02324f77d8df850da38f61db280153688756ecdd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.07ea7d95.tgz","integrity":"sha512-lxwYwpmD54eXeww+4fUu2wqgpNu6Gra8dxikAWxo67dzQCdstc5w8apD/fXIdo7ULLWnPVprG426xJBG3qIBew==","signatures":[{"sig":"MEUCIQDoDiRiF8KhBI5WoG54SNVWaAIvVNUbd0MVTkukiLCjHgIgCeGMxfs1sAFf2xJVUB1gMp7LkezQIlGLVfNXnHR2dyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"02324f77d8df850da38f61db280153688756ecdd","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.07ea7d95"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.07ea7d95.tgz_1502754631745_0.4679952752776444","host":"s3://npm-registry-packages"}},"1.3.0-alpha.2d0dc0a9":{"name":"primer-forms","version":"1.3.0-alpha.2d0dc0a9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-alpha.2d0dc0a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"13fd81ce486b1dcafa896842685586f8d9c170f5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-alpha.2d0dc0a9.tgz","integrity":"sha512-tXh9xWTGG89Kkw0RVz+ryeo6njUp7vuQcQ1r7+yul2ID3cKYCi1IENIvnONqk3t2qp+XizCKZBvfacdhRC5s5A==","signatures":[{"sig":"MEQCIGeGAViAjv2yAox6D4sE3ZqLZo0H0kblpjENxtpxjylZAiA+D4w3vctVkt17AXDWo3nn0RiUap6GvL0/n2pCyHiTug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"13fd81ce486b1dcafa896842685586f8d9c170f5","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0-alpha.2d0dc0a9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-alpha.2d0dc0a9.tgz_1502819152712_0.12603164394386113","host":"s3://npm-registry-packages"}},"1.3.0-rc.1":{"name":"primer-forms","version":"1.3.0-rc.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5d7e7b74865bd4647e4c7a9218bc85baee954320","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.1.tgz","integrity":"sha512-CbdjT7TJv7bCO64qHQoOVbRmvCYDC50WjA0u7v4JKZgUfuijRTGjBSWMTVN0Z4PgEu17hMHjevrJ6mgA02EmPw==","signatures":[{"sig":"MEQCIEyyfsCghPPcnCEccqPMNSs6IS6K591J2wca7cEtEfW8AiBrjSkgfNQ0shlPK0n5c16BqW7YOi1uG4nsVdGgDUs4nQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"5d7e7b74865bd4647e4c7a9218bc85baee954320","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.1.tgz_1502824172298_0.09065176011063159","host":"s3://npm-registry-packages"}},"1.4.0-alpha.725699da":{"name":"primer-forms","version":"1.4.0-alpha.725699da","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.725699da","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f1897b799d00ff636fdb750de89ae3115bc5f447","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.725699da.tgz","integrity":"sha512-0o8Pek21Jb2O0A8Ipjigr8TcpYWofwUQVdLxcx8S48zJTbDfzxmwUp5pmYvRgqrvEkpDmaEETHl+o2zl+55Pcg==","signatures":[{"sig":"MEUCIQCvqbXC7UJQZsYALyeRRkdyrSqiZiA1JQWe4ORVCLPniQIgCaERMHYSvahmuBkP9BqK+oBvAYImY6ZXz+pEx6ycP/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f1897b799d00ff636fdb750de89ae3115bc5f447","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.725699da"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.725699da.tgz_1502920311185_0.8354601934552193","host":"s3://npm-registry-packages"}},"1.4.0-alpha.49431621":{"name":"primer-forms","version":"1.4.0-alpha.49431621","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.49431621","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"765e6b1d345a7f3cb5d78cc88eb872a61a040f50","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.49431621.tgz","integrity":"sha512-m5/FfPBiWbh3udFcfdUmT2M6dluKgz2jsc36p8X8apY8y3bOGqUUG3bObg2CyLi4d31HUVOE0/YAbfg+voHd/Q==","signatures":[{"sig":"MEUCIQCNX1B/fHth1Khv0+wBH8o51frUXSiXBRNb0yGmLt7ueAIgQLYk6uHDFPDXH1VAtBxhy5qKsyBTi52d7aDeoOH1PVo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"765e6b1d345a7f3cb5d78cc88eb872a61a040f50","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.49431621"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.49431621.tgz_1502920388403_0.8639343825634569","host":"s3://npm-registry-packages"}},"1.3.0-rc.2":{"name":"primer-forms","version":"1.3.0-rc.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"00687a3e985910e398f0b69082f66832c7b9d74b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.2.tgz","integrity":"sha512-6BIOB/iCfsu62z58CnuIi1AkNyVW0xBg45obSrwStIoWBaE0kqeRJ1Y6OfMfc8hsfVJo+uBIDtaVzOFpcYrBmw==","signatures":[{"sig":"MEQCIDvgiKlH1br37k5tT7zugvqg2BWyFrEqm3KLk64+iZ4PAiBpQ82SYFAtLoh9LHVMMykBmMP+PCOWiEnXpfy4Ie1PQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"00687a3e985910e398f0b69082f66832c7b9d74b","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.2.tgz_1502923855114_0.8262272563297302","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"primer-forms","version":"1.3.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6c8230e1e720140642fbe6c1b7d559ec23975b70","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0.tgz","integrity":"sha512-ejOhZbq40ctJHX0g7xpeg/RiVbs1Z/DuCaj8fYBxeMaicr3xIKJXyVFFBSYGGWdYPsp3qQTgfjCIosam30aWcQ==","signatures":[{"sig":"MEQCIGIEgerr/4qmWq3vBzzdrJ9cfqZ6vz9bwKtIcy6RCKtqAiAWvFfiDoEFaEwYlAf9wYs4BuCwQ52YsAxiuUYg9ph/6A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6c8230e1e720140642fbe6c1b7d559ec23975b70","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0.tgz_1502924190493_0.8808446186594665","host":"s3://npm-registry-packages"}},"1.4.0-alpha.edbbf3c9":{"name":"primer-forms","version":"1.4.0-alpha.edbbf3c9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.edbbf3c9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"81c56b027a4b9f5694663c8bbaaaa6cf56682252","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.edbbf3c9.tgz","integrity":"sha512-rhveGguvWp9f1uNygw73hztvDuZmMTNYT4GujrokHsUTINcqxuqkZB2ZLcGU52eVLjv0WorGcCx2MvANrzs6kQ==","signatures":[{"sig":"MEUCIQChjh5ad5amlm+FdEy1a0WhZB04SxVUYCVPPu6/5ngAtgIgBkGPBpej5PFQj40/Qw3TsO4tOsv59sAef6olmEHbR98=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"81c56b027a4b9f5694663c8bbaaaa6cf56682252","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.edbbf3c9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.edbbf3c9.tgz_1502924947191_0.04745642771013081","host":"s3://npm-registry-packages"}},"1.4.0-alpha.b040c70a":{"name":"primer-forms","version":"1.4.0-alpha.b040c70a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.b040c70a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"12dfdfbeb5c00fdfbb8c8745e9816a0a2e57a714","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.b040c70a.tgz","integrity":"sha512-eKnAhvRHAizuKafYKXdOTXsevB3WBKRwOYjYlKJVqkmhpEjaoJfqxj2MgviRYkZJQKNBmxJukW2hVQQbkmDLVA==","signatures":[{"sig":"MEUCIQD2HODmkByjJd4BySMgEp1SV74PBU/hl6AUVxSZiDDyowIgVtRYmA9uyg/3vr4Tu0Ltg/BeMyu15GxA1DhRU59xJZ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"12dfdfbeb5c00fdfbb8c8745e9816a0a2e57a714","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.b040c70a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.b040c70a.tgz_1502989515201_0.45039736246690154","host":"s3://npm-registry-packages"}},"1.4.0-alpha.9e852ee7":{"name":"primer-forms","version":"1.4.0-alpha.9e852ee7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.9e852ee7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"268289cb526c4fcb217d75adc8d4a239d6783d8d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.9e852ee7.tgz","integrity":"sha512-WQbI45uc/CZEr7IMya6phIbnvzSGIv8e+meriArc2l7Zlf66YvjSzXnSCgi5l0Z2DdVmGM2DvyIbO8Lrrak/dQ==","signatures":[{"sig":"MEUCIQCIqjTNbhJGI04ZIy4fv5Ae84LKIyhzuJohOs/xO1cO4QIgd2MmUJ73b2ZqqkugIiQEkVyi3O+TMBbDyxTtsXOfNww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"268289cb526c4fcb217d75adc8d4a239d6783d8d","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.9e852ee7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.9e852ee7.tgz_1503012712608_0.38904489763081074","host":"s3://npm-registry-packages"}},"1.4.0-alpha.0201c56b":{"name":"primer-forms","version":"1.4.0-alpha.0201c56b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.0201c56b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fe828c741610815218d273938aae6645d15dfe18","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.0201c56b.tgz","integrity":"sha512-AX+9HHE274eUZFL0P3rQtp+cjvyaJUgvQF11AGS38eSRvJQJ5jGl9RkcS/oxYitrHO+5gz7YLaFEkK3frIOQPw==","signatures":[{"sig":"MEUCIDJPqgE1bC1xH8Yvy84/1XTnVXsrEPn4SgLIRJNZQ6qEAiEAvwB4fMoHExn0JxlXJ9Us9VWy+jg8yIVjbdzpm5Ehmhw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fe828c741610815218d273938aae6645d15dfe18","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.0201c56b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.0201c56b.tgz_1503080589092_0.6725103189237416","host":"s3://npm-registry-packages"}},"1.4.0-alpha.6a78e694":{"name":"primer-forms","version":"1.4.0-alpha.6a78e694","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.6a78e694","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a6b58cfcda5a007f1adeca8c3653ae17f1517d56","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.6a78e694.tgz","integrity":"sha512-FM7qYNg7YYvf82dZRwN8TvEkWIfe936tEai7x9Fg3knL0oQkvDZpqO5aVF6ugL/I09/P2kGsBZcZm61Y88j6dQ==","signatures":[{"sig":"MEQCIFOdcsEV0Dj21bGuND9yD8RgCCoozcnHTT+cDHXOBFxCAiBYDUHnfc6zHiuxx0NN1Bfq2LPFkKCMRcSqKW+KSdUkew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a6b58cfcda5a007f1adeca8c3653ae17f1517d56","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.6a78e694"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.6a78e694.tgz_1503080716137_0.8532396820373833","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1cc69b58":{"name":"primer-forms","version":"1.4.0-alpha.1cc69b58","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1cc69b58","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0b82b7f55d5f81ca0d469232d3014397b0a31ee5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1cc69b58.tgz","integrity":"sha512-yrj+5vwqpEEUD4D6lC8E5WeTWNOkYwXQj8NEkxbdXf7fB+oXc5+v1DROquL4Ju4b5gjufTm0uwd3OIoZ+Jt7PQ==","signatures":[{"sig":"MEQCICv9zNr/P3ijJeJzZwn5rQEilrymwoTJWpIorGjPalkIAiB9HexB1nsMwzXz6Vs84QgpJiiuqVPzJiRy/Ki+BrMSJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0b82b7f55d5f81ca0d469232d3014397b0a31ee5","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1cc69b58"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1cc69b58.tgz_1503080752240_0.550041890470311","host":"s3://npm-registry-packages"}},"1.4.0-alpha.e857377f":{"name":"primer-forms","version":"1.4.0-alpha.e857377f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.e857377f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a91f8b00229e4a32922c4d95c2a8439ada0069f8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.e857377f.tgz","integrity":"sha512-UtBW19sPbUClPhrgHI9W5rQvibY1PRi5nW2uzj9twKNyGr+mliHu40/uCfdBEvA8gbWNn84XraDO94i9dtlGcA==","signatures":[{"sig":"MEYCIQCboI1Pywu2EQGxadzy7Y6ZmvY5evCaLVP6mvQb3V78IgIhAKZQtxdCtfUP+kadWbqIFoBZmfOOAUXEcB5ugtx9aVdU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a91f8b00229e4a32922c4d95c2a8439ada0069f8","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.e857377f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.e857377f.tgz_1503095951298_0.026797484839335084","host":"s3://npm-registry-packages"}},"1.4.0-alpha.5e3fb7b7":{"name":"primer-forms","version":"1.4.0-alpha.5e3fb7b7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.5e3fb7b7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"54e293d48f950639636497a71c53b1636e0ef19b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.5e3fb7b7.tgz","integrity":"sha512-5xDCkwtp//SNuaW5gjBA075kRL40ZVR8mgmiGHGAs4kKRNoroTfQDm8xlTHGjp7ALlflFEHZowDwrXjoWXvnpA==","signatures":[{"sig":"MEQCIHw5cWkpIECTcu5z4dpp2tz4qjYH25MexrUaN5YM6Td2AiAh5eRm03cyPlvqdhkbnX+us18uyyMkYl9QbBcQBC+pzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"54e293d48f950639636497a71c53b1636e0ef19b","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.5e3fb7b7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.5e3fb7b7.tgz_1503096306315_0.5502413515932858","host":"s3://npm-registry-packages"}},"1.4.0-alpha.71e36148":{"name":"primer-forms","version":"1.4.0-alpha.71e36148","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.71e36148","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6ce4086fd60ddc4ea8ea18219b34aeef391ccf75","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.71e36148.tgz","integrity":"sha512-yUQYdsLrcZxyK1FC6DAA+8CnMA0TEwCgnkJWqNnmC9P3I2Rw3TqENRxqIusOyR4sH62w4gUr8wfJ5anQFLfz6w==","signatures":[{"sig":"MEUCIQD9n+C08vfLoNu5ZhNiMz/6MZnc6fiLnKlkUh2hCWQRZwIgM65oxR4qkoSPiVpvTIS+ypgsQVgh7LGmGkd7tlCEfgs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6ce4086fd60ddc4ea8ea18219b34aeef391ccf75","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.71e36148"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.71e36148.tgz_1503100055467_0.9024273571558297","host":"s3://npm-registry-packages"}},"1.4.0-alpha.cba147d1":{"name":"primer-forms","version":"1.4.0-alpha.cba147d1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.cba147d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1fb7235aa1e28dec8b24e0260f34c24c15fbaeb8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.cba147d1.tgz","integrity":"sha512-KqavdHdbi/gouk2Pog+0h6nRvXE/YqbW/AKZ3Du3okZrMB/aS+PGq6WrK2bWQl79uyL1IfJ78WsEFTzNfegmeg==","signatures":[{"sig":"MEQCIGypPfnN5h1N673zkvVmIwyAGR3RSJzSYQ/fIFxsmeyAAiB+xm80AKEu3Gl5epQy1TyXo1dWII1MZmlhpJhj1qtXcg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1fb7235aa1e28dec8b24e0260f34c24c15fbaeb8","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.cba147d1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.cba147d1.tgz_1503342366047_0.9013370205648243","host":"s3://npm-registry-packages"}},"1.4.0-alpha.24f38241":{"name":"primer-forms","version":"1.4.0-alpha.24f38241","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.24f38241","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"85b3b3cd745fb45354a4d52ce0240e8379a3ace0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.24f38241.tgz","integrity":"sha512-Oyu/0lZmhEnhvCVFdjnLvUAQUJbe9GCAToxR7R5g8l2QpKtlFnvhJIjiLj8uofc3SlQTSQVJY9QXVk9ihcckrw==","signatures":[{"sig":"MEQCIEyvkFCIuliOGKsYKlufHRaRpZGzx+G/xIIfV6Fglx5EAiBoSkmC3HKNbt/YQTzzGwOLVEVIUDrFEuFcKVtQclM14Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"85b3b3cd745fb45354a4d52ce0240e8379a3ace0","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.24f38241"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.24f38241.tgz_1503359486149_0.688299551140517","host":"s3://npm-registry-packages"}},"1.4.0-alpha.7064500":{"name":"primer-forms","version":"1.4.0-alpha.7064500","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.7064500","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"61638f42b97b0ff9fef6196f6bf588d1ad41efd4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.7064500.tgz","integrity":"sha512-jfBftRAnP6KU7MhkZM6XqkEOU8aq4AB68eqT3EKyVw3BE77mB6ITzi/11sA8p4kgYDHKtbvvHbbuxwWdS2OGJA==","signatures":[{"sig":"MEUCIQDLQJN7aThY+J6W+sDjzh9sgP/SOSSiTiLCtwThsjlQxAIgSriwOBiSZc1OWxB+qZE/Hqb2QIxNF1GSVm9JxvCBsQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"61638f42b97b0ff9fef6196f6bf588d1ad41efd4","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.07064500"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.7064500.tgz_1503415007638_0.3960427469573915","host":"s3://npm-registry-packages"}},"1.4.0-alpha.7f57fd19":{"name":"primer-forms","version":"1.4.0-alpha.7f57fd19","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.7f57fd19","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fb73787a5db243462d2014565130332625aa6597","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.7f57fd19.tgz","integrity":"sha512-t267CrbSpemetZmSJtS2idZKmk2sI0xnqQCIzyF6d6WfblB/okswDpYWII5t4aXivLkcsHnp8hs10aYCX3EIOA==","signatures":[{"sig":"MEQCIAqhw7IjRGtkHE5eAIn+eBPMxw7IXQmcFQzMRlfXSMQVAiA2wTBIQM1FRyjE6mehZuo1hSLo7iPdcE+fEEllT6e+ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fb73787a5db243462d2014565130332625aa6597","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.7f57fd19"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.7f57fd19.tgz_1503527111984_0.5634697095956653","host":"s3://npm-registry-packages"}},"1.3.0-rc.3":{"name":"primer-forms","version":"1.3.0-rc.3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bb598cf847aa1fd157e078f96b101306032d36e5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.3.tgz","integrity":"sha512-wfFGWesRU5ZpD4VKSi66ARe7LpbgjciKMJKHdu4a4ieN4/CLKqXBxz52WavU/TpCMpW3wZgZA6bF4eF6zDa9ig==","signatures":[{"sig":"MEYCIQD7A8afmEydKbseJxrhDZrfMJv6a0Br4hEsAt7QWmrlHwIhAIo+MiC+iUU0sQ3lyaRWK+rPphprwe7oZyDOaoiUHV9p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bb598cf847aa1fd157e078f96b101306032d36e5","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.3.tgz_1503607151725_0.82385434047319","host":"s3://npm-registry-packages"}},"1.4.0-alpha.0444a988":{"name":"primer-forms","version":"1.4.0-alpha.0444a988","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.0444a988","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6af368fb9243895d8a9d591fb62f1e6e4d0113d8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.0444a988.tgz","integrity":"sha512-TiRK2KXeA/vWIxue1odc69ai5DI7rEfJjDymgWAqsFItO/gw4fS1P2LFs3heIanOS3TmS/ynN+4qmLIQJfpLJw==","signatures":[{"sig":"MEQCICurFVUWi0Qfup9TNAy01+kCUbmF8/1blJDdfi/opakjAiBRa4mzUrgJvpaRVoHvJNSL9jRL6IiyzwoMQeHp7NmPhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6af368fb9243895d8a9d591fb62f1e6e4d0113d8","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.0444a988"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.0444a988.tgz_1504025416967_0.06305894046090543","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1dd7c0fc":{"name":"primer-forms","version":"1.4.0-alpha.1dd7c0fc","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1dd7c0fc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7eb55fafd401023dd456a40ea2004c9b97b7b42d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1dd7c0fc.tgz","integrity":"sha512-L0M89UCm4uY/loXCh+sRaciikkZLV6ASVFiVHJx3ca9lMGRVS1C8e7LNRiRByI5OLS9T2xS1L/GU5/OkRrJotg==","signatures":[{"sig":"MEUCIGeox3F9g0y60JfPAEVzp0bdr4+rJRAzJ/8aZs6vnyfAAiEAvmWPZvvGC/SPeU527bk2WcuL0lY5Xbf8QlK8+EjC3FU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7eb55fafd401023dd456a40ea2004c9b97b7b42d","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1dd7c0fc"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1dd7c0fc.tgz_1504134769522_0.9279309387784451","host":"s3://npm-registry-packages"}},"1.4.0-alpha.c3b708a8":{"name":"primer-forms","version":"1.4.0-alpha.c3b708a8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.c3b708a8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"150532226128caf053b63716f28b47e6fb1c4175","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.c3b708a8.tgz","integrity":"sha512-/kBnUxeE3rr0WqW+B9hSHTdY5Qmu93ngOrmQH8kD6bm14tLd49G1TEHCjatxa/hlqxGPD6UcX+a+YMorZvuOlg==","signatures":[{"sig":"MEYCIQDt7IhNRO+ND2g7JOrk7ln1QdNmizfhpO0DRcpbR3TiAAIhAN6i96rcINXeViyR7LG+OT0fno2rwkN3F2GOaP5FgQiD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"150532226128caf053b63716f28b47e6fb1c4175","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.c3b708a8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.c3b708a8.tgz_1504135156359_0.5447254374157637","host":"s3://npm-registry-packages"}},"1.4.0-alpha.7acfa286":{"name":"primer-forms","version":"1.4.0-alpha.7acfa286","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.7acfa286","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8ea3246d3b964c4b6aebf48dc3e67399dcae68d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.7acfa286.tgz","integrity":"sha512-awCOWXj5+R2ucD6jg3+LjFI/0xfTFwOcLAcqA7e0Idl0eP9FiqYHyi4OfKlONsoruJfkce8DuWbJEUOa8O/5zw==","signatures":[{"sig":"MEQCIGL959LN/84ybO4Z/MHe7xiWmxoRQwXE8s2YSjx8WQ6OAiBk858jQgomHUHKaOSBzydyQdKflaOXLj/TcZnDdOAtFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8ea3246d3b964c4b6aebf48dc3e67399dcae68d9","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.7acfa286"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.7acfa286.tgz_1504137092894_0.4756380857434124","host":"s3://npm-registry-packages"}},"1.4.0-alpha.deecf9fc":{"name":"primer-forms","version":"1.4.0-alpha.deecf9fc","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.deecf9fc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9edcc6ac05da22d8644fe8c1bcc9ba3e036411b9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.deecf9fc.tgz","integrity":"sha512-sTZ5CMhq2MvI1gb/Fs1Iw+JVjuIA3aGsr4Nf47r2kIRyzoWCtJ/b8C0zyLRUa62MpNq2FAO8f3xUC+5M/DvD2w==","signatures":[{"sig":"MEYCIQCsIhFN8i5XGXmxq2g6/3ohh0fpToNukmoVdAc6qFV6+wIhANDRDdx9xCssiPPwXEQ1mQ9oRLkiVXeeAipEig8qohL0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9edcc6ac05da22d8644fe8c1bcc9ba3e036411b9","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.deecf9fc"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.deecf9fc.tgz_1504137331660_0.5995186511427164","host":"s3://npm-registry-packages"}},"1.4.0-alpha.8f695d94":{"name":"primer-forms","version":"1.4.0-alpha.8f695d94","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.8f695d94","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6ca356f41b0ec63fa101b07031fe43d8d1067a89","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.8f695d94.tgz","integrity":"sha512-G7IC2k+b8cc8bP4J+O1CYimNpbJhJPOI8CkKYxdxOHgrruUs0Uh7eQLfBrpEWqoNmsWGQ+8VIaJthq4e5psvcQ==","signatures":[{"sig":"MEQCIGXaBYGVZrGUMnd/jH9NZPvifHUth83X2ots+7r8W926AiAWEeVmAtqdaYvX5UhypZUH87GiPPOC1zy+8gqOy33LBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6ca356f41b0ec63fa101b07031fe43d8d1067a89","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.8f695d94"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.8f695d94.tgz_1504198390798_0.6639452686067671","host":"s3://npm-registry-packages"}},"1.4.0-alpha.2e955279":{"name":"primer-forms","version":"1.4.0-alpha.2e955279","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.2e955279","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f9edb1a6beb28e9b32588ea215e53f93c2f3cbdb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.2e955279.tgz","integrity":"sha512-UOj65nq77m64kFg6MANfS7RPWlVrK2ucKybbqCm2wkghodDAfEc+hpAa5C3z4VBHI4c0kftbMUDcJUK3grYRRg==","signatures":[{"sig":"MEUCIDGgCU24bL4NdJ8bFU66d9RSBGPPeHl6PZq1mUmpIAVvAiEAxDYinvPVFwBiXUj8DA9wULmWTCdWIVzteb4X+CfEoGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f9edb1a6beb28e9b32588ea215e53f93c2f3cbdb","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.2e955279"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.2e955279.tgz_1504198632820_0.1913231946527958","host":"s3://npm-registry-packages"}},"1.4.0-alpha.670dd75f":{"name":"primer-forms","version":"1.4.0-alpha.670dd75f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.670dd75f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bfb710d4a332b1c1aca9661dda5c1e4531528350","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.670dd75f.tgz","integrity":"sha512-rDwzsSU/3BE6NqXGylFTJpDYBDqVhfhb/TjwdAGtqCnWxxmCqcexlzCZMcb7lSvV4jFwHJri+reBedsTxiID2Q==","signatures":[{"sig":"MEUCIEil9D0WKrCWW1gLXGx3GsV/3JJI5a7d16kRhPQ8kYsvAiEA++A9CZuDEyluy3VD9uuUu4PRwGA9rQ74goXh38ToRRs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bfb710d4a332b1c1aca9661dda5c1e4531528350","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.670dd75f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.670dd75f.tgz_1504199006854_0.9235701896250248","host":"s3://npm-registry-packages"}},"1.4.0-alpha.3f6fbeb8":{"name":"primer-forms","version":"1.4.0-alpha.3f6fbeb8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.3f6fbeb8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c758bddbb27c78009d7fa15f1d4ce1687368d9f7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.3f6fbeb8.tgz","integrity":"sha512-i5ys8etXVDyuFBGznlTMRF5tb6UbLvaEnLEFfV37udEIXgqQbqEVUOACEoa18EJWC+NhQQQbyPFpf+ZEtBrp3g==","signatures":[{"sig":"MEYCIQCdJp5qIE70L3uiUWFE5WxdReHZOlN2bpjthNda6Z3F8AIhAMzihgyABuv5mpKZR8YnrAt4yD9qwCIATcQ+oF5BDssw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c758bddbb27c78009d7fa15f1d4ce1687368d9f7","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.3f6fbeb8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.3f6fbeb8.tgz_1504199413939_0.19976714486256242","host":"s3://npm-registry-packages"}},"1.4.0-alpha.d7669ef0":{"name":"primer-forms","version":"1.4.0-alpha.d7669ef0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.d7669ef0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"dca692f37fd3fc29e9e1dedb86154cca3778c15f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.d7669ef0.tgz","integrity":"sha512-Mwb3TbFIlp1HsjsAjtxxwzuk42BFslbDnympOiKVJf+gwG2U7+uNuoHo/C6KpcGZXLnyX4zzmi8ZUHVl33d90w==","signatures":[{"sig":"MEYCIQCLqq9MdlzSHTHkAPGVZpztcECPJ6X+W1qLgcoZ97oOiQIhANZb82+l/vWcNcqbk7vEzHdX5zpofBlaF9VM91qiwEzV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"dca692f37fd3fc29e9e1dedb86154cca3778c15f","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.d7669ef0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.d7669ef0.tgz_1504297217294_0.4657777699176222","host":"s3://npm-registry-packages"}},"1.3.0-rc.4":{"name":"primer-forms","version":"1.3.0-rc.4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8eb19c3eded241f7ef880b7909db7d058772cfe2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.4.tgz","integrity":"sha512-riFhhAV5s2edWPrfZGdvluXYLy4mgaHp12H+qVwnqhKrXfJxL0UQcU+TNj8X4AcZvwhJhB5VkXwA83gJ5AfL7w==","signatures":[{"sig":"MEYCIQC+eTDeMZhwJ5z2/RqpUeMX5hLfMK72cixK/CyLSOHn5AIhAOhpgeSP+wqFNnS8a0l3AnXLSOeIGp94Dp6/htsgE03P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8eb19c3eded241f7ef880b7909db7d058772cfe2","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.4.tgz_1504301627401_0.6974979417864233","host":"s3://npm-registry-packages"}},"1.4.0-alpha.662e34a7":{"name":"primer-forms","version":"1.4.0-alpha.662e34a7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.662e34a7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"513175c4be372ec747ae0a6acd0f012f6235f5e1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.662e34a7.tgz","integrity":"sha512-r7+t/lvrZ2rdDR8hTh9hFfq2f9y8S0UYkjBJ+V4r4CgWvgABp48qJ/QTC6Vuw6KjJbx8hEBjE6KaDQ0QJvKyqg==","signatures":[{"sig":"MEUCIC6+PoPMVyVZVwb01ct2UT1VA7N7rfofq7XCNKlynuYOAiEAufGNStM4RKPrwwsgUeOhSgsBC9f1avkvMf4zl2oxrhU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"513175c4be372ec747ae0a6acd0f012f6235f5e1","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.662e34a7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.662e34a7.tgz_1504310968844_0.3471276378259063","host":"s3://npm-registry-packages"}},"1.4.0-alpha.58e5748b":{"name":"primer-forms","version":"1.4.0-alpha.58e5748b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.58e5748b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7ab391bbfb7bef2000b3ed835f072adf9cd05d69","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.58e5748b.tgz","integrity":"sha512-gfdb3iL3GUCnrg7wjPZ4wS5r/3JA4ZmhLgp09ZeyxiEGPSHjpCI4qIKLQR6UN41hIxh1FrmcQDvfY4ItgswbRw==","signatures":[{"sig":"MEQCIFsnFniHxRaJyCH2D9xeT46SSsiVnyphB36lifSkyQudAiB6g0d1ufQqqFKraJFK7bt44/wdB3S/AEkFN4+CNRzMIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7ab391bbfb7bef2000b3ed835f072adf9cd05d69","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.58e5748b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.58e5748b.tgz_1504313246879_0.0972055341117084","host":"s3://npm-registry-packages"}},"1.4.0-alpha.196d0ee8":{"name":"primer-forms","version":"1.4.0-alpha.196d0ee8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.196d0ee8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cf67e95f1c2a4a1d3022b90f143c041839500c6d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.196d0ee8.tgz","integrity":"sha512-fTKtXwJSxbO+NulJAEulFR0IzpxliGkvFoydJQr5ptM8lrHIthwKJQ8j+TjYySs6Swm3c0cCLetkYBZ3ZxNVsw==","signatures":[{"sig":"MEUCIQDFmCGWrW7bUDhbi/UNhG57M2llEaIRA0Ptn4q84SNOSgIgQGzWo6HmYvvtz6U1OiSc/7hSMYYbdMoxPTuVrs+WXmU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cf67e95f1c2a4a1d3022b90f143c041839500c6d","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.196d0ee8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.196d0ee8.tgz_1504627192549_0.2976248008199036","host":"s3://npm-registry-packages"}},"1.4.0-alpha.db62cc5a":{"name":"primer-forms","version":"1.4.0-alpha.db62cc5a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.db62cc5a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"40055082fe20e53c6b2e55851c90798c825eb1b2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.db62cc5a.tgz","integrity":"sha512-9VZyJM/Mpn/voDPoBlcwGRdSETBOmJ0f0XV6yCyOBcMYER2TszfODhu0QDj0xGtzjdZe3/P4M8+Ll2R+PnwmXQ==","signatures":[{"sig":"MEQCIDfE2lO/SbK5Nj/WEVOkQP3YjYXifVnuKLJ5X7f2ndwfAiB4Yv6YRYbHKkZUfokoZiRsQWO9D21j4yW8fgzgkhwLgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"40055082fe20e53c6b2e55851c90798c825eb1b2","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.db62cc5a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.db62cc5a.tgz_1504725938983_0.2429531344678253","host":"s3://npm-registry-packages"}},"1.4.0-alpha.7e6208ed":{"name":"primer-forms","version":"1.4.0-alpha.7e6208ed","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.7e6208ed","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"828ef52e05ea71c7ed438382de2f442303bad0aa","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.7e6208ed.tgz","integrity":"sha512-0MwM3IjqL0/iTD3aFKnauerAtPlLwS6HWNpB0jqYX+TAoWiC1G38YOCSngnIeAML3EUw77kF5Y6iGnxtMGeH/A==","signatures":[{"sig":"MEUCIQC7zfNI71Ul6Jt26YCmM1mThdCC0xcpDRXpjK4i7Ge5XwIgZpuncQiPdMuTwmMAVbMTbsZf/oyFdiKqWXzrbOPCN4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"828ef52e05ea71c7ed438382de2f442303bad0aa","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.7e6208ed"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.7e6208ed.tgz_1504728127202_0.20662918873131275","host":"s3://npm-registry-packages"}},"1.4.0-alpha.620b6ab4":{"name":"primer-forms","version":"1.4.0-alpha.620b6ab4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.620b6ab4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"204ccd853c9ed470ee0a0c43545c3330fc54848c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.620b6ab4.tgz","integrity":"sha512-FHjLWIbi68g2LSdHq+ZLY8ypKrkQIamZ8MkIJCd1bH2234Uewn/4xL6F9jpdhll61c7FjN+1i+j8FPhtEIVnRA==","signatures":[{"sig":"MEUCICi2HIM0nQsRbpjMYlIOzL7yJmeNtPwtf5ExmknV1yEsAiEA1Gc6QfMpL2CsN8nRQN5fbj7dIb+4OD9a4LPjRub6aD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"204ccd853c9ed470ee0a0c43545c3330fc54848c","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.620b6ab4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.620b6ab4.tgz_1504730685308_0.8404191536828876","host":"s3://npm-registry-packages"}},"1.4.0-alpha.10ecf0bd":{"name":"primer-forms","version":"1.4.0-alpha.10ecf0bd","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.10ecf0bd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"eff89d36e9b40bcb7ffc8e28fdc0172a61b788f6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.10ecf0bd.tgz","integrity":"sha512-+GONcZSydD2wW6zdI0ny3wpCGBnnssgMxgH8r5vxdeSA/NKSETTanprLvbTem5WNPNZ9rinvQTwLbKikQ5Tjbg==","signatures":[{"sig":"MEQCIBuZgAcv34auJlgMeS1LbW5LJ21DD3Cyd8oIpgpYOXDBAiB/m87lx1i/dAf7LTugU4h8J+s2z3RcnJm8uH81NS6GZw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"eff89d36e9b40bcb7ffc8e28fdc0172a61b788f6","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.10ecf0bd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.10ecf0bd.tgz_1504737530759_0.08887703763321042","host":"s3://npm-registry-packages"}},"1.4.0-alpha.2b4fde00":{"name":"primer-forms","version":"1.4.0-alpha.2b4fde00","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.2b4fde00","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fadbe6bab653b2b09dc9a0dad69823a0ed711ab4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.2b4fde00.tgz","integrity":"sha512-dhrfaZq/f8yA0C0G1DzkdCHC8FFwoejl8Xrq9K3NAVO96u2ogB259dRUDOmM+sZMwDJrtptFuUvGlOZuXep7fw==","signatures":[{"sig":"MEYCIQDH3vhM/xUWWLrIF6pJckFeeIVrynasvATrN+j9QC08hQIhAP04F1FlNqtcK6cg4Y6isbvzjUYKeR/2cqLQTv+e9AO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fadbe6bab653b2b09dc9a0dad69823a0ed711ab4","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.2b4fde00"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.2b4fde00.tgz_1504738809119_0.761446661548689","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1eb7bceb":{"name":"primer-forms","version":"1.4.0-alpha.1eb7bceb","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1eb7bceb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"817e0da87980478ffef8aa95566d5c10614c3284","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1eb7bceb.tgz","integrity":"sha512-EjW5Hbnit3MmfBW8wzM3pO7zq8ERc06NiYvovSjS9LDy2dhKjJ+UR7MtyKHQTu2D+UGtRGz+jW0YrsgrpV4OQg==","signatures":[{"sig":"MEUCIQDd3M/qPC01O8UmTTNB/1YGahl3O04glb3O1Ix9Mw3HgQIgAxw6CMvFnXTXy0pp+FYa2A2MSdToRM+J6ltVtJhZjqo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"817e0da87980478ffef8aa95566d5c10614c3284","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1eb7bceb"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1eb7bceb.tgz_1504742320187_0.6831100869458169","host":"s3://npm-registry-packages"}},"1.4.0-alpha.68cefb21":{"name":"primer-forms","version":"1.4.0-alpha.68cefb21","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.68cefb21","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c3c550605349072b55c59e67b2a4222c263eace1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.68cefb21.tgz","integrity":"sha512-8koywXmG7VRJp6ksKTBAGPeCHdyzt2/O0ob5oDPgnE4lIabpicN58z5zSgC3dT6Yfwq/zOLqYhl4S+ftBKZJaA==","signatures":[{"sig":"MEYCIQC6XAaii6+zxnr4yQoZZYzYRTKl2ec0Zm6Ul0VqSuXtOgIhAPCzAkcv2ri0dLNL4tSS0oJ4S6wMbZpDzxhcssr3MF18","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c3c550605349072b55c59e67b2a4222c263eace1","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.68cefb21"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.68cefb21.tgz_1504742646342_0.18263417948037386","host":"s3://npm-registry-packages"}},"1.4.0-alpha.68a47d07":{"name":"primer-forms","version":"1.4.0-alpha.68a47d07","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.68a47d07","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bc770f86ead37048ae880a3208c763fa624cc645","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.68a47d07.tgz","integrity":"sha512-qekqphC2k9Nz4fGVeFieIwluNb+/JqIcOVPkUZ4TWx3gwB7ogssIQoYMldxlUJ1j4B4CTVscWcybJiwektK9oA==","signatures":[{"sig":"MEYCIQDdn9vqT4I3CU0to9JLmx4jjapq2Z28lFf3GFIufYMH8gIhAPPkjuHRO7OBwb3drDsaqZz2SE7sQm+6bsTxeH4tMe3g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bc770f86ead37048ae880a3208c763fa624cc645","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.68a47d07"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.68a47d07.tgz_1504806710131_0.5526199517771602","host":"s3://npm-registry-packages"}},"1.4.0-alpha.00ff9fdf":{"name":"primer-forms","version":"1.4.0-alpha.00ff9fdf","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.00ff9fdf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"442e5ebd9596049395a05075caf29d8d29e9831b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.00ff9fdf.tgz","integrity":"sha512-EaJIVhXqnKwc5Z2dgHf6yI3JmAdKDi+t0YTLXEiclUaDOWUgJNHQsiTrYaGRxf8ZnTN+Vq9o6ikeCqRKfZQUKQ==","signatures":[{"sig":"MEUCIQDkoCi+wDnPmYdQUyIQNYt8x18r67mIFtSlbRctXgB4PwIgTGuBhE4q8WxSxbwPMzAPpQZPAbropCg7s3oOPmDbdpQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"442e5ebd9596049395a05075caf29d8d29e9831b","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.00ff9fdf"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.00ff9fdf.tgz_1504807578714_0.4047912023961544","host":"s3://npm-registry-packages"}},"1.4.0-alpha.3805ebb6":{"name":"primer-forms","version":"1.4.0-alpha.3805ebb6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.3805ebb6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f09c9751bfb272dc4d481957a7c687dc5dae12f2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.3805ebb6.tgz","integrity":"sha512-Q/aqvConOoFZN1ASpo8R4jRl5Ojq8hJk6e5udI064l6o9gUikKCOxl5w2AE8rMRZkwYQmt3Nv5b/m/yk74jayw==","signatures":[{"sig":"MEUCIQCRsvOzRfjREKXa8jBpKye/9/5Vc+phuX8VXTuvpoJD8AIgaSe2YfJTlqbsZQ821T4C3Emc8PYgGQd13B1jrOm7q3g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f09c9751bfb272dc4d481957a7c687dc5dae12f2","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.3805ebb6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.3805ebb6.tgz_1504810984283_0.9260036456398666","host":"s3://npm-registry-packages"}},"1.4.0-alpha.495b352f":{"name":"primer-forms","version":"1.4.0-alpha.495b352f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.495b352f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"30f22942f0f93d99673bffe072e40f18dae4afee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.495b352f.tgz","integrity":"sha512-Zp+bJSp94rlUFcK9JpN6RUXFaetVdy/W2C9gxWknEiRTibZpLuSFfnMbrGCTMPF8gE3OEkV9Kvu2amWL5dMS3A==","signatures":[{"sig":"MEUCIEG7YIsfJf8CBTeEO7SxVOz4pnu1crDLXrqjUiNHIeh+AiEAuAmxDVvAEb9K4NiybGVz/uGncsXjWSNN6T/iABB8olg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"30f22942f0f93d99673bffe072e40f18dae4afee","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.495b352f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.495b352f.tgz_1504812088475_0.13585836882703006","host":"s3://npm-registry-packages"}},"1.4.0-alpha.a0416d0c":{"name":"primer-forms","version":"1.4.0-alpha.a0416d0c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.a0416d0c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"15b4b1c6e74e17ef7581a3c2f43ff2fd9c04c562","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.a0416d0c.tgz","integrity":"sha512-Bxhgb+6E2xQOtCJf7rVXRgsO1LsTU/JQ0tu8zJn/6BTLRfGvPfreirMjKHvOQUlXXf/0kI2vOaIN3BrPFabQ9Q==","signatures":[{"sig":"MEQCIGiEvxSitZ9O6TkoSUl3aW/XpdYysA0m+3lGE8P+tLJJAiAXTdT0HWHnLeRMFIad/5YXjOeWshjwbbfQqBV1yJFakA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"15b4b1c6e74e17ef7581a3c2f43ff2fd9c04c562","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.a0416d0c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.a0416d0c.tgz_1504812330302_0.4750034639146179","host":"s3://npm-registry-packages"}},"1.4.0-alpha.4e20437f":{"name":"primer-forms","version":"1.4.0-alpha.4e20437f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.4e20437f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4071816471b719fa0fa9695bc06bdcbfc49ac0df","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.4e20437f.tgz","integrity":"sha512-VDlTA3ohmYide1ABITxaUYfv/nn+gPyGC+c8d0h5uxBirGP50nw2TwFrsu2Ps09mnf2IZg2Ioj0NQiDv1VK2qg==","signatures":[{"sig":"MEQCIGUmKyf8WVSXHwuRynCXnHymJSt4fHLraVskGhS7M0y4AiAJqPJLGI2nKOQSJuwsbqMWtnSz5ZrBVZ9ww+7oH0XGQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"4071816471b719fa0fa9695bc06bdcbfc49ac0df","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.4e20437f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.4e20437f.tgz_1504904752099_0.537210708251223","host":"s3://npm-registry-packages"}},"1.4.0-alpha.6cff0edc":{"name":"primer-forms","version":"1.4.0-alpha.6cff0edc","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.6cff0edc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"402204252ba94f7dc26e023a6a827001ab421c14","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.6cff0edc.tgz","integrity":"sha512-ml+zYwzXfqlT9Eb9y0Psg7fqSbtbNqtOXPnFtapqjsdcZwEJJYeEJ1fm0+amp9nQFTSaAYp8IBRLtuo44pXKPw==","signatures":[{"sig":"MEUCIElmI9rXoSIQz/PeSRBj1dlK/BD8IPakJjKLZNINFC3jAiEAtqx8gQjs6kJ9oPv8LItFUYQVFtogWdGdneaLqCFvv/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"402204252ba94f7dc26e023a6a827001ab421c14","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.6cff0edc"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.6cff0edc.tgz_1504909836858_0.06077971216291189","host":"s3://npm-registry-packages"}},"1.4.0-alpha.74e40479":{"name":"primer-forms","version":"1.4.0-alpha.74e40479","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.74e40479","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e6eb91aaea999af75823f6ae2b78397b8a0b5f84","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.74e40479.tgz","integrity":"sha512-NRAYfI0l3ydeoTFLaFbblaMJxgVzb+9mIHBt/PK1pRubTi0PsomEdO+28rEvHg23QcZd72eLnsrLe2v459NGGg==","signatures":[{"sig":"MEQCIEyaftgH1c+LF1ItukvoVY8qvzqUzjNF9gwoX9XYLab+AiAV8THcSyplkpl2fXIVnRMB1aPOp9vZJC7noN0KGOSoFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e6eb91aaea999af75823f6ae2b78397b8a0b5f84","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.74e40479"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.74e40479.tgz_1504910173241_0.6132387171965092","host":"s3://npm-registry-packages"}},"1.4.0-alpha.cef502ae":{"name":"primer-forms","version":"1.4.0-alpha.cef502ae","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.cef502ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fa8b86a632ba3053fca05e9941dadea83c771c29","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.cef502ae.tgz","integrity":"sha512-+EMo0tTbGVluRiMzFLUokuBMvLRkH4k0UD+1MJk9x7gHXAD2tXNmdDPUYeY2JkXs84BURwXffNvf8G5kE+6YTQ==","signatures":[{"sig":"MEQCIE5NYm3OU0OgpWZmCGv1IOClhOm93+XsI2e6W2RadGMcAiAPAmu0hO6sWI8in347dYY1MG6ZaaVHwvxk0WG36BynBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fa8b86a632ba3053fca05e9941dadea83c771c29","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.cef502ae"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.cef502ae.tgz_1504911564769_0.7434249352663755","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1f8eed47":{"name":"primer-forms","version":"1.4.0-alpha.1f8eed47","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1f8eed47","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1620e92b3fdc62b427bad82b867fd95810c85172","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1f8eed47.tgz","integrity":"sha512-BDN7TA1XmPyUniVEJY8hFcXrmV0B7RTgKodZkmk+TUS5o2gpgttr6T+JliBxxabZrpm9VTrcOnqufRPBUSteAA==","signatures":[{"sig":"MEYCIQC/QLPc4eNhICYIJ03vh6aOV/sXLVaJ7irBh//Fil9I6AIhAPrPXA0/48R6tuM8oH7RWrqv6edpeN/OfdsXOnNBeidU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1620e92b3fdc62b427bad82b867fd95810c85172","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1f8eed47"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1f8eed47.tgz_1504912717667_0.43794368812814355","host":"s3://npm-registry-packages"}},"1.4.0-alpha.ff49bb35":{"name":"primer-forms","version":"1.4.0-alpha.ff49bb35","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.ff49bb35","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f532fcb9e84f7a6ae8234c98de6bb130d8d518e6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.ff49bb35.tgz","integrity":"sha512-K0AlFa34LDLZe5do4bQ+LiKYntGNAHs7akOoC4Tvm5wD3T83r6Zh7IYPdDIHa/882f1jRHzIdvBNxBgEIkMjBg==","signatures":[{"sig":"MEUCIEEu/cQZ5Z2s9o3wEgG1rCNKnsz86IjglXj2BljNiHAhAiEAlP9gWWU0svU76jyVdpW7tg6E5gdsBaR/Jew7emFlbhM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f532fcb9e84f7a6ae8234c98de6bb130d8d518e6","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.ff49bb35"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.ff49bb35.tgz_1504913183082_0.31316819158382714","host":"s3://npm-registry-packages"}},"1.4.0-alpha.3f685417":{"name":"primer-forms","version":"1.4.0-alpha.3f685417","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.3f685417","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"667d34d3e90c3aa356d069e52742a0b0ed2d8bf7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.3f685417.tgz","integrity":"sha512-FXcSGJqhTbZ/Suw+k+kOVE+w6m19sBJQ2gto0DutVyZ2FTSGfFaoxuduG6sIY391LH2JxEpmRM1/b1BdVtMxdQ==","signatures":[{"sig":"MEUCIGqHs0/fCnQnkyFOZg4W86zNA5JTXUmir3zRZXnKkEiZAiEAnLLDfnw4FzSLrv2SAjF5WR6d0buEvp2u1zZVpgO6Puk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"667d34d3e90c3aa356d069e52742a0b0ed2d8bf7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.3f685417"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.3f685417.tgz_1504914524906_0.3542772005312145","host":"s3://npm-registry-packages"}},"1.4.0-alpha.7cc2985b":{"name":"primer-forms","version":"1.4.0-alpha.7cc2985b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.7cc2985b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"38570cde07c9bd81ef205a062da1adcdd1b1e03c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.7cc2985b.tgz","integrity":"sha512-ypKaj9ml3YrRx+BVaVRR3RWc77UNv/Ty5az/l/0WnnZL0pZwY9BGABufUGRxGruLD3qbKAPkpDHx9AhZUd2Y6w==","signatures":[{"sig":"MEQCICCodtmCum1U/oUy1M+uoqcEgNS5pHbd1HxnwzXl/wiZAiAJtI6XioGirF5m2pQuF0kLFerleXCI1YrvZCzaBGGIpg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"38570cde07c9bd81ef205a062da1adcdd1b1e03c","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.7cc2985b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.7cc2985b.tgz_1504915088681_0.008864118717610836","host":"s3://npm-registry-packages"}},"1.4.0-alpha.c4a2e1f5":{"name":"primer-forms","version":"1.4.0-alpha.c4a2e1f5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.c4a2e1f5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"201b6e2228135d2ccc18a79f5516031a6cbf35d8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.c4a2e1f5.tgz","integrity":"sha512-9zXkEH7NNcD+pyTlqYy5I6IyYBMN+2+y0XYRdH+rW/EYMHfSfbDtDr5YCbRh6j0ia55rCARQGF1/s9ySISL6SQ==","signatures":[{"sig":"MEYCIQCbyOl0x+Q+xDaC0Q4MoMndq1VaNuPbmxL8GGvfoLl+qgIhALWXeyvhvGPoKsTGwwxl45+jUBrSnEmMtTaiPWhNToWp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"201b6e2228135d2ccc18a79f5516031a6cbf35d8","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.c4a2e1f5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.c4a2e1f5.tgz_1504917089607_0.7585183773189783","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1c0fe35c":{"name":"primer-forms","version":"1.4.0-alpha.1c0fe35c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1c0fe35c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e90ca29434061cc6fe77b09a0d7d5f8755e3cfe0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1c0fe35c.tgz","integrity":"sha512-WStdX+KG0+GI2t138HHir2mOrecDGdPuZcwXVms8JZ1Cp6W9IxlLNmuirIBmJ8wpaUyDRTumKSPwnN6DEJVUBg==","signatures":[{"sig":"MEYCIQDcreWcHOVmXG8w6PGwb77skp4BGRYiM4ARS3+b0rNt9AIhAIqaOX2LDsgGVa56gF4k60ZlKnyMOXc7EWfLn2DdKLSa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e90ca29434061cc6fe77b09a0d7d5f8755e3cfe0","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1c0fe35c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1c0fe35c.tgz_1504917399081_0.45431004860438406","host":"s3://npm-registry-packages"}},"1.4.0-alpha.8c9d96b7":{"name":"primer-forms","version":"1.4.0-alpha.8c9d96b7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.8c9d96b7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"22cde7712b57f23fa687096bff33d637f1594dca","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.8c9d96b7.tgz","integrity":"sha512-95ZPh08fDzA7AkKtdfbQ08RtX4Rxrwtg5hgp66BBxeypLttMkJoSxjsQq318eshPh948Hrq3WENvFouiYggNow==","signatures":[{"sig":"MEUCIHK0xYb0wVWqSiaIgEWek688N1BDGvAu736Dm5tJ1/O9AiEA6epucnAG12d6E4mi4VR27fUPSo/lnKWOmoTB/Dn/I1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"22cde7712b57f23fa687096bff33d637f1594dca","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.8c9d96b7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.8c9d96b7.tgz_1505150841834_0.823679642053321","host":"s3://npm-registry-packages"}},"1.4.0-alpha.5cf0e083":{"name":"primer-forms","version":"1.4.0-alpha.5cf0e083","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.5cf0e083","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1dc33e10dbc3a4ce1563b3e0797f2b5cb1514ec7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.5cf0e083.tgz","integrity":"sha512-MBJDxD9WFj+4Aez/9kKIR4ihK79TQ5NcnSC0Dk15Ptd+PiAGWp+HZD/Yg3bbkl/Odnqov+sm9Cl9MBI5CjgiLg==","signatures":[{"sig":"MEYCIQCqU8+Aogte0XbqhygBz+XTyrJSd4sfjv55m4WFoLSPGgIhALUUSE3bbYIeRjBCXOaN8Kop1iUskxlTln1wjQGDjuqP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1dc33e10dbc3a4ce1563b3e0797f2b5cb1514ec7","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.5cf0e083"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.5cf0e083.tgz_1505156286393_0.8384228337090462","host":"s3://npm-registry-packages"}},"1.4.0-alpha.a79aaac4":{"name":"primer-forms","version":"1.4.0-alpha.a79aaac4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.a79aaac4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"3831c3e8b02704de5d892c5e375ced023ae1eb40","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.a79aaac4.tgz","integrity":"sha512-p4ysP+YxYQSJvTjwCV/cl98feq0gwtS+JfUS4FI8w+2lfassyuRGVE4CfdKo/qRXlZKsMgZX/j2EUQPd3voBFQ==","signatures":[{"sig":"MEYCIQDQIGlUB7Ah47/3VC0EQx7EhtJIxikEzp47sK2glCgeNgIhAIYbnqG5b1pSYiEtpmOpDquivhbQHbeyK+o+bcAgOYCr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"3831c3e8b02704de5d892c5e375ced023ae1eb40","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.a79aaac4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.a79aaac4.tgz_1505168941069_0.5032066314015538","host":"s3://npm-registry-packages"}},"1.4.0-alpha.004083cf":{"name":"primer-forms","version":"1.4.0-alpha.004083cf","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.004083cf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a45ffe3068d2b3b89033f6008f104860a613d375","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.004083cf.tgz","integrity":"sha512-AvY/AfeZkQvYcp0GLwzw8uVv5imbDm3BR9fVEChT7MnMXDOYifZ3lRGFP3kYl1eYK4AoNbHyKzW7EguLyvmjIQ==","signatures":[{"sig":"MEUCIDOUOFh/J82PbL8CS6JiBnF0+a3LquOzn8dCD4vtKi6/AiEA3u5L4s5/RpJ7l2FfJ6kmr9AiFesC7Krfi/6VBEorHqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a45ffe3068d2b3b89033f6008f104860a613d375","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.004083cf"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.004083cf.tgz_1505172145276_0.8253105632029474","host":"s3://npm-registry-packages"}},"1.4.0-alpha.a92491ae":{"name":"primer-forms","version":"1.4.0-alpha.a92491ae","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.a92491ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d50dbcc1c77cc63b1992fcc65e9f20f558df58b8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.a92491ae.tgz","integrity":"sha512-8e/7kBPZkIkXIPIbbUO/vIs9f+e12dK0wBJoxv5LrULEL5wEOxJSoN5XMT6FKs1TAi/JbWfn8uHvbGHFEltQmQ==","signatures":[{"sig":"MEUCIC82RVvnDtdKWW+x1A3c881uNZb/x3VvhjKKaaIaiC/XAiEAiRX8/YKBfYTa3uOxHJP37utz2LMlPh7PzZTc/gfhqtU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d50dbcc1c77cc63b1992fcc65e9f20f558df58b8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.a92491ae"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.a92491ae.tgz_1505174386212_0.9843877470120788","host":"s3://npm-registry-packages"}},"1.4.0-alpha.6ae842b4":{"name":"primer-forms","version":"1.4.0-alpha.6ae842b4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.6ae842b4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"dacb4e7541521c046b7a445c4c7ad47b92fc6fa6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.6ae842b4.tgz","integrity":"sha512-hNM00+wheQRh+6BC/sTAUv8rD+virB0Y1grg8vi0ni/jk0718JbmiL1m3Df0SJZWxs6Xbze0CcYhn31MU3yONA==","signatures":[{"sig":"MEUCIE1ZQRdrwS5hus8blfutFtDD5bzpSlHiyP+td+OHfCL+AiEAvZQBxIOKHaQjlpfHQ+TNKN3WevkUQGk0w7CYi0uwhuI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"dacb4e7541521c046b7a445c4c7ad47b92fc6fa6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.6ae842b4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.6ae842b4.tgz_1505239818606_0.46670175320468843","host":"s3://npm-registry-packages"}},"1.4.0-alpha.b94a0894":{"name":"primer-forms","version":"1.4.0-alpha.b94a0894","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.b94a0894","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0c1ed722d8c06743f60255bcdba129f6df84f88b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.b94a0894.tgz","integrity":"sha512-5/+J754rfpZiK+cjMK8bhFrHJ5vTr4RBGoAqTjUbPIlVZisw2/NhVReQatr5QWIHsgVllDXug0TQxurABjTGvQ==","signatures":[{"sig":"MEQCIAXsTUc4Vnvkk0gabRgkFuYCsIv84Ozj+t7N21vNOksTAiAvDi1NEZSpWwd1sx6T84IoyRfJ7hJv2TN065WT70qKCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0c1ed722d8c06743f60255bcdba129f6df84f88b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.b94a0894"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.b94a0894.tgz_1505243650152_0.6563075636513531","host":"s3://npm-registry-packages"}},"1.4.0-alpha.91b12b7f":{"name":"primer-forms","version":"1.4.0-alpha.91b12b7f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.91b12b7f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d34a394ed8a00ddbb8f4afbcca6d714585f2dd35","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.91b12b7f.tgz","integrity":"sha512-8l2CSNoElkyLsBgGaN6ZnfRTAd/yleznD89bZ0DGKTsM5Ge3FnZPAfQzsvpLcamou91P0XFTC2Bvr+a55VnULg==","signatures":[{"sig":"MEQCIBfjANmjzUze8MTSR72iFBJnNm56ela55jNWQIATCoHHAiBDmObyIQikm8AUMMfLhavK7RcUwVGRfCgm0nvJAVZ1RA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d34a394ed8a00ddbb8f4afbcca6d714585f2dd35","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.91b12b7f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.91b12b7f.tgz_1505247369228_0.5631426728796214","host":"s3://npm-registry-packages"}},"1.4.0-alpha.99e791d1":{"name":"primer-forms","version":"1.4.0-alpha.99e791d1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.99e791d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7ecf51e90dd138f89f6639f42eb3c37476b9449a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.99e791d1.tgz","integrity":"sha512-Z+Z3gF1O35wwf4EAmKCE1KRzMU7hnQo4pnNLlnZ2IiXBpPAQ5BsUJ+hQo/jwBZfa095ymyVkZsKjABQWYk7k0g==","signatures":[{"sig":"MEUCIC/u9QARJCVmLB8W5/cENuEhThuPZVdwjo8BqzXqudq4AiEA5mgKiqhBUOF8m1WFY8NyR6xn9mzzoIXvGPd2fbTLVqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7ecf51e90dd138f89f6639f42eb3c37476b9449a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.99e791d1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.99e791d1.tgz_1505250761282_0.4934816383756697","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1e209b68":{"name":"primer-forms","version":"1.4.0-alpha.1e209b68","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1e209b68","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9bce78b65b6f48054150b79e8e156d33a99d2363","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1e209b68.tgz","integrity":"sha512-mJ0VVEGYI7Wo3hUSjUqG7fxXiKpGxIYXC4SxEjBT2MybzE7ZEhSgyIJibpPaUggBHWRz/mNfCi3wpYCkb0hkRQ==","signatures":[{"sig":"MEUCIQCl/S8mR9bK4bULBQ/6XSfGS7n/shiEVmAcUlosvwLfrAIgNA7cRcsSu/GeHgU/MbR7zV8gsfG0lRHWXYqrNg+AJkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9bce78b65b6f48054150b79e8e156d33a99d2363","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1e209b68"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1e209b68.tgz_1505250843440_0.9959046619478613","host":"s3://npm-registry-packages"}},"1.4.0-alpha.d7ecafb7":{"name":"primer-forms","version":"1.4.0-alpha.d7ecafb7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.d7ecafb7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6d3e1259bd72b87dab250036365d4be47d1a644c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.d7ecafb7.tgz","integrity":"sha512-9/NQYTLh7e7U8XN3ryiX8mNUEEX06AlDJpSxCfXkAITKTM7lYWwl0ch+ExN+mT0EVCHzuPJMzBGKYTOarNg9TA==","signatures":[{"sig":"MEQCIFvGFUPfPjk6e7+HsDMC9M5ni/e1/1nclO74XPVF1hJWAiBk/wrAgD6T3wy9fMiiI87Hq1Hu9SmFU7VHsqPtSG5NUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6d3e1259bd72b87dab250036365d4be47d1a644c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.d7ecafb7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.d7ecafb7.tgz_1505260445957_0.2219094631727785","host":"s3://npm-registry-packages"}},"1.4.0-alpha.b1b0f36a":{"name":"primer-forms","version":"1.4.0-alpha.b1b0f36a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.b1b0f36a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b10af46f6ccbd7637c176f01235714f110194a59","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.b1b0f36a.tgz","integrity":"sha512-ouaRg8QhoXGFBTauGvGhNsC1+JXcxF1yTyeoOFBN8g0H4yuCzr1GYMaheeBsJtzSMDm/+SsX6eW3LyXo6zE1Bg==","signatures":[{"sig":"MEUCIQC/VRIO6tOPZMfA+HoT+KC6J6b2Q7SBdDReQUVe84D9HgIgM+HuGG0zjiH5bsSmoXrHxvM4bwWWLWEtP8FgNL3fpiE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b10af46f6ccbd7637c176f01235714f110194a59","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.b1b0f36a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.b1b0f36a.tgz_1505286782033_0.5558513086289167","host":"s3://npm-registry-packages"}},"1.4.0-alpha.18f330dd":{"name":"primer-forms","version":"1.4.0-alpha.18f330dd","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.18f330dd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ccb3f7fccf96236bfe4c12726091f67f6af2f9cf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.18f330dd.tgz","integrity":"sha512-k/9qrdbkP6atGVX6ZVzIRm4zKRtskz60tRw6vu8NqjbJrBtRKs6sOO6wxIGYxocaXiA4YhbxfsstGC+XAhmMxQ==","signatures":[{"sig":"MEUCIQC3bruD0+dcC5jaVLAda4iu/oLMLKgamzeTHiG8vbvpZgIgIm7GJbTcaMIXpHZV80wLWBFKZbwitrueAT5qpnT5tao=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ccb3f7fccf96236bfe4c12726091f67f6af2f9cf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.18f330dd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.18f330dd.tgz_1505289718151_0.5122511072549969","host":"s3://npm-registry-packages"}},"1.4.0-alpha.b5261c5a":{"name":"primer-forms","version":"1.4.0-alpha.b5261c5a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.b5261c5a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2024274076012bbfc334a1ae0bfa9d27cda3fd40","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.b5261c5a.tgz","integrity":"sha512-BKxW/a8009o+q9m6QRvLbGBJCvRDp+CroJmKbir1m+MVQaCGOPpFgZiZXK8GlTw4/K4PUaoeNOY9Vxy0P150bg==","signatures":[{"sig":"MEQCIAp8skykdDnkKuTJtRjxaPjY9D3tWiz7VyLse2MKk+7gAiBEFixTc95bwcqpE0YmKNJk+AMYl0iQvIgO97h54JCfoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2024274076012bbfc334a1ae0bfa9d27cda3fd40","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.b5261c5a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.b5261c5a.tgz_1505290607983_0.6559658849146217","host":"s3://npm-registry-packages"}},"1.4.0-alpha.65fc2d56":{"name":"primer-forms","version":"1.4.0-alpha.65fc2d56","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.65fc2d56","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"99ea2544e01e778e82572ebf47e6299c29273ade","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.65fc2d56.tgz","integrity":"sha512-e9TmM+/8ZI6CVYh1FfZUMDFlqIggYWzAfQMWofvi6VpIkS8WsM5nDJ0KJJaQKbjevEKtLPr5UoEdMv2PmH6BMg==","signatures":[{"sig":"MEQCIGvI3ecR7kenXGC4lwZLxX2bNji+JDJ284tCmQ6tyr3gAiB1zE2wPiZ0BqI/lhYve6F0OKGACisev1gc1RaaPkObvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"99ea2544e01e778e82572ebf47e6299c29273ade","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.65fc2d56"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.65fc2d56.tgz_1505296348798_0.36292861634865403","host":"s3://npm-registry-packages"}},"1.4.0-alpha.c202630b":{"name":"primer-forms","version":"1.4.0-alpha.c202630b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.c202630b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"39038798d7607a1b87cd60c576b1d2d37871a17f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.c202630b.tgz","integrity":"sha512-Wa022raeUKgRgkz7EuX9nXXPYwf7hMqNZwwe3JvDjdBtGxof2hJyzrZH8JYTKclzD2/Na7zfW4fik7DjFX3k/g==","signatures":[{"sig":"MEYCIQD2Nqn6WDWi+wgzlz3St8iqhLi94KbUNTK6zozF0FWdcgIhAPOx7iGHVqnH1nZ1sCgzu/dTH8CQ3V6nppfv80q335tJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"39038798d7607a1b87cd60c576b1d2d37871a17f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.c202630b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.c202630b.tgz_1505341952783_0.6982083665207028","host":"s3://npm-registry-packages"}},"1.4.0-alpha.b0c397aa":{"name":"primer-forms","version":"1.4.0-alpha.b0c397aa","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.b0c397aa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"738258312aa5d563711519a3b632cead2b6f8e75","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.b0c397aa.tgz","integrity":"sha512-nGSmLIZWSTHD633uhdd9RyfHSPRs4fq2kNHFHPqb1bWVd2IhTUYqsMoMSisY4hygWNnks+mr+1Vdznm6tFovJg==","signatures":[{"sig":"MEYCIQDFT9LV/iAge0tPO0HAI43t8lR4qDK/A4gyqjMq0dNp7wIhAJEOyiCkL9WhSDyFnyb0wYqQAr2YMr7t+E8VMozQkmOF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"738258312aa5d563711519a3b632cead2b6f8e75","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.b0c397aa"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.b0c397aa.tgz_1505342910951_0.5188379883766174","host":"s3://npm-registry-packages"}},"1.4.0-alpha.e92be9a9":{"name":"primer-forms","version":"1.4.0-alpha.e92be9a9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.e92be9a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"625e9570cc9eb6ddb3c463339939c1720c8731fd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.e92be9a9.tgz","integrity":"sha512-waFkR0Di+Dp/zKso8iVAxc7YYZAA3BZHiUR+O+eelSHB1OakWp53XETJlzPESJp5uqfufqHbL4ANu/p+XFlTyw==","signatures":[{"sig":"MEQCIFp4fD5Dn+oCGrlQ1bxOkDUz04gM+YOVn5jiTKJjMwH3AiA9Onl4FBMoxDSePsw0c+j5ln3rjQ+Ts+xUbcD7YXmIRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"625e9570cc9eb6ddb3c463339939c1720c8731fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.e92be9a9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.e92be9a9.tgz_1505418419129_0.7721147842239588","host":"s3://npm-registry-packages"}},"1.4.0-alpha.05244e6c":{"name":"primer-forms","version":"1.4.0-alpha.05244e6c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.05244e6c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cda78e2f224ebbf954f6a3918e4729f513a551a9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.05244e6c.tgz","integrity":"sha512-TWqDefhBXc8OmVF3Z68pIrtitwwWt/md5UWSmquc+Yon0IOOGopx3oIxzFB8AlrdN5eyC+/v3+ZTFCanhO+24A==","signatures":[{"sig":"MEYCIQDr+VwVeFZag86+RrO1qqj/svOTWhOJN1jf738kq7mLaQIhANZj4YiFDoL3bFxndutrTuysvGwwP9ukss2tCeg5P1Hq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cda78e2f224ebbf954f6a3918e4729f513a551a9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.05244e6c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.05244e6c.tgz_1505512770345_0.7191507467068732","host":"s3://npm-registry-packages"}},"1.4.0-alpha.e4440c27":{"name":"primer-forms","version":"1.4.0-alpha.e4440c27","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.e4440c27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"da192da3ced5ae2c56bbb1e6b4700599afa8a00b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.e4440c27.tgz","integrity":"sha512-afgxJpCUy0qjZUGPNsXsRLRflbjWLgQjO+/3xaKqsKcg+GTQ1GjwRGTwWiGjL58/DY5gImqvdp4k6haeA0nI2w==","signatures":[{"sig":"MEUCIQDzRxrDlKebwBMvc3EZn5jMAsuinqBQjorEqvmu7dqZwgIgYaMAncHMUpKRcNWIe3tyHaSgLdktzlfcLqyjS+2iFXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"da192da3ced5ae2c56bbb1e6b4700599afa8a00b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.e4440c27"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.e4440c27.tgz_1505513050233_0.25053633423522115","host":"s3://npm-registry-packages"}},"1.4.0-alpha.98dd1f8b":{"name":"primer-forms","version":"1.4.0-alpha.98dd1f8b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.98dd1f8b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"feb00693c636d8ccfced7d9e6efb99570d9e1505","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.98dd1f8b.tgz","integrity":"sha512-Qk12fmBVBddoe7kh6D60TzmpDTvBhpXjQj22T8aNxHv9W65raTfgt/MvW4HMXcVmio8K8hx8rlkJ+Wvz1XiU4w==","signatures":[{"sig":"MEYCIQC+O3DaWdCZFAXJNKbQlOLwjJ2wLlvXExZSVtbiJBDFMgIhAKR3W8Zr8btAkwFgTgJqiEbGnMXzW6pqXpCd4zbvkJVo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"feb00693c636d8ccfced7d9e6efb99570d9e1505","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.98dd1f8b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.98dd1f8b.tgz_1505513071986_0.7773540508933365","host":"s3://npm-registry-packages"}},"1.3.0-rc.5":{"name":"primer-forms","version":"1.3.0-rc.5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c33c461b670204b63c384a50d4ae5aca17781e74","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.5.tgz","integrity":"sha512-EBjXQOC8Fo6lOAi9LHN7DGxi1Rd4e+FB0cCVuVngM33AZkTamiYBUfFSn6UX+IF8CltZtlWvQb3BqbuRlVu8Cw==","signatures":[{"sig":"MEUCIQC8I4Rr8fsg6A+ZVcNJKByP/kR26NMN6yaHFsx2ftA6OQIgZZoV5fC5AzSdOTuVRT1vJfa9ug7D6JCmZ8AVIwi6ZGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c33c461b670204b63c384a50d4ae5aca17781e74","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.5.tgz_1505517361708_0.10675200121477246","host":"s3://npm-registry-packages"}},"1.3.0-rc.6":{"name":"primer-forms","version":"1.3.0-rc.6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ab34a799067b7b47bb26278a482d07fc5c308aa1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.6.tgz","integrity":"sha512-Lbxm0OuqYqfXmP7iunVA8lfFPZdhcatu/bobmDHobo+JeNqXtFx5y/WkaBqac2euQBrS8FHYVuAUMoTAvYi+ZA==","signatures":[{"sig":"MEYCIQD0cCwX14daUbasb97gnbtdkrJk6BGsL7rjN+4LlgT3AAIhAP+id4jU3HHGo3/gXHwSbDFdFoxjIbkH/QfskvnIdkhg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ab34a799067b7b47bb26278a482d07fc5c308aa1","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.6.tgz_1505534657448_0.2152895990293473","host":"s3://npm-registry-packages"}},"1.3.0-rc.7":{"name":"primer-forms","version":"1.3.0-rc.7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.0-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8ccb16ed608463a335adab9322db3241c193fff1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.0-rc.7.tgz","integrity":"sha512-aZGqlcffs78tpRbFw1z0Vn7hVd7JfaEPADbgJjiXCsd7uY7qBDbGxiwYTOGFFOM6P28vAPTk44qdZncGNTvseQ==","signatures":[{"sig":"MEUCIQCbBAByyjWtkvKhpsT6M/XiyFnYKYtXFFT7XDZ9y9VQXQIgc5a94fvICr0avRLTHaRmF7G8d3q6X+wTUMt6QR4ZKJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8ccb16ed608463a335adab9322db3241c193fff1","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.0-rc.7.tgz_1505878677154_0.9437195884529501","host":"s3://npm-registry-packages"}},"1.3.1":{"name":"primer-forms","version":"1.3.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2445756f7a9b4c432bea5ca3a12cfaab1347c514","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.1.tgz","integrity":"sha512-lUS+buLWc+7ljvKW6Dv9rFz9KE+uC0tHgtw2YahfAYTdrUfopZWZ6t8aBk2iQa01uW8+T1iPIAslgqBlZYbrlg==","signatures":[{"sig":"MEUCIEcbqnMJ47Rg5esbljKGt0QekRcFGSXfGzFDwyBoLM/FAiEAm1yeeQaC6SLo9I6IBmjR8ZtVBZi1p5s/8xarzLz7h/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2445756f7a9b4c432bea5ca3a12cfaab1347c514","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.1.tgz_1505951490571_0.5814374897163361","host":"s3://npm-registry-packages"}},"1.4.0-alpha.65deba26":{"name":"primer-forms","version":"1.4.0-alpha.65deba26","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.65deba26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9bbd9f0d7b3c567433cece55b6ba9198eac78dae","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.65deba26.tgz","integrity":"sha512-gUa72bJpzQIgDxZQUqGr7zEFl/vv7Oh56l6jN8bU/klXUm6kMtXQaoNPhLLYq08KVbrQYACS2lnvpDZPNEdaZA==","signatures":[{"sig":"MEQCIH2+9I/12tx7he7cdtt9lpYecm48g9Ogx1Bjfl1VIU4wAiBB3GdkYccPYGOPaSh4NUgxqyLEmN7ho4E8nSaUux7kFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9bbd9f0d7b3c567433cece55b6ba9198eac78dae","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.65deba26"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.65deba26.tgz_1505951781427_0.10954802087508142","host":"s3://npm-registry-packages"}},"1.4.0-alpha.82d366f4":{"name":"primer-forms","version":"1.4.0-alpha.82d366f4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.82d366f4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"319cfbb903adf6cd2a1cf2704484781ea5c232aa","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.82d366f4.tgz","integrity":"sha512-/vqhSvkzy02Pwb9hSry90/AzbrRwlpLOADjRhjag9Qonu1ihQlkAnLbOxZkSiC+4V2FimOhcnzHjEKB7dz2VWw==","signatures":[{"sig":"MEQCIASW8y8m2Mhc1HFY+Hv8WP+ytjzTJnCwCYh5WSej2RiZAiAlhAy3PgHIhbLQMYM5CP1yACJStQxLjjdoGX7Q9XLZ4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"319cfbb903adf6cd2a1cf2704484781ea5c232aa","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.82d366f4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.82d366f4.tgz_1505969322449_0.5310952479485422","host":"s3://npm-registry-packages"}},"1.4.0-alpha.971dd13f":{"name":"primer-forms","version":"1.4.0-alpha.971dd13f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.971dd13f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a72bb220560209b8df9f30fd5894c8f318738541","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.971dd13f.tgz","integrity":"sha512-lqrJP43wVtvZ3fAlcmnensQ5xIclyZFuvtEJG6fylIQ6K2T0l6YKRDkOk/KzyjuoRCXa7nHTI6I7VPpaAdGTHg==","signatures":[{"sig":"MEQCIFQwkU8sQ/crE7y8oU5zShFFVQRYzJv0XwxBfk9AAw0PAiA1XY0wvw8rmCfZl3R5cG/iWV9VWKai5dVWlAKIJD9ZAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a72bb220560209b8df9f30fd5894c8f318738541","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.971dd13f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.971dd13f.tgz_1506012791153_0.34665057016536593","host":"s3://npm-registry-packages"}},"1.4.0-alpha.eb118ad7":{"name":"primer-forms","version":"1.4.0-alpha.eb118ad7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.eb118ad7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"16d418728eb771b58c9c470a10044b4799387b53","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.eb118ad7.tgz","integrity":"sha512-/VhmEVVdMl5OmsrJOSI/zyAeCzJOXZ2dx9QnaK+YXMtVexWnVFo3k+aHeUH9iuSGiXmF0AlDv0ZlqaO2tgLoGw==","signatures":[{"sig":"MEUCIE6KxWc9meZVUyY0p8y1ammt/mgOYBwTd+a39B6mzMNcAiEA/zMNL0IQ0nyKl6WpqJ8VcFjyHMl/9uAaYRL5Tnv23oY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"16d418728eb771b58c9c470a10044b4799387b53","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.eb118ad7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.eb118ad7.tgz_1506017683560_0.1104431408457458","host":"s3://npm-registry-packages"}},"1.4.0-alpha.9009c792":{"name":"primer-forms","version":"1.4.0-alpha.9009c792","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.9009c792","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"560e4cb8f78644d5d86cae6e0c147e74f3f24ba7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.9009c792.tgz","integrity":"sha512-jC1A0wpvtaCcdzqSBHtuiFPJhArWL/BofFc+IPAbg5aBHn5THRHB+p57HgHoJESoOHYZv8Yndg67FifskNu+4Q==","signatures":[{"sig":"MEYCIQDUfZSVO3uKbmnA3hrg5ngmtNeWUbNu+3jevB6ZdkK4aQIhANF6uOE+T6rdnDuvjzJ2uENi/FzcKUdRosw11SszNkfw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"560e4cb8f78644d5d86cae6e0c147e74f3f24ba7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.9009c792"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.9009c792.tgz_1506026256607_0.16526668705046177","host":"s3://npm-registry-packages"}},"1.4.0-alpha.ac917ffe":{"name":"primer-forms","version":"1.4.0-alpha.ac917ffe","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.ac917ffe","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"beed3cbd00f508aafd08781554620011915227ae","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.ac917ffe.tgz","integrity":"sha512-BmTdqVrwLatYmzw1bxRqypMZhbVi2wPHlw0o4MXc06QlncHgwiSg+PYujuZMRELtyjbvlHL7U8xY2S5BXB1VqA==","signatures":[{"sig":"MEQCIEnWG/qs8tGg3RAeW7SBNYgFIEri9iEY+IQ+vY4MAiTAAiBFCSiYhjZAiPCVtNJEmP8t7FEuNEzGuAVqLQhEzfjuFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"beed3cbd00f508aafd08781554620011915227ae","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.ac917ffe"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.ac917ffe.tgz_1506111373772_0.733310354873538","host":"s3://npm-registry-packages"}},"1.4.0-rc.0":{"name":"primer-forms","version":"1.4.0-rc.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"68b52fe74f1d6da3bb08042986cecfe283fa91e2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.0.tgz","integrity":"sha512-eb2DeS160Ue6sa/+yqzmP+eZNBzciIFIFm8HYwm2a8HCU5lpAgNO3bpLBv++zh99lWhstV3M0VZXcijcQal1eQ==","signatures":[{"sig":"MEUCIAfq16B9NH+DpbsriOaT5O1q4LuKV6wUu1x0xP943b1mAiEA6DkZJ0skAiJyiKRaxk2TZX8k/2Cpqtxi/ay+jE4RDCA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"68b52fe74f1d6da3bb08042986cecfe283fa91e2","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.0.tgz_1506116452076_0.6993993178475648","host":"s3://npm-registry-packages"}},"1.4.0-alpha.ff961b66":{"name":"primer-forms","version":"1.4.0-alpha.ff961b66","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.ff961b66","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6869aad7cda23de7e4314679d0cb9347f366c889","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.ff961b66.tgz","integrity":"sha512-fo+jPqFFn0b/hVRCTQdj4ElWCA67NEjkIIGvITkZOL2NZz2Z8ShiRREH268vLquSXLkO49SQ4xvXYhUqMzfupQ==","signatures":[{"sig":"MEUCIHNSlnSRgxYOFDRiCIG8v2S58OSI0Qd5GBMolpvkP9SlAiEAxQJDwbGowKIcrEZFPh8wcpnN7gg0rFnz/muTZgTDXO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6869aad7cda23de7e4314679d0cb9347f366c889","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.ff961b66"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.ff961b66.tgz_1506368711889_0.3926770386751741","host":"s3://npm-registry-packages"}},"1.4.0-alpha.624e39eb":{"name":"primer-forms","version":"1.4.0-alpha.624e39eb","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.624e39eb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"96a18806bb40ac9ebcf5092d947b8129c2a7a494","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.624e39eb.tgz","integrity":"sha512-q6zgaR8ssZVXxJjyEwLdgA3u372YeEa9pTPojFW+3wIqzCSx27Kg+8f5TWEZWOFXC5vtU3wOBwahhYA8Ard1ww==","signatures":[{"sig":"MEUCIQCoveh36KkW5aNwF2okY2w/sixBzAikgZRbBhKwiQPzRAIgCKuvFPSbq/uBNslH+mQGbNC/kAPJX9ajL+z8PbHWTB8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"96a18806bb40ac9ebcf5092d947b8129c2a7a494","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.624e39eb"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.624e39eb.tgz_1506369109587_0.6931081782095134","host":"s3://npm-registry-packages"}},"1.4.0-alpha.0b69014a":{"name":"primer-forms","version":"1.4.0-alpha.0b69014a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.0b69014a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"81551c7f8b92743fd75403e0d5bd7692ac13ca8b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.0b69014a.tgz","integrity":"sha512-XWNFREPc0SUpqogl1ZYFk+mUv4XSJ9vRl9Ald2x+05oJEwQVTq46Ah+5LfCsi/+fAHs243hsVw8FwPy1QfkWbg==","signatures":[{"sig":"MEYCIQC9fRbpqRLtzgxuaEMx7K0r001UR4ybNcBjveeEqCY04AIhAP8ZZr75cpW0i5KoHRS4gpVdTV4fQVKSj02iwQkCaBJ+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"81551c7f8b92743fd75403e0d5bd7692ac13ca8b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.0b69014a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.0b69014a.tgz_1506369847787_0.04527434566989541","host":"s3://npm-registry-packages"}},"1.4.0-rc.1":{"name":"primer-forms","version":"1.4.0-rc.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"fb7aab1e58fb6f0fc79ce1e8c394b7f0facf6786","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.1.tgz","integrity":"sha512-QUWG40KjBDX6sJkygW+5UlXNwmJOWu+AnGz/8a4rej7b7Oke0aJD8Zlkp83+KtTiOQfq+xtqKhg9FvIy9BEkTQ==","signatures":[{"sig":"MEUCIQCEl8WrSujtFTQYDYCAjVJatJfi3CaijMr9FMLTGDcHggIgAv5ufQ/bQtaxb+MdckMYlznJqqs6sIzoSs1QebnE2QQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fb7aab1e58fb6f0fc79ce1e8c394b7f0facf6786","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.1.tgz_1506370253560_0.2126795770600438","host":"s3://npm-registry-packages"}},"1.4.0-alpha.c4adcad2":{"name":"primer-forms","version":"1.4.0-alpha.c4adcad2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.c4adcad2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"00463655fdce534d3b415a98cc1a3634a5e5ee7d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.c4adcad2.tgz","integrity":"sha512-fmJzFhXRg8btBRq9I9JxvDipT3BCWSmLMDyejmqs7UhkXF1kg5Ryndmi1TgyyT1+tMWB82i9Rc4PSAGB+Useog==","signatures":[{"sig":"MEUCIGneCFcLwCyOPZbLFMhdJR0c0c+CNvDxpEc1XrzPwyfXAiEAj+mqnJxknd4N73RFVxf7tbA2Cfo7eV/Zbd6jx3wH9E4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"00463655fdce534d3b415a98cc1a3634a5e5ee7d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.c4adcad2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.c4adcad2.tgz_1506370256415_0.7490586412604898","host":"s3://npm-registry-packages"}},"1.3.2-rc.0":{"name":"primer-forms","version":"1.3.2-rc.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.2-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c1240b391c68201836534498005bd29094bee37d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.2-rc.0.tgz","integrity":"sha512-rcMuwPOJ9GLf1THLHlQb1ohQlDAZEiSudwn99cIZrJFoUncVGTWzJ6eZNFBfnvK3c3MPqpZvmd5IfoxqQE31/w==","signatures":[{"sig":"MEUCIDQ6+eCl6gwvq4hkG6WLf5hCwOiQcNzQVZY6zMVNkegXAiEAnj4UOMO3EiGFEy0VBk09fEHmnd6Sy7wdjriIToaq0kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c1240b391c68201836534498005bd29094bee37d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.2-rc.0.tgz_1506442929269_0.2886639288626611","host":"s3://npm-registry-packages"}},"1.4.0-alpha.02d19bc1":{"name":"primer-forms","version":"1.4.0-alpha.02d19bc1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.02d19bc1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"48cd634e13679686db51c7006a1fad1db7648669","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.02d19bc1.tgz","integrity":"sha512-TlhDUI+WeSuvpb6kvJPcHaw7L4TpBilKPUZBUqcZOjfjn96xxG2lQ23E2A7MrlMQSepc09mD9uV7cUUjiOri8g==","signatures":[{"sig":"MEQCIF9WzEYDlKK7XzUhPTXMEDVJDRreXIVlm9LyED1ZZk4hAiBGeuhxLnE/9Gy9H3xlYL/KuWJJT5qpHDl+MDc8rbmQPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"48cd634e13679686db51c7006a1fad1db7648669","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.02d19bc1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.02d19bc1.tgz_1506443086310_0.635398963233456","host":"s3://npm-registry-packages"}},"1.4.0-rc.2":{"name":"primer-forms","version":"1.4.0-rc.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7b0f849c95047a43348e0631fe20301fdce62a89","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.2.tgz","integrity":"sha512-GRNZt1npG8n4oVTiZPivgv0GuVznPl8vDEHOpscI/0WST2npav35Du6RgnTXK5/FCzrMLwcIWKSNkMNIvt+Adg==","signatures":[{"sig":"MEQCIF47FNC2LfPrciXHaGzc5DIlbTw4T3OPgp0m/vzKfBFxAiAsk3EBCKoaMj/vVecovJOcbpuYkr5bDb2KMbof7poZLQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7b0f849c95047a43348e0631fe20301fdce62a89","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.2.tgz_1506443418448_0.26057288190349936","host":"s3://npm-registry-packages"}},"1.4.0-rc.3":{"name":"primer-forms","version":"1.4.0-rc.3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"594a8fd4cabad374ec672daffea4a516516ef43b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.3.tgz","integrity":"sha512-tDeTFmkfpsZ/9QEs2aY8BPG9GeMDHiXEbikwdToMP+EOQufSVsY/LNG9mtn5VEumY/Fg8P4FDBW6XsWhI35uXQ==","signatures":[{"sig":"MEYCIQCMjzg3Ke13T5Ey8GVNY9/IDcPs+0kG/72pt++zXpjaygIhAL2wh9Esmn0VHApN4rPzYmGCC7c8gZUeNv2ImeT61Yva","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"594a8fd4cabad374ec672daffea4a516516ef43b","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.3.tgz_1506444290843_0.03296662634238601","host":"s3://npm-registry-packages"}},"1.3.1-rc.1":{"name":"primer-forms","version":"1.3.1-rc.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.1-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a0ac5a0344857420c8ba9fa819b0fa63e2780105","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.1-rc.1.tgz","integrity":"sha512-vKamGr2rIIwrrNLYFLiCnyFg0uFdoeShL0qhSmPgox786YTWcjIAzSiCP+IbPqjd34/NZ4+uITTj+SXF5Ks90g==","signatures":[{"sig":"MEUCIH8UIh+oIEBDPovADocMZ/DcjDZPQlKzVcqxeZzkMHRrAiEAi5i4ILRenwxUOmcLVFFTtgJ5+OIZYpW70TGwdIIBqQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a0ac5a0344857420c8ba9fa819b0fa63e2780105","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.1-rc.1.tgz_1506444607268_0.8000863837078214","host":"s3://npm-registry-packages"}},"1.4.0-rc.4":{"name":"primer-forms","version":"1.4.0-rc.4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ff78d4672538a1c3ee01df0d68deef09417b78ba","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.4.tgz","integrity":"sha512-jtA+ahAUd/b4RVbHpocaj1dk54dcdzeqgNgscYF1d0HJZQuFNbZz8jX3/knxFv2YYm9PSUG+I00jvo1Tw72yOA==","signatures":[{"sig":"MEQCIBlG45x5f8tQscTdY7X/QCikhbhPjZLWDm2OLoXe2xrrAiBS/kiHOl47iThpuY3o9Vnyec02e+RaAkpKybdPyK6SJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ff78d4672538a1c3ee01df0d68deef09417b78ba","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.4.tgz_1506444952412_0.7105260053649545","host":"s3://npm-registry-packages"}},"1.3.1-rc.2":{"name":"primer-forms","version":"1.3.1-rc.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.3.1-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bcbc96db4f8ecb75128c87c0c9ee0af74eb0a402","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.3.1-rc.2.tgz","integrity":"sha512-4C6VGBgloJ03sRfB+2Wj2Ps2KzlEvx+zwd42R7Zil/0ZgJx0TemFoNlsHxb1Wh6RlNGza9E+CSt2FmYVprA1nA==","signatures":[{"sig":"MEUCIQDHTiffot7jgI/8sepbNxFzTEnE4lJm4xVNzDLkyRAgSQIgVOn78qHcgjtPbYT7owy1IaehmKrEI9ryr3vpKazP5+Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bcbc96db4f8ecb75128c87c0c9ee0af74eb0a402","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.3.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.3.1-rc.2.tgz_1506445120193_0.4348313461523503","host":"s3://npm-registry-packages"}},"1.4.0-alpha.467f3674":{"name":"primer-forms","version":"1.4.0-alpha.467f3674","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.467f3674","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e2fc488d1d862dbb870d53c30aed81a987899f35","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.467f3674.tgz","integrity":"sha512-bMQVFhcfZaWF6+/osJcCJTdGjK13+6Sj3b30NvbTON8533RFnfbHVTXp9gGvq34WH5rcKtJFJLcsuxcGnu3JwQ==","signatures":[{"sig":"MEYCIQCx53ZN5jC27a7czoH0Nc2Xdizd182tuq/nzcogyrUbfgIhANKl4GC2Vx6xuZXbu4i6+1iu5nWz3fKool+JTVfgK0CF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e2fc488d1d862dbb870d53c30aed81a987899f35","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.467f3674"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.467f3674.tgz_1506445277436_0.4038497901055962","host":"s3://npm-registry-packages"}},"1.4.0-rc.5":{"name":"primer-forms","version":"1.4.0-rc.5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f431239bab4b0f889197c8cf012ab4e2f0b1e2bc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.5.tgz","integrity":"sha512-+54sQ1v14RpjuSo8zmEBCG4C6zS8zL68mN6iPfZpqH4PUvzp+GPu+D+1IIUTXMPmeaeUa7yIbXTw5ToMhfBPcg==","signatures":[{"sig":"MEQCIAsX/1UNnSq5+ly6kTsiQApciNztCbZ2PFYgJFQeIT9DAiAni2x8srCrpriucIyfKA40IiPZzu2yeM/Eas0Gdcimmg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f431239bab4b0f889197c8cf012ab4e2f0b1e2bc","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.5.tgz_1506987155109_0.7784925221931189","host":"s3://npm-registry-packages"}},"1.4.0":{"name":"primer-forms","version":"1.4.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"67bfed60c1080e7db5643e8955e2e226b807baac","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0.tgz","integrity":"sha512-maWF3QcgjnUU5m2om0uXZgLrv0/Kh8V9JNGSqoYKS1+k+9mPqTvHNB3lHKeAJnM/V2giHvELgCs1DtzNPfo+og==","signatures":[{"sig":"MEUCIQCcecUUKYYJWXBJfX15p6Zh0gPqUcf1Q/dLomY2TNLAMwIgPlbLUtzHq9wYYVSmT5WcbA2lG5Tzlh8h4580GzJQAPA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"67bfed60c1080e7db5643e8955e2e226b807baac","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0.tgz_1507140839058_0.40448947134427726","host":"s3://npm-registry-packages"}},"1.4.0-alpha.1ced14b8":{"name":"primer-forms","version":"1.4.0-alpha.1ced14b8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.1ced14b8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"aed11487e46270802fa0df779b023f48514a8380","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.1ced14b8.tgz","integrity":"sha512-Z/bFbpPrJ/tT2xS58wj0IwZrvWknRgLoNvuKpdNVrY1yaerEQnkTwOlvAm5dDdHhegjhxK2C0dwSc4DXHbFOwQ==","signatures":[{"sig":"MEUCIBHf06NPTpyu6QxFA6o1WklYnwp0iHpDjfibL5b1N/x1AiEApFIuJe7gauwjK8XUAN8dLAqntRLFn+opisyAJpGokpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"aed11487e46270802fa0df779b023f48514a8380","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.1ced14b8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.1ced14b8.tgz_1507158347108_0.9462706288322806","host":"s3://npm-registry-packages"}},"1.4.0-alpha.a496cb5a":{"name":"primer-forms","version":"1.4.0-alpha.a496cb5a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.a496cb5a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5e2aa1cc55a11f96ba6b654533f4226cc4e0c08b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.a496cb5a.tgz","integrity":"sha512-3Eqi/wwHdEEVKgxWZ8XpudQ1fCF5CsmP2jA5ssCrB4JSn5Wkmq6BOMKSAMpbkRN1l2XjGn5q4N+6cVStCkLntg==","signatures":[{"sig":"MEUCICBeqHwHy4PLwtLY8PAEnIPHJHmfPsiQrQ3V3YrhDM/xAiEAlWfejYnaKcUfilUnDuKqtFnvDGWKLEYOk+iPGjvPDbc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"5e2aa1cc55a11f96ba6b654533f4226cc4e0c08b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.a496cb5a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.a496cb5a.tgz_1507158582304_0.3211025584023446","host":"s3://npm-registry-packages"}},"1.4.0-alpha.84ebbc83":{"name":"primer-forms","version":"1.4.0-alpha.84ebbc83","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.84ebbc83","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a663aa3fb357b8732c49d3b4ffdebc6e9edef88b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.84ebbc83.tgz","integrity":"sha512-118raIz5sS0CUDBhiqvX25HjDVUrGfRyenHk3LVllRvLtqgW/AShuHc+rd+5hi/m8Boi+iCFTfQTICWZ6efitw==","signatures":[{"sig":"MEUCIQChSNAVPHr0eA3D+s/KDsWCE5J/5Q0KkeQ6bY+xhpeknAIgSHNWl13ttMlr2O5vj+tlz7LIjQ09lH5AP6R2qSbiav4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a663aa3fb357b8732c49d3b4ffdebc6e9edef88b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.84ebbc83"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.84ebbc83.tgz_1507158687407_0.6232943795621395","host":"s3://npm-registry-packages"}},"1.5.0-alpha.d5a9ae4a":{"name":"primer-forms","version":"1.5.0-alpha.d5a9ae4a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.d5a9ae4a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6b3c0ec6c12e215ce45332ecc358b207f219b9bf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.d5a9ae4a.tgz","integrity":"sha512-8G5CBGsd3ZRpKmzpb17+t6JR4SyVwrNBt6v1SkEHDILi4Xdi6Y/iSpVHlVuXkDBa5+OYx0mTPsOWxhzDd+TnjA==","signatures":[{"sig":"MEUCID4FyFhVHY+tDAZfQMGOlLC4CthqtN12u1A6KN55unS1AiEAhk/yWVc9RacAdFcJCPWZD0FhRrkGJiiNaMuqkefL89g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6b3c0ec6c12e215ce45332ecc358b207f219b9bf","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.d5a9ae4a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.d5a9ae4a.tgz_1507161418598_0.8817648619879037","host":"s3://npm-registry-packages"}},"1.5.0-alpha.0dbe01ab":{"name":"primer-forms","version":"1.5.0-alpha.0dbe01ab","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.0dbe01ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c2c898753004718aa8be75dfa10c64a7dfe8bcaa","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.0dbe01ab.tgz","integrity":"sha512-/n+fn7LVNK3qlbLm/pCaxY0eEVcGhpo1XNiRX0jy+xE56R+PVyrjpJFfy1zwpfORNyTxzUicZDcJTadhOHjRug==","signatures":[{"sig":"MEUCIQD7auZ/tJ8kAQPoh2Jh3S+0J0yhaGFmF5+culDZVnYLtgIgQC5sB1t4NIjJN/tX4XyS4tBRIf5AW47nS7HWaqRQ3Jk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c2c898753004718aa8be75dfa10c64a7dfe8bcaa","scripts":{"lint":"stylelint **/*.scss -s scss","test":"npm-run-all -s build lint","build":"primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0dbe01ab"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.0dbe01ab.tgz_1507161992298_0.13885380420833826","host":"s3://npm-registry-packages"}},"1.4.0-alpha.9a3ed1d6":{"name":"primer-forms","version":"1.4.0-alpha.9a3ed1d6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.9a3ed1d6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6d4d32dfd33d9be35035352585c963e5811d9467","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.9a3ed1d6.tgz","integrity":"sha512-WIZjprTsynXMOTvGAg6mx4JOL3pkFESzSiQ6jvtpj3br/X4/q6ngLE3S7j3ljqnCiophif8s/WQAPHw4kTboqQ==","signatures":[{"sig":"MEUCIHGkZ4PRwc4udM4arfgZ0hM6iTIypp9TcK4M6Jvf4IoKAiEAjPyVdNdT0QiIIU7HRChHBlIXMSlXjPLZKSvBYEnhFTo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6d4d32dfd33d9be35035352585c963e5811d9467","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.9a3ed1d6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.9a3ed1d6.tgz_1507238928620_0.19288536021485925","host":"s3://npm-registry-packages"}},"1.4.0-alpha.cd9db871":{"name":"primer-forms","version":"1.4.0-alpha.cd9db871","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.cd9db871","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"378ea09e2b014d94512f72f98c714552fdbeee71","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.cd9db871.tgz","integrity":"sha512-3pS7PuR/xrP7O/FyKDr2AneDWXLSZP0Jf7quzLnW8lOzO1UkuWnoS38vf+DntzFoBqcH44mtF+5oO4iF8GxL/A==","signatures":[{"sig":"MEQCIC/pERFKxXO2oEUelgP3rRGfXSJJiEcwXE5TarrxkUSDAiAk6JTxyHKqfSd8JhREolbwkwkAP3aveHZl/3le9YJAAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"378ea09e2b014d94512f72f98c714552fdbeee71","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.cd9db871"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.cd9db871.tgz_1507242235487_0.7215815612580627","host":"s3://npm-registry-packages"}},"1.4.0-alpha.a13e6f94":{"name":"primer-forms","version":"1.4.0-alpha.a13e6f94","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.a13e6f94","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"02cd3ada2b70518e2e1fa66c0453b770b65de5fe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.a13e6f94.tgz","integrity":"sha512-GWpT/1+N69+1amtaZhoEG7FtCrLs9XoJNksv+5nqTewGOzXe+SPSM8geA8ruF+BtTNvdXGfbe05Cy9W37g8u8Q==","signatures":[{"sig":"MEYCIQCoUNc3i7iqhaE4qcFASV0YWHKrIihpfsw7H0LkfY6g3wIhAIr5SHWAE3BkC2BLcebaD5X33VMnr8VGxMfdEwj9dJ5s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"02cd3ada2b70518e2e1fa66c0453b770b65de5fe","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.a13e6f94"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.a13e6f94.tgz_1507429771627_0.5911147375591099","host":"s3://npm-registry-packages"}},"1.4.0-alpha.acf55e92":{"name":"primer-forms","version":"1.4.0-alpha.acf55e92","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.acf55e92","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"09116565370dd696ffe94e36e77c7b16a1343627","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.acf55e92.tgz","integrity":"sha512-9DzmrIFEHjvB9GDvaDjFj4weZYYqTsMKAjyVLJKw6bb5hTMFgujuspWJbT3dv009KUzX0tZky2jVVp5OJPQk7g==","signatures":[{"sig":"MEQCIGMDHrjzeh4/G6s6Q6lqoAdp6eg6LYxHqy7EiZeNq/jjAiA1+8J+GxnMJq75qOlV7cfTQEa+KtoQjLsCM4/bIFwGkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"09116565370dd696ffe94e36e77c7b16a1343627","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.acf55e92"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.acf55e92.tgz_1507575031817_0.6162651574704796","host":"s3://npm-registry-packages"}},"1.4.0-alpha.5b3f9c50":{"name":"primer-forms","version":"1.4.0-alpha.5b3f9c50","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.5b3f9c50","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"72bc1efd8de36dcc42c7425a97fec64650db6b7c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.5b3f9c50.tgz","integrity":"sha512-EYFvzWkh2zpdvGp5Y9jKIBt8dQkN2eDKNjxZu0lTsvYHQPu5GXkPOmAhNkx9cHbnpCpNgKVRN4fEp+tnAoG8xA==","signatures":[{"sig":"MEQCIEsz5EFCZMiyBB9SEsp/v6wrUk9zJ6oDIuhuciaNg2CuAiB/NygJP8IvDF3RPIkNTxRpwgvBigUNpd2OFlTBT4iWlA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"72bc1efd8de36dcc42c7425a97fec64650db6b7c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.5b3f9c50"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.5b3f9c50.tgz_1507592469573_0.06597353029064834","host":"s3://npm-registry-packages"}},"1.4.0-alpha.fc0632f6":{"name":"primer-forms","version":"1.4.0-alpha.fc0632f6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.fc0632f6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"04c6bf4168178a797b8d3126fa3b3653f1bba5ab","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.fc0632f6.tgz","integrity":"sha512-PnK1vi3VihZolGf2SDIag7YWmVirxlj/waMv8BFRVdOGz5M8WVtT93QattMEi/9P6uxXHNaO8F7SSV5rN3RLXw==","signatures":[{"sig":"MEUCICKH0KHfuyDVFD5CC1PMTef4HviWyAyjzmjFD4vE6oLWAiEA3pkoSkfiAYQ6cEHgvcj3Q2RDNe9oQpQYNqpObZaEyxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"04c6bf4168178a797b8d3126fa3b3653f1bba5ab","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.fc0632f6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.fc0632f6.tgz_1507661866497_0.04173762002028525","host":"s3://npm-registry-packages"}},"1.4.0-alpha.96589fef":{"name":"primer-forms","version":"1.4.0-alpha.96589fef","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.96589fef","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a421181b92e286f33bb450c9ccf007ed8af74284","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.96589fef.tgz","integrity":"sha512-qSREE57ul4KcdITOTU+jWhIlawdrjZ3Xu5XdzZqyevxDJ2tcpStk5lUKz9wKbKh0cui0WP0+AVgA/pxLdWJQfg==","signatures":[{"sig":"MEQCIGX4By5Y9I/unXJ5OOhvlCW2qkXPTG7Wlmwn3kQ0p5lFAiABemGXkhm4/dpgx275U1BU3k/zcaHdd1m/ozQ6yaACfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a421181b92e286f33bb450c9ccf007ed8af74284","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.96589fef"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.96589fef.tgz_1507662383339_0.7154300003312528","host":"s3://npm-registry-packages"}},"1.4.0-rc.6":{"name":"primer-forms","version":"1.4.0-rc.6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0f60b4affc46e271978d5b833113d5b31e28fb44","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.6.tgz","integrity":"sha512-VgRnERHyA7v+NPo6gBd/mDR5qo1QwbQy28/mohQkgms26ihmdDQR2QdlhdPUtGL8Ig7uUQutfUSqmxlb+Q3M9g==","signatures":[{"sig":"MEUCIE3emou6ybW3F1C7l9pjdWfKT8O5Fd8ce6EgFZE4fNC/AiEA9c9UFi5o0o+qcLKoDpJVZeanadFguTJpMbXxqzCROS8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0f60b4affc46e271978d5b833113d5b31e28fb44","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.6.tgz_1507766580965_0.40713269426487386","host":"s3://npm-registry-packages"}},"1.4.0-rc.7":{"name":"primer-forms","version":"1.4.0-rc.7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"cd3e5282b8b4939991509b45c1d69b4cbd2371ee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.7.tgz","integrity":"sha512-RnP/TkbxxLteeCpVfsH0S2kzlyvGtOH4TQ6uaFoSkpu7raIhd5lKfrsUlu0wgED+eNKVUH/ocACwjsy+B8uy1w==","signatures":[{"sig":"MEQCIHqvorpEPjFuzQ1s8m2S6i2AELkyFP2MuIBiLeX/aw5MAiAhOtrTiWiq552KNNhEldVIxS0m6W3Dm4bzEfu2yUe0Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cd3e5282b8b4939991509b45c1d69b4cbd2371ee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.7.tgz_1507767227721_0.5982635687105358","host":"s3://npm-registry-packages"}},"1.4.0-alpha.923aac60":{"name":"primer-forms","version":"1.4.0-alpha.923aac60","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.923aac60","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b1c8cc6bf30e51b1327de20a5883646165d3a767","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.923aac60.tgz","integrity":"sha512-s6MmgYMyBA0np6VjFOGZpr7CysUuZEoUVu5rj0oh3Y3BfQl05viQmGRRzL9vrU+zhxri951AyP8cka6G+joP6w==","signatures":[{"sig":"MEUCIQCXPF2QnyDksshsyvnPyFmbp2+uzFb9UWJ+E0kddsXTWAIgWj4zVzLte/FanglbL6z7hd6PJ1lMNszlfJI5/Fs5jP4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b1c8cc6bf30e51b1327de20a5883646165d3a767","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.923aac60"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.923aac60.tgz_1508148288846_0.4525813858490437","host":"s3://npm-registry-packages"}},"1.4.0-rc.8":{"name":"primer-forms","version":"1.4.0-rc.8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"56892a37e99d837b2dfe1ba5a008ae0d2544ba60","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.8.tgz","integrity":"sha512-o9VVGpHjPBlivwywQtas31FD2Of98sJQKzHquNLJZIhhCY9kpeAl/kIpKtJVUaXxMgb6Pdxivz9Qhkx5huvFCQ==","signatures":[{"sig":"MEYCIQD0itjk0SEVd4xH42iBZmQuZ/gZmVqX+AoVLIaxUerLegIhAPjwe+12hpJVz4639Wa+ptFx8zA9Uxj+Z/vFhwp9uO0w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"56892a37e99d837b2dfe1ba5a008ae0d2544ba60","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.8.tgz_1508172766590_0.8599274517036974","host":"s3://npm-registry-packages"}},"1.4.0-rc.9":{"name":"primer-forms","version":"1.4.0-rc.9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"14447f2ea812e1c20ee45eab473195567264278e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.9.tgz","integrity":"sha512-M8m4tgVJTINbF5RS9AZ7SWTyGQ7WjvjnG1V5i9Q/irLphMiLfAx7+pt6ZFeq2JkaRcqUTzgcGyUii5Hf5YLY/w==","signatures":[{"sig":"MEYCIQDBJifXEIR9wz1CW8NQNYi2EefMg2l8DgekK5uUvJAUZQIhALXRkxQvOvNsDYPXfvHbb0bQPqHu8pS0VLBwiUzL96li","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"14447f2ea812e1c20ee45eab473195567264278e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.9.tgz_1508189832244_0.8659039919730276","host":"s3://npm-registry-packages"}},"1.4.0-alpha.2196529c":{"name":"primer-forms","version":"1.4.0-alpha.2196529c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.2196529c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d90dd8bb67a5eba73912d1f83189ec775c857bc3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.2196529c.tgz","integrity":"sha512-HGDT6Rve5JspD7Dj1Z965c/pqtmfsVvJglud2cZj/pxPZ2IL9DMrhsWFylEblQFJ4HOLLRfm8414Jca2dDhlYQ==","signatures":[{"sig":"MEYCIQDTkxGPgULNoZIgJKbiSH90YfYAY2vXIeWcVacaM3moEgIhALc2QWLgrYQ2pqWxDZQ/pbYdTY6c0Gdr8N9nkxDk8fZR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d90dd8bb67a5eba73912d1f83189ec775c857bc3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.2196529c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.2196529c.tgz_1508430951796_0.4025772486347705","host":"s3://npm-registry-packages"}},"1.4.0-alpha.0c02d6f5":{"name":"primer-forms","version":"1.4.0-alpha.0c02d6f5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.0c02d6f5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0026b24e8e58dcc0494cc1c0119250a874baf51d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.0c02d6f5.tgz","integrity":"sha512-2y56wZ1MIWrQFxcGn9cdmmfsYVQ+jHKGZbt71oF83nQoQ9wZ/ImNHBjtXPvwm1p0xZBv38/om0SanAGkH7osQA==","signatures":[{"sig":"MEUCIGVYfpo3y+U0mPf4r9yz167kGUg5m1Kz/LEecHCP3R+KAiEAg4Up09qM11PLiXHyyCc7SVZVhmz/pc7yLbfCA/UVZjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0026b24e8e58dcc0494cc1c0119250a874baf51d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.0c02d6f5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.0c02d6f5.tgz_1508433238317_0.7685028878040612","host":"s3://npm-registry-packages"}},"1.4.0-alpha.57ee1db2":{"name":"primer-forms","version":"1.4.0-alpha.57ee1db2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.57ee1db2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c9cf29ec166159a7372b7f0f514518c599f6c2be","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.57ee1db2.tgz","integrity":"sha512-LY6mSD5jLnQP6MlJPtXYG793MnTrhZSHkYKZoVJIz2btm5rpDkCQ20SeqvjuRsCL364vAVoWldxmK/e9DRMAVQ==","signatures":[{"sig":"MEUCIAFgEYdWML52v3Sud1YVkvtUtyLvC4TzKl2HM0thMMLJAiEAxmDQea9ItWbiOYVy/+Zm/AQnR/K3+4+/koeDKCaSHNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c9cf29ec166159a7372b7f0f514518c599f6c2be","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.57ee1db2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.57ee1db2.tgz_1508433883355_0.35198084730654955","host":"s3://npm-registry-packages"}},"1.4.0-alpha.f56e0e8f":{"name":"primer-forms","version":"1.4.0-alpha.f56e0e8f","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.f56e0e8f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9ad97fe116fa37c5a102fe0225d4c1602ebcc1ca","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.f56e0e8f.tgz","integrity":"sha512-bdAyWqktAhdDBKp8V6b0YH8x0SITzblK6g6EY1JYrTJctY2gXT2vg5tEgGztinEZ+HjIeGVE3juudm8ZBwT/ow==","signatures":[{"sig":"MEUCIAiXHeSuMeYESL/NJhCMnZ/aBkDZrxlfe014H5CfEmsgAiEAinoVkhU+amSwzkGg4O6sUpbTeivyzcjg6H+2DiaeSCc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9ad97fe116fa37c5a102fe0225d4c1602ebcc1ca","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.f56e0e8f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.f56e0e8f.tgz_1508444074024_0.9631535010412335","host":"s3://npm-registry-packages"}},"1.4.0-alpha.50e3e38c":{"name":"primer-forms","version":"1.4.0-alpha.50e3e38c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.50e3e38c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7184b92669dfc965b0cfdae278c2a02c60263796","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.50e3e38c.tgz","integrity":"sha512-feo/FSCUmGZ3ebWiOkHhWoNCjlxK1EsQKD/f0thg+/iAbaNW6ihJMoaoMCIryKzybVm2LTSKiCrKdud2uDa8tw==","signatures":[{"sig":"MEYCIQDKVruvJTVE4EYXmC8PzPqH1G49vIWJ4abb5Xlz1qG1fQIhAMW430A5ZCxXN65XaQ4yAsXanX/aFAvafswR+RxhuJUn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7184b92669dfc965b0cfdae278c2a02c60263796","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.50e3e38c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.50e3e38c.tgz_1508450212072_0.9554322394542396","host":"s3://npm-registry-packages"}},"1.4.0-alpha.855d6dc1":{"name":"primer-forms","version":"1.4.0-alpha.855d6dc1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-alpha.855d6dc1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7cf94aef16708ff88c330a12214b6dfcfcd9efff","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-alpha.855d6dc1.tgz","integrity":"sha512-13X+p5DqV0AJGa5P6gVGHdL0U/xgax5ih1DxSlXs7e45NnPhvxiC9jKCRg5qpGmqrZJw9pI6uo2SA2JdfxNkWw==","signatures":[{"sig":"MEUCIQDhZJ4q9vS3o8s0pI/nO1ezJ1hd8gFXs5CYv/BN7zecpQIgHfJazbx4KDec8vCJYys2DBHOaTvOk4i9J5+UpYmMOgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7cf94aef16708ff88c330a12214b6dfcfcd9efff","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-alpha.855d6dc1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-alpha.855d6dc1.tgz_1508450974387_0.7510983904358","host":"s3://npm-registry-packages"}},"1.4.0-rc.10":{"name":"primer-forms","version":"1.4.0-rc.10","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a8603529bb60657861783c4bd74f9f2526f07534","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.10.tgz","integrity":"sha512-1mIgLA5kbeDj0yw1S31rW1jAwhvgx4tSgxLwRhUWmMSJJqC5blL1IQoaZfYyUa3Bmr/TiqDtXt99Pmpu6dM3Mw==","signatures":[{"sig":"MEYCIQDWPdn5dhrSB6GgRXLPnFYWnFOGb503jmmHqA5de6WrNwIhAIJxupQgraxJTaejOuUY/qOdlevz/lBsvpKtiPRyHfnL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a8603529bb60657861783c4bd74f9f2526f07534","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.10.tgz_1508786975615_0.3276207777671516","host":"s3://npm-registry-packages"}},"1.4.0-rc.11":{"name":"primer-forms","version":"1.4.0-rc.11","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a974dac5ded3da2dc4703db150d69eb037e11b9d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.11.tgz","integrity":"sha512-xQ5khC7DfKzxorN1KNUobwufyAUrbJLBcADv9UuZWMDixtkI/uRrkwzquKNBjYgYkCOaRVThlGI6JG/dqmX28A==","signatures":[{"sig":"MEUCIQDkPxnqXeuEm1MFF42PI25Ww1sZjAnKWmdI/vL7vesYGwIgfwPj+V1mCGjTk9fnV1cpn8XuEiAuWrBQ6xDURDl4oeo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a974dac5ded3da2dc4703db150d69eb037e11b9d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.11.tgz_1508792773607_0.31362256803549826","host":"s3://npm-registry-packages"}},"1.4.0-rc.12":{"name":"primer-forms","version":"1.4.0-rc.12","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ad8cd8b1c8e86532ada855b7d8443b8259ad6bd7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.12.tgz","integrity":"sha512-cR6WkvhNd1yt7fFonCJlTIOSyvqqZXoOMGKHf7LLL3/h9WRuH2brdfJURCl6UxtfGzvFaZK0tEKnz+kqhyFiUw==","signatures":[{"sig":"MEUCIGT8bBNP+8Wu102PBpiwZU0ZVC0TwPN7jpBpbKcYsME0AiEAuSaGxLXYbMNC8friE/5jeLgLUf9kOBZaDuwoThZe2HE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ad8cd8b1c8e86532ada855b7d8443b8259ad6bd7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.12.tgz_1508794363670_0.4655484326649457","host":"s3://npm-registry-packages"}},"1.4.0-rc.13":{"name":"primer-forms","version":"1.4.0-rc.13","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b24b33588e375c9dfabd6a84dae3852cf3370b69","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.13.tgz","integrity":"sha512-NW6/VkT3xhoJYk6ZWFLntXjIJPZ6dALQ0M8hk5hMsuZpJTnpmmZcx4AzAbpmlRTAbECTCYBgWDq3w8vOfaW/dg==","signatures":[{"sig":"MEYCIQDxNWHUJyXK3lIO3Zg7Mmh/78aqeKOYoUYQN9VLRVQpRQIhAMV9t9UVMj6O31DI7CRJBCr6In0Zv0lNQItRRDu9TCjC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b24b33588e375c9dfabd6a84dae3852cf3370b69","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.13.tgz_1508868822924_0.05622689286246896","host":"s3://npm-registry-packages"}},"1.4.0-rc.14":{"name":"primer-forms","version":"1.4.0-rc.14","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.14","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c6ea4c051ce1fe713d52186f5087189fa2bb8c0b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.14.tgz","integrity":"sha512-UVYKx+eskBwoyh0QPAI59Yp5kHIAkC+Ao3Kc5wgFFBoZbGDBptjKIwuij/RDIo9RsWllqLlTdcAUVuiSDD2Q5A==","signatures":[{"sig":"MEUCIQD3ZEhH2XP9sI1Y5C2eLwuk+qxhr3bUDy0krc9fkT1pMQIgQ9lUH7q12uL+zinQCt4akWRuMRMBmS5eyCFoDpog7/k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c6ea4c051ce1fe713d52186f5087189fa2bb8c0b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.14.tgz_1508870879903_0.7660195629578084","host":"s3://npm-registry-packages"}},"1.4.0-rc.15":{"name":"primer-forms","version":"1.4.0-rc.15","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4feaa17f391e3970a24625d8b959d89dd48f233c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.15.tgz","integrity":"sha512-F1ZCwkSQrUhCZs6sXQ2Ot1C9M6eXvZm2D5oqTaXqzBtkZnFDsaHKDk71NuUqilcB4IYIVqjVShmB05MO7FQzVQ==","signatures":[{"sig":"MEYCIQDkrb+dO1bdJXbsH6dmOgMkIKvTcMgvl+Q3KeNiRxidbwIhAOpgeOLo/1gEu7cN03RDkJFWLfThI8cGbwtwZ6hWyU9A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"4feaa17f391e3970a24625d8b959d89dd48f233c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.11"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.15.tgz_1508873460054_0.0484850958455354","host":"s3://npm-registry-packages"}},"1.4.0-rc.16":{"name":"primer-forms","version":"1.4.0-rc.16","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.16","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d50cb0fd638d7bea663947f7f0ba4c0ffe10fb0b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.16.tgz","integrity":"sha512-2WdVIYRFbE3QKGHO0tBpsce6wYs25+Ky8s8CU/i3sD3qfKY7EK7svR6sLsyJf6MqHumsh8iywKJ7dq8et5GShQ==","signatures":[{"sig":"MEQCIFzRFN7uKgDofepmy0vSaolxL61m7p1n1P8+iocNvknZAiBkwTuz4emgNHQ9sazAZgGnMWuo8hNrKdpJioKEGH/0Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d50cb0fd638d7bea663947f7f0ba4c0ffe10fb0b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.12"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.16.tgz_1508878700000_0.3955082595348358","host":"s3://npm-registry-packages"}},"1.4.0-rc.17":{"name":"primer-forms","version":"1.4.0-rc.17","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9593a4ff4c4c1a3c1acd4a8970f85ee4655f4245","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.17.tgz","integrity":"sha512-Covl0MHhBXiw81giPCHHUdoPxmFH1SqDMeSysafEd7YgGE7m0COVfmIUEMkb+g3CJBrX1VdfP1mK7T7fq1lphQ==","signatures":[{"sig":"MEQCIGDF9xQ3COkqzpz2Gw2/qUC7JlqdOeaiGs2dtAPGLsrjAiBvZ58jvt4pPBtlo/iv4tMAwBjshL/PJvvpj3vDmT8BnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9593a4ff4c4c1a3c1acd4a8970f85ee4655f4245","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.13"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.17.tgz_1508878966856_0.486479478655383","host":"s3://npm-registry-packages"}},"1.4.0-rc.18":{"name":"primer-forms","version":"1.4.0-rc.18","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.0-rc.18","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"700dc15089580a0154176375855024cdca57deda","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.0-rc.18.tgz","integrity":"sha512-eWs3YbvZkWCX3h3J+rAvsXNPXlZNEdLhZ7UUgCDRgzoYS0p4Mq8zj+oZy0yKjFzfe+cs6GjQ4Pv3TBVQi4hPZA==","signatures":[{"sig":"MEUCIGd8ir9QPbeAlCukWg8lVktBwgcY1RaQEYc8B4G/zhhPAiEAhGfEMkY96LpKBzbI/k606OvED7PuEfHKjWstTXZUTHk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"700dc15089580a0154176375855024cdca57deda","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.0-rc.14"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.0-rc.18.tgz_1508879108108_0.8981393678113818","host":"s3://npm-registry-packages"}},"1.4.1":{"name":"primer-forms","version":"1.4.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8456ae780843f508e7d15f21edf54615a3b41bae","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1.tgz","integrity":"sha512-wr7Ieoyy9iHPtR1zEaWEwPRA3PHo1eaOj3Q4VhYOBRv3rk+H3/Z49hey7PLyocPnvbF1GdG2s5/VkZUdgBEuqg==","signatures":[{"sig":"MEQCIBz2IvswUhVS2lERZud1TM7a6pXMgo5NFodQ/JIrhFQ/AiAXWDvnizz65JxF/dOS12JWyg10QWmXiGnLjIRyERzYzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.4.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.2.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1.tgz_1508885314454_0.7825204993132502","host":"s3://npm-registry-packages"}},"1.5.0-alpha.e386e3b9":{"name":"primer-forms","version":"1.5.0-alpha.e386e3b9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.e386e3b9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a520d014036a750be10abadef19473aa821557b8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.e386e3b9.tgz","integrity":"sha512-d9nFPgXzUut6rYco1/7ugqNdxgiNV/013nrYC5X+lT5gttByTGm9fj2fiQRNW4/+YdwIGbDg26co7Flf9W69cA==","signatures":[{"sig":"MEYCIQDHob3biXb6MS7ihOOlhAxiAGrcB9CF8OdusFh2O+RT0wIhAL2JsvjCBZkBamkmBkikT8Vq1UKysnUNVOsirfeDrWga","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a520d014036a750be10abadef19473aa821557b8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e386e3b9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.e386e3b9.tgz_1509119062902_0.03050871449522674","host":"s3://npm-registry-packages"}},"1.4.1-rc.0":{"name":"primer-forms","version":"1.4.1-rc.0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ea2747d5598413f824c17b4423f73f97dfabca99","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.0.tgz","integrity":"sha512-luZImKDHqaTmV9koy2/ClcAfn4ylb+tR/XKntMqnB90fd5Gvt67XNYjblPLnnHoaXTY1TXSITVsaU4VKdAcUYQ==","signatures":[{"sig":"MEQCICvNQCuWMbS8TlpB5WSSzQUrwTwmYeQ/A9ra+cAMGcYJAiBLwYYl6IhXdzQaA+atoCfuiffO4CtGfkFNX7Prfm3jwA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ea2747d5598413f824c17b4423f73f97dfabca99","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.0.tgz_1509121864714_0.9020249601453543","host":"s3://npm-registry-packages"}},"1.4.1-rc.1":{"name":"primer-forms","version":"1.4.1-rc.1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0a9f5febc23e7ca86ed3be5f892071e3a5cec5f9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.1.tgz","integrity":"sha512-Bs550oln5SQ26gGxTjltBoMO9cR1n7PQ9UEQwJgh6aiGkizY34QjsGswEickumRImMChcaUvXJDG11Paw5rXqw==","signatures":[{"sig":"MEUCIQCj84N6c4n7EuXPlfFE34XENkL+s2BJGPNHNkg/OPfVAwIgNy/8ytWkXo6cdqJQbarpnIJPYlJwtvt0tRUyCEbn4iE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0a9f5febc23e7ca86ed3be5f892071e3a5cec5f9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.1.tgz_1509125031524_0.2744254721328616","host":"s3://npm-registry-packages"}},"1.4.1-rc.2":{"name":"primer-forms","version":"1.4.1-rc.2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9e3e48cfbb0be541797abcfb384bd1718a4dc41a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.2.tgz","integrity":"sha512-sWWExAaorKo8pCpLvRE3qBDLWPn+u/EtsVKd6HRnikRzBoiTGBStiP24rimkUGuNWYBJQQpvvlPrZ4GmTXbFLQ==","signatures":[{"sig":"MEUCIBATkVsBURC1M+q5d+rQxR15EBbA3QJrHdPMgDZKqpFnAiEA71JnbvRoKG5uHiYtqRRtwSxGyXpJWVfEBU19IO+XuMQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9e3e48cfbb0be541797abcfb384bd1718a4dc41a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.2.tgz_1509130474719_0.17998714931309223","host":"s3://npm-registry-packages"}},"1.4.1-rc.3":{"name":"primer-forms","version":"1.4.1-rc.3","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"3b0c9bb38e72bb055775bec36a926049343b046b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.3.tgz","integrity":"sha512-dz0/JaKOZt4GB4MPSkFf0pd6EnaxeqNUG6IDfB2StHXWHHusouHXxrCVygSN6OiMUWxrE7jUkb3ju+HWCZGYxA==","signatures":[{"sig":"MEQCIF8dapGkBdyB6bbFC9kkGLmP3fEtdn0UL6iL17i7erD/AiBWtWIY5NmMRxnliICulZR9ASNNpFmbjN/jx8L5BQDwcw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"3b0c9bb38e72bb055775bec36a926049343b046b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.3.tgz_1509132894806_0.2814319257158786","host":"s3://npm-registry-packages"}},"1.5.0-alpha.2b4f51db":{"name":"primer-forms","version":"1.5.0-alpha.2b4f51db","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.2b4f51db","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8dfd6c4cf4056859f34904d1554706e7e15cc2e5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.2b4f51db.tgz","integrity":"sha512-yEMWny990plm/O7pC5pqlccR+HQVCh3aP+ZTSTVqOQjW75tS0Jip1HE6NvMIhX1KV46dkuvvY5XfUA/PXQJgiQ==","signatures":[{"sig":"MEYCIQDPXbdpCEIHtm/L9QYVfZ/+4/aVQA0C+yJYVcPVprj9JgIhAMeJQHUK88o+aZCqc0gUgPSzPUtmQR8t0Zry8/NrEreZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8dfd6c4cf4056859f34904d1554706e7e15cc2e5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.2b4f51db"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.2b4f51db.tgz_1509132975692_0.2728198328986764","host":"s3://npm-registry-packages"}},"1.5.0-alpha.eee49256":{"name":"primer-forms","version":"1.5.0-alpha.eee49256","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.eee49256","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1dfb47a5b37dcd1e1dbe00f667c6fda42b29d4f4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.eee49256.tgz","integrity":"sha512-w5/3/fKkl58tEQ0789fG0ZLuvXAdo9zS/jXXb5uYYYPdFL9n3RmTaX6umJGoLGgjS0OFddnGV6SEHCMj6K+9YA==","signatures":[{"sig":"MEQCIC3DHIH7yMxNdWx4Ak37LrRuKDz00E8UxZycgf1OZdPnAiB501u7eIF85yuiWbXyWzqQNDdqHWksL6IaE4l7rpegFQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1dfb47a5b37dcd1e1dbe00f667c6fda42b29d4f4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.eee49256"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.eee49256.tgz_1509133904764_0.458451361162588","host":"s3://npm-registry-packages"}},"1.5.0-alpha.e777f888":{"name":"primer-forms","version":"1.5.0-alpha.e777f888","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.e777f888","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"28f7477577c727f7c68995036016d6134b16c08b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.e777f888.tgz","integrity":"sha512-Zx7z2G9IkiGpw9SwNl3QebCCG6jN3bsPG1NwIJBTsJdrg6OUQv5amAbXEQqAOtokrS9JMVtqBC9IG3tZlRtF2w==","signatures":[{"sig":"MEUCIQCxOkvbq9fGRNqyR2O4xf8xYhQ04IiKI0xmHDsuYtl7HgIgTym5lIPocErrXGdXM9TETmo+el0QBgLuEtCXi1iRLWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"28f7477577c727f7c68995036016d6134b16c08b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e777f888"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.e777f888.tgz_1509134313883_0.8263825746253133","host":"s3://npm-registry-packages"}},"1.5.0-alpha.791988c8":{"name":"primer-forms","version":"1.5.0-alpha.791988c8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.791988c8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"475dc81c9aa1476ab8eb34dd564e7d833b648cb4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.791988c8.tgz","integrity":"sha512-JWtyeepwLPRWah/VnjjdGIoQpaBTHsE0wYlqyAGonLNHA6Ji6LsaTrSoS2lEVwUktzVV7IoXm375eDlSZO/kjA==","signatures":[{"sig":"MEUCIQCuBxrhNH8VdyD1owUAidyLgkzpFJrB7fwWm1PUmzmXmQIgMyVJcoBMAygMQP0E6c0HT/68atcTDqS5WkUust4kO8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"475dc81c9aa1476ab8eb34dd564e7d833b648cb4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.791988c8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.791988c8.tgz_1509137917547_0.4486304831225425","host":"s3://npm-registry-packages"}},"1.5.0-alpha.6b3e1006":{"name":"primer-forms","version":"1.5.0-alpha.6b3e1006","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.6b3e1006","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"49bb20e07bdf8b07c78522498b3f25be3851a772","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.6b3e1006.tgz","integrity":"sha512-a/l05QBB3m+zxkVFsmOwaoutsFwAK49Xdg9SHPW2LQ6ms36oBijMHnGg1BMjsdk0yrRYckE/hoZW3zDr4IXXBQ==","signatures":[{"sig":"MEYCIQCvbsHjvaasxzZjf364d+atnpazNpeYB9pyDn6IALMRsgIhAIl74F+rlSISEgkVlepFvi/XttFzhU77QVo+SXHerR3G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"49bb20e07bdf8b07c78522498b3f25be3851a772","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6b3e1006"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.6b3e1006.tgz_1509141209501_0.19973486941307783","host":"s3://npm-registry-packages"}},"1.5.0-alpha.c239278e":{"name":"primer-forms","version":"1.5.0-alpha.c239278e","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.c239278e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e45cbd351adcc728ac2dcbb4a191ab9f516696ee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.c239278e.tgz","integrity":"sha512-Dokpy8ry2nOBJuKa5sZeNrFqJO6nG6aone3XYJNua+qzQUnSyLTrMHtKfMvRWA4aGzE7RLKyz42DZfBqRKPwmg==","signatures":[{"sig":"MEUCIEaFXYM9l+y2Rb6iVynKLSk2Fw71M1iliu2ZE8sdKTbCAiEAgD+7IE857Gq7r5d+z6dCe0EbSmBbZDslpKux6TeUhkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e45cbd351adcc728ac2dcbb4a191ab9f516696ee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c239278e"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.c239278e.tgz_1509489531566_0.2716655321419239","host":"s3://npm-registry-packages"}},"1.5.0-alpha.595805c5":{"name":"primer-forms","version":"1.5.0-alpha.595805c5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.595805c5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1cc29b2d8365beda820be49e31a9c90ca7f0ade7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.595805c5.tgz","integrity":"sha512-nHTlz0tgADx5f0b/xUG8D6q/mDWqgNYQN85hx2eGCexs7nrfdcOufGcFwNKMRV/6L1lFrdcMdi4SBO9kkXoa4A==","signatures":[{"sig":"MEYCIQC3CiZrstyCjbTPO1N3dYhcTyShLfqm6EFC7OUZ0YE1tQIhAI69kfecRSo88sWyLLiai8uUKJcqbB4+xNGE46IS3gOt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1cc29b2d8365beda820be49e31a9c90ca7f0ade7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.595805c5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.595805c5.tgz_1509489886147_0.5843276646919549","host":"s3://npm-registry-packages"}},"1.5.0-alpha.38e3619d":{"name":"primer-forms","version":"1.5.0-alpha.38e3619d","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.38e3619d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"23df8c8638fdfa7294433a8c854a66529847793e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.38e3619d.tgz","integrity":"sha512-3KR8sLBaMbGK3CM5cwLmLvDR/0APMofsgoe7zcl4mrIfraqZ+GfokmIcx6JvqOZxAIb7chC1dEfKtKgtff7/eQ==","signatures":[{"sig":"MEQCIFDpSSMqdypNv6WVAdio7fbzbvuyI0qb0pDjEFgW4AzFAiAQTvVnRxUs2O6rvpLqry8GowyjarKzliMJLmDBUSls3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"23df8c8638fdfa7294433a8c854a66529847793e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.38e3619d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.38e3619d.tgz_1509511195205_0.7713481690734625","host":"s3://npm-registry-packages"}},"1.5.0-alpha.343456b9":{"name":"primer-forms","version":"1.5.0-alpha.343456b9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.343456b9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"924175f4f94aeb86a22da8d6c5e7211223550150","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.343456b9.tgz","integrity":"sha512-4Alpo4cKr9byKjklTVVNCu/B+fNXrEzdMgRvrytcnlhEADvb67uHZTem875R9ckpCfwQop07QyK5tYfxdkKN4Q==","signatures":[{"sig":"MEUCIDRlvkXetU0GS/lgC/fSAR5i7xBd+7y+2YsruB+yBvkMAiEAw4BFtE42ycJjtWRLIXdyiHmJlpmrJmCYNR2WK09Wk9U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"924175f4f94aeb86a22da8d6c5e7211223550150","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.343456b9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.343456b9.tgz_1509543992616_0.5605425892863423","host":"s3://npm-registry-packages"}},"1.5.0-alpha.b1aa5fe9":{"name":"primer-forms","version":"1.5.0-alpha.b1aa5fe9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.b1aa5fe9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a76ecd45fdfc4fa6466c3f9291b394d8d40370ec","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.b1aa5fe9.tgz","integrity":"sha512-RP4XCLDvaYGT4rR3cwmaiKvMOkX1OzxhCYMAn6aJrg5V3mSgGSOaaH7MDnn8rXZiiU6XXFGW3+Ys63ZykgDLBg==","signatures":[{"sig":"MEUCIQComWLf4/LjeabUQSoh6oVBzYega+EpFghPtjtpSEfdwAIgH6aDM9UVGYoTNI5G5DSD/4qeXzI5UT92wM2B7iEnyaA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a76ecd45fdfc4fa6466c3f9291b394d8d40370ec","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.b1aa5fe9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.b1aa5fe9.tgz_1509549465718_0.5232000013347715","host":"s3://npm-registry-packages"}},"1.5.0-alpha.cf694cbe":{"name":"primer-forms","version":"1.5.0-alpha.cf694cbe","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.cf694cbe","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a450f8c7c63979e563301cb862621d184ea82a0c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.cf694cbe.tgz","integrity":"sha512-9UCVkzpAyLbbn9mWw8b/I7KTMDPNHjtGe/gv9202kZzaKnPeN5qrMhdRsAaTrd8xTCzmJUxt2l/mnzZIKzageg==","signatures":[{"sig":"MEUCIGl4A96hnzv+U37fimmQ0VoODEs3zssEScHwrCDz3hmFAiEAgYPMIKA7G8T/lDLyv6GU2L6vootwGV3gvVMqjY+PFKQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a450f8c7c63979e563301cb862621d184ea82a0c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.cf694cbe"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.cf694cbe.tgz_1509574614140_0.3245630820747465","host":"s3://npm-registry-packages"}},"1.5.0-alpha.c5d5f836":{"name":"primer-forms","version":"1.5.0-alpha.c5d5f836","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.c5d5f836","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e98dfe5085642da88c056f236b827e2e1c214d7a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.c5d5f836.tgz","integrity":"sha512-ejjJp7KNIUX8BpaKjKi7pIP+iDIZfYq3aAh80h0Sqg8wckKQ9F/tsNX2UgU+5aFNLxuOapiaLlM8WXSLSOQQGw==","signatures":[{"sig":"MEUCIQC918yq14T8oCMOk4R1T11X31RTnQo72C9112c/dHOQfAIgHZ3JdUKHRmqA38loIYVTMcGmWHauzG2rvL/QrAqlS48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e98dfe5085642da88c056f236b827e2e1c214d7a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c5d5f836"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.c5d5f836.tgz_1509576887729_0.06547879287973046","host":"s3://npm-registry-packages"}},"1.5.0-alpha.1eed2c74":{"name":"primer-forms","version":"1.5.0-alpha.1eed2c74","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.1eed2c74","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"8e3fc8f1a807a7eabc73fb5716fb3bd49fc3a365","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.1eed2c74.tgz","integrity":"sha512-dPSmXFERbFZCXHLlpMyX8s+0iw2iuw/9sQFbSnEJLmuvD1oEDwAYHvQiNhcQ0ieGmcWaXiIWyNmj9mku/TktpQ==","signatures":[{"sig":"MEUCICGlikKLoCvYmrAIwkhNZaP25FMhUc260kbBxmlU6PFiAiEA2QcayUoRLPSxCV3TKm0x5efatC4fhJPtL3xs28OFxXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8e3fc8f1a807a7eabc73fb5716fb3bd49fc3a365","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.1eed2c74"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.1eed2c74.tgz_1509589347138_0.4887017614673823","host":"s3://npm-registry-packages"}},"1.5.0-alpha.dea380f4":{"name":"primer-forms","version":"1.5.0-alpha.dea380f4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.dea380f4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"58a232cc86ec95d807e7a35ba40a893e89053f9e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.dea380f4.tgz","integrity":"sha512-RCVI7YZ6BoBMt7W3L5Pd/uSnNKVp0TL73ozkiSjVDmNvfZl3HYuKGHOY772ZJMEh5nrqhXjpadZFw27mLdw1XQ==","signatures":[{"sig":"MEUCIFDEFt4fCbXGKyPE97N3j3XeXhm5kAozdUGgl6OQgbGxAiEAzyZLAdahabPnA5SvAXeX0Ee7HwrrO8tYYMP2+EMHX8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"58a232cc86ec95d807e7a35ba40a893e89053f9e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.dea380f4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.dea380f4.tgz_1509598899977_0.6584166155662388","host":"s3://npm-registry-packages"}},"1.5.0-alpha.a676c6d2":{"name":"primer-forms","version":"1.5.0-alpha.a676c6d2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.a676c6d2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1cc1420e44108dddd4a8915f7858cef2fca697e3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.a676c6d2.tgz","integrity":"sha512-H3wnYHi/80uYXH+9KAmj6I/97AbzR1SBXMCiFu5fcJSi0n9YF9uC57OMt5DZI9NHtfLvmYrCCpjkQfnY7Wd0fQ==","signatures":[{"sig":"MEUCIHadmvDTmQqkdQSJh4AEbHahlpogZK7dyVdwPcTnvX39AiEA7Bo6sScV4c5BzhXN1wWq9euBWYWi4e8TCxvE/ewg754=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1cc1420e44108dddd4a8915f7858cef2fca697e3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.a676c6d2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.a676c6d2.tgz_1509624988706_0.17323943017981946","host":"s3://npm-registry-packages"}},"1.5.0-alpha.f6dde1e1":{"name":"primer-forms","version":"1.5.0-alpha.f6dde1e1","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.f6dde1e1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9f13f9d0812bddc7f85e86cf2513f2025ad2e8e0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.f6dde1e1.tgz","integrity":"sha512-8yjQjHQ4Vf/u6q9VMK+JKCea+f/+lKWPNH30j2mmuSV4c93sVGLtDL6TNOJM7O49iDoOITdHNxk3iXFoNxG9Ow==","signatures":[{"sig":"MEUCIQCmDBiZYNaWKlyPPVW1HdrkFUuMEIPQguo1SrGg3YUw/AIgFbF49pzEUMuj/12t1QmuKkEtGeNYMm2EIHlxxa/i3vo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.4.2","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.2.1","dependencies":{"primer-support":"4.5.0-alpha.f6dde1e1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.f6dde1e1.tgz_1509638279694_0.927189331036061","host":"s3://npm-registry-packages"}},"1.5.0-alpha.4e208a0b":{"name":"primer-forms","version":"1.5.0-alpha.4e208a0b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.4e208a0b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b972e33f441642a8d523bbe80f6370c52b924925","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.4e208a0b.tgz","integrity":"sha512-CUS7Ty97BLfT8N/25qVRs4nfgsUu8ias3HbO4P0V6HOLg8RZHZ4bq9a5gEumIcqViRZUSdO2ajaAg9TBJpLj5A==","signatures":[{"sig":"MEUCIQDqNuGaLEFVdvkF9nD8NmEKj+E7mwh/5261Bbfyk6eeXgIgNbVO+s5YJQ2v0rxToPzlHzWpN69wAlflXRKZb/lJ4yc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b972e33f441642a8d523bbe80f6370c52b924925","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.4e208a0b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.4e208a0b.tgz_1509639944687_0.822612912626937","host":"s3://npm-registry-packages"}},"1.5.0-alpha.3c5fa18a":{"name":"primer-forms","version":"1.5.0-alpha.3c5fa18a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.3c5fa18a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e4f41ae8bc0b308360ea7c6bf61ed53150d3b5ee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.3c5fa18a.tgz","integrity":"sha512-eQe+JHz/jVXrf9L+k7XzTxk0i7So5UuFpU9eFTHr7V9H7TxGvSt62usoR7WKGMnkb2pPwzn0xu3iHpLfKe+EYA==","signatures":[{"sig":"MEQCICvLlA7v7uOPAa3FNJYjFABCp8ZRhBqWnk90+6CUFnb9AiApFwMvcnHJj8w/y33IIN9KdPA9kBlqYMABn6zkH8TlJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e4f41ae8bc0b308360ea7c6bf61ed53150d3b5ee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.3c5fa18a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.3c5fa18a.tgz_1509640113323_0.2980770287103951","host":"s3://npm-registry-packages"}},"1.5.0-alpha.8277736b":{"name":"primer-forms","version":"1.5.0-alpha.8277736b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.8277736b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"4172dcbcad878bdfc88c5b09e738f55ef26f33e6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.8277736b.tgz","integrity":"sha512-GLAHMJnFwVtd+ZqHfOkj85HpwFSN20Cdnqe+hpKuyO6uAzBmm2g4q1PKN5BFr2fxXdM49TjLsZh7zRr2tq3w2Q==","signatures":[{"sig":"MEYCIQCJ8CCYNC88tCxB+B3tn7gFdvOvXC1G2wVNCZZ5Nj8qjwIhAL261K+1sw6rehKsd1nojNxzryQwYO7gcFbXeNhqrOsv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"4172dcbcad878bdfc88c5b09e738f55ef26f33e6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.8277736b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.8277736b.tgz_1509645501325_0.5239982912316918","host":"s3://npm-registry-packages"}},"1.5.0-alpha.d313ee6b":{"name":"primer-forms","version":"1.5.0-alpha.d313ee6b","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.d313ee6b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ae02443f51eb2f419dfa4b93134cea7e6d60a115","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.d313ee6b.tgz","integrity":"sha512-hfrF+7gpA3CYhczOZ+tfC2thuV0OKEeC0itg+YBjv2xoDfETdGgQJ1lmWsc5qrGlK4JoaaT1nVXnAC++6h/Z1g==","signatures":[{"sig":"MEUCIQDoF8Bon6oYv1kYyL7dB+ZaurF6eeozj2guwTCsOAgZcQIgEkrmGRFhwuh079t7sDrZ8iUEK5mZC8PTMyO5Fsp0jSU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ae02443f51eb2f419dfa4b93134cea7e6d60a115","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.d313ee6b"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.d313ee6b.tgz_1509652070302_0.16889826278202236","host":"s3://npm-registry-packages"}},"1.4.1-rc.4":{"name":"primer-forms","version":"1.4.1-rc.4","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d8263b1cc49a7dae95bb7c3e13c53ae420456f45","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.4.tgz","integrity":"sha512-YdoPg5Qe6Mxlwp3nTQIyGIxcpLSATHcjdVFbqfeTGc+pcNBpRUFveSfmm0X7qfzrN6tMIIz48NjJo/Bkjs4UXA==","signatures":[{"sig":"MEUCIQCFAi3P/5iWOnAbr+4mIhmAPQmJYpqwY9sp/d16mnGFEQIgWjzPXBsxxx8yv4/7py6rsoWe8/qAZn7eO+/fSI5Y4vw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d8263b1cc49a7dae95bb7c3e13c53ae420456f45","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.4.tgz_1509655800779_0.18771524960175157","host":"s3://npm-registry-packages"}},"1.5.0-alpha.4450f943":{"name":"primer-forms","version":"1.5.0-alpha.4450f943","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.4450f943","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"7c880cc7e08f91dc8128291fd6ac20a0194ba24c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.4450f943.tgz","integrity":"sha512-KJtrgUk+o0zOPwE+vlKnysj+cwB9orAVwAmPjNI9l7608F6a2cJQudp+jwJrDSbGDLqPIMn2oe/J19yvC5qvng==","signatures":[{"sig":"MEUCIQC0TI1EIz6VwNWBqp4yUOjPB2MIqnj30GSxpnk1NjgsJQIgSAVizb0ylGy9PSewrHtaH8A9H41BJa1X8Fl6FkHYfA8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"7c880cc7e08f91dc8128291fd6ac20a0194ba24c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.4450f943"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.4450f943.tgz_1509658899304_0.5585738813970238","host":"s3://npm-registry-packages"}},"1.5.0-alpha.503bc620":{"name":"primer-forms","version":"1.5.0-alpha.503bc620","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.503bc620","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b0a067b164039a26ae0cd134386cb57021e00043","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.503bc620.tgz","integrity":"sha512-jh7xSSeUP7C1ImlxgNw+AMDD3zpnn3hHR0OGTfFv6bqenNm0oS/teLFFtvAKlC0dfK0KNVRF8JNjLlG0iKqSaw==","signatures":[{"sig":"MEUCIHNWIvrXyGYgkx+dsi0ugsC85uU5WQaEFV8s+eHYUoKhAiEApqxBgRDQ56TeYklj7Dso/PcNmfpnrjXvEMrjIYx+RUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b0a067b164039a26ae0cd134386cb57021e00043","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.503bc620"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.503bc620.tgz_1509659331995_0.9372022920288146","host":"s3://npm-registry-packages"}},"1.5.0-alpha.3992e3a5":{"name":"primer-forms","version":"1.5.0-alpha.3992e3a5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.3992e3a5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9bd498f9dad10f312825c44810816cf88396994d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.3992e3a5.tgz","integrity":"sha512-YIGIM0pCx+aSBa4eqNSJM47vT3W56PDhmprkWNqZrSOl2GqnWAnvRdplQj343+EhNkO1PS/n3mp0gyIHlZ7Gag==","signatures":[{"sig":"MEUCIBtlVq9Rj1TVBAUViXbjnTd5LeO24ycwBdZ9fPcTyI4wAiEA0V5ptDN5CAava/CYJthJMXa2wMuY7FBso3At8ahDB6U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9bd498f9dad10f312825c44810816cf88396994d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.3992e3a5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.3992e3a5.tgz_1509659659086_0.5935452813282609","host":"s3://npm-registry-packages"}},"1.5.0-alpha.0287894d":{"name":"primer-forms","version":"1.5.0-alpha.0287894d","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.0287894d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"f529f8d5cef6cb896b57a4d76bfbdab2929147d5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.0287894d.tgz","integrity":"sha512-V3W3gjYDy6pXdRwMM80AwhF1V0rzXOAGmsFbJ1X/MA36HgafWSxvrdfpXFibDWRgxwagKyUEGeVFvOpMYGZfzg==","signatures":[{"sig":"MEQCICTlvp7My2vz7YKYuPnLcDUHRLhl7dxvr1v4H5/hRgMxAiATtbYV8bn+ksV4zcVwmBMUmaGhD3ppwJHzxH+0VebtQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f529f8d5cef6cb896b57a4d76bfbdab2929147d5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0287894d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.0287894d.tgz_1509660515047_0.34256093157455325","host":"s3://npm-registry-packages"}},"1.5.0-alpha.d63f1cb0":{"name":"primer-forms","version":"1.5.0-alpha.d63f1cb0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.d63f1cb0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"73e5ca8b8eb010e0779ac2ad16e73e6469832592","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.d63f1cb0.tgz","integrity":"sha512-Sdll37nABYFa6G+lTfKHQkpeju/Plfxg9fZbFJvhCmoApgT3slegSCzB8Wh2j6GH0QttIL09z6+5r0Njk2G4EA==","signatures":[{"sig":"MEYCIQDWgW5yDEGZmc+O8qObjZN4eqlthhCozjCrxZZ+u45SbwIhAIO+NgJl4Xw290gNzSwmQ1vLaYw+CqaoGSWTPOngWb69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"73e5ca8b8eb010e0779ac2ad16e73e6469832592","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.d63f1cb0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.d63f1cb0.tgz_1509663219257_0.4921150708105415","host":"s3://npm-registry-packages"}},"1.5.0-alpha.803eb3c0":{"name":"primer-forms","version":"1.5.0-alpha.803eb3c0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.803eb3c0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"11ea3f2534dea6c8895b257203e495a46f1f8a58","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.803eb3c0.tgz","integrity":"sha512-Q8QXgezUjGsdo/J3nLXUG7i9mXtKTwUe3C7v78beiT+HMktxXRpUEhYEwexmZd9Kxs6tGoIqgsuCtz6VghGnPQ==","signatures":[{"sig":"MEQCIGCm+Z/4MNvbp9pUHI62JuM4CVxe4qQ7OIk/eYVlEBhKAiAY0fCzb3UY/rVRBFpQJGXza/7EP8APYn9YLqG4Yz2MOg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"11ea3f2534dea6c8895b257203e495a46f1f8a58","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.803eb3c0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.803eb3c0.tgz_1509663758045_0.7463481288868934","host":"s3://npm-registry-packages"}},"1.5.0-alpha.eda81df5":{"name":"primer-forms","version":"1.5.0-alpha.eda81df5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.eda81df5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2bc3c03be86f8c2382c13012fbadacf8d88d3d44","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.eda81df5.tgz","integrity":"sha512-LdXhz2sZlyY6O+e9v5Embc9NOWh7sjPZlMW6BK4em5dvKXZFDu9iFsCyt0SXNcheUW1hz+z3JiYdPYtjreGkhA==","signatures":[{"sig":"MEUCIQCpui915GoHEtfX/95wyaO3cB5kHxql8R+VnuT4pgzHSQIgOmWS1DWGL3TYtWq09CC3EDQDIrVUl+TgqNyaWz6C9EY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2bc3c03be86f8c2382c13012fbadacf8d88d3d44","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.eda81df5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.eda81df5.tgz_1509665080553_0.28193794121034443","host":"s3://npm-registry-packages"}},"1.5.0-alpha.29cee408":{"name":"primer-forms","version":"1.5.0-alpha.29cee408","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.29cee408","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0432bd1c8ed79c02b12eccbfdf84285ea2d425c1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.29cee408.tgz","integrity":"sha512-M+M+LtoQEbBfUD9i83lKvhYFm5FQAIF68MjCBGOLB6gziyCnNYGN2shVflloWwYHt8PD9cWIPTwE+byt1Vx35w==","signatures":[{"sig":"MEYCIQDJFkUb857nQh/M3bjxwUfhrGTgcLlAZsLD7mAHhPUqXwIhANNEid3MchjN8ZYKVn6Sgi+IG8JgDebT9+E+Wq4AJv6U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0432bd1c8ed79c02b12eccbfdf84285ea2d425c1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.29cee408"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.29cee408.tgz_1509668638685_0.9503960770089179","host":"s3://npm-registry-packages"}},"1.5.0-alpha.c046393a":{"name":"primer-forms","version":"1.5.0-alpha.c046393a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.c046393a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"716082abb51d68cb66f4558173baf97e15f6e1d1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.c046393a.tgz","integrity":"sha512-VH0dzqQBwx2qi62Da/13F//b28b0OmsEdA7h/uxrXcKBbEd3cWmTVI2sgO7SwaxFwnYz5DiBm3ljurwJgtmpmw==","signatures":[{"sig":"MEUCIQD0Z9YOHxPZeNPo6HxdtQDVD3QbAvAO1mlLoAKQcWowDgIgVGOnWCoXn0O/LOlDsQ1S10iFkSiWP6bO+RPc1bt5How=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"716082abb51d68cb66f4558173baf97e15f6e1d1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c046393a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.c046393a.tgz_1509690567991_0.33890595007687807","host":"s3://npm-registry-packages"}},"1.5.0-alpha.923280ef":{"name":"primer-forms","version":"1.5.0-alpha.923280ef","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.923280ef","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"df723fd566849d03808ae35b53f8ca5b17404afc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.923280ef.tgz","integrity":"sha512-vQnLiHoENLbSQEyG6Epb/iq8BOzPtdaqgFXab0KHc/EPhHXTcwpD9qstg5UfD6D5pc92+r3dor7aTwpYcWUurQ==","signatures":[{"sig":"MEYCIQCq+yPz9ueDcqQod0aR5oo50ie9rzLQME66a36qD4+CjwIhALmiqz0WNqeszp4x3n4vIx6Ne8/1OSd3tcAc5rb1dlw/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"df723fd566849d03808ae35b53f8ca5b17404afc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.923280ef"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.923280ef.tgz_1509721738480_0.47371192602440715","host":"s3://npm-registry-packages"}},"1.5.0-alpha.5823e83d":{"name":"primer-forms","version":"1.5.0-alpha.5823e83d","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.5823e83d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"9532942c093b80dd39f29a1833e78b62ccd17a9b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.5823e83d.tgz","integrity":"sha512-42PRS9J75pbZA8BD+TuqwC+NyyhXk9RhaZnNflUlWc333lL8B510DMH6dt/gWC2cwqMqfI1rOltHeZ2xo/6aOg==","signatures":[{"sig":"MEYCIQC1JVsbN5tuUSUFOd7OcmV1WNIbHjuey5FLpPs2vpVQ+AIhAMqZ8wwiQ7ogHqxGUvRu49Jt4JfNJyKia5nwA45tQizO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9532942c093b80dd39f29a1833e78b62ccd17a9b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.5823e83d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.5823e83d.tgz_1509727194985_0.8365923662204295","host":"s3://npm-registry-packages"}},"1.5.0-alpha.fd89e173":{"name":"primer-forms","version":"1.5.0-alpha.fd89e173","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.fd89e173","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1ddfcf622e485fb4c325e916b03453fcf7581f12","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.fd89e173.tgz","integrity":"sha512-vbZrbNgCrjj2pEDZv8V/RTuJ3TFRwG0NOXIoyn/ZJd2Kh27aXIAtLvs798kQOF1poXRPGtqnpLOUoWib6ORRlg==","signatures":[{"sig":"MEUCICme15N5kEp6vJPm5fkLZxBBgReD7Ry52hM8UhuzjEpKAiEAkF7KlaIiKw4Dx9jfRwjfu1A5kxysdswT7agfJ+T6X+U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1ddfcf622e485fb4c325e916b03453fcf7581f12","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.fd89e173"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.fd89e173.tgz_1509730953830_0.6259096984285861","host":"s3://npm-registry-packages"}},"1.5.0-alpha.f73ca933":{"name":"primer-forms","version":"1.5.0-alpha.f73ca933","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.f73ca933","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"55f5226b2566eb83ccd150802fd4f887883ee20a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.f73ca933.tgz","integrity":"sha512-9yNL825D74Pz5r5SPFBSYDJJX8gku2hy615pGLKfAc/TkMv7yJyCSJ0NpJ5NpUs2O4BNFCSnboIbN4yFHEqyUg==","signatures":[{"sig":"MEUCICrF5kVNSytDYo0X7QgN6dbyuWKdAFOeRWOTOz7Gb0gdAiEA6xjMMxX/j9zGRRtVRoqzTHbGcG6LG3Y0A6uz5yIerV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"55f5226b2566eb83ccd150802fd4f887883ee20a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.f73ca933"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.f73ca933.tgz_1509733583814_0.05826347949914634","host":"s3://npm-registry-packages"}},"1.5.0-alpha.00b2b0b0":{"name":"primer-forms","version":"1.5.0-alpha.00b2b0b0","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.00b2b0b0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"68cfe88d7abc8110750771fb48458c86677d4978","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.00b2b0b0.tgz","integrity":"sha512-HMWb64CDZPtBhEtGMOxBPp8gOC/8b3gDJGbZGaSSHh1jUmfLBPMFVfbuhAE+KN42O7j7Jgh5qJWuvpqUv+0jlg==","signatures":[{"sig":"MEUCIGymQiEvI+iDlGdM5IHF4CUDqYCu7gfoFaT6nFM5ZcBAAiEA665Z2GIW3YZC2fMNLNYBLTtgz7WiBJS9NJlcx9vmhEQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"68cfe88d7abc8110750771fb48458c86677d4978","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.00b2b0b0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.00b2b0b0.tgz_1509735748089_0.22308687679469585","host":"s3://npm-registry-packages"}},"1.5.0-alpha.6b0d41de":{"name":"primer-forms","version":"1.5.0-alpha.6b0d41de","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.6b0d41de","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"26720bb256e5d96809eaeb65b2c53248c1f6d8b7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.6b0d41de.tgz","integrity":"sha512-g+VHXoZDo07CuW0epapXPCgrZH7XQTvsIkjet21Qf5hi0L4z5DNMp9/EyAqOGurQAnAq0DOKf6CWrKbweequZg==","signatures":[{"sig":"MEQCIGdcVAyCRoaL6Hf47Sd5qqAzQWkYnqWMHDa2FylRC3LbAiBW4LC7EQh9/MrUC1wZdGAEmCoE6XnInh3PGGGAQcw2NA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"26720bb256e5d96809eaeb65b2c53248c1f6d8b7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6b0d41de"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.6b0d41de.tgz_1509740106247_0.043977002846077085","host":"s3://npm-registry-packages"}},"1.5.0-alpha.c95221e2":{"name":"primer-forms","version":"1.5.0-alpha.c95221e2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.c95221e2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c23e4b51140f5dca9ce97198be06ebbdc1f713c1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.c95221e2.tgz","integrity":"sha512-2wnohSmB7P5lKOwmx8DwoFpHmvz1UaXSs8YdG+NYYJFs6V+BARAEWriJqJVJiszSyoQL8KSfeDDwdU85EnIoag==","signatures":[{"sig":"MEUCIEv+YWkNB93w0MQGodPtJrTdYmGYpZOsnF2Z8XnwsQzPAiEA6IuCL+nwEbyv7+sD9Ue68d6/sBmytTv2Mz085trCRH4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c23e4b51140f5dca9ce97198be06ebbdc1f713c1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c95221e2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.c95221e2.tgz_1509740993666_0.7867127067875117","host":"s3://npm-registry-packages"}},"1.5.0-alpha.cedbb1bd":{"name":"primer-forms","version":"1.5.0-alpha.cedbb1bd","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.cedbb1bd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b325d74c69861fa8cfb2c1cb6f643790ae4ca466","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.cedbb1bd.tgz","integrity":"sha512-uukFgMwke7Q7Yfu2Q6NcYcRmVi9Iuz5yDtAw8YcqZtT2VdZODzWS5hvNzB99CFQcBZBweh6xlEYSzlSVuo1d0A==","signatures":[{"sig":"MEQCID62KotrU700lj6AwJVPaSXYeZSr0iN+MjIk/MnRJUs6AiB+h8x5icFw5QuBVnTvgZrw23bDSzFEsAz/68drL8I68w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b325d74c69861fa8cfb2c1cb6f643790ae4ca466","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.cedbb1bd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.cedbb1bd.tgz_1509742474160_0.34024047455750406","host":"s3://npm-registry-packages"}},"1.5.0-alpha.5610327e":{"name":"primer-forms","version":"1.5.0-alpha.5610327e","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.5610327e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0c1fdf508c350b7caf8962d426bec8e229ada85e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.5610327e.tgz","integrity":"sha512-Haaxlv4lOkWGe4K9lR27viam5PnPGMWRamdWg8x8WArcmq/KkoBPON7/KUDhHoJiI13mgAx0E33KT68v1ZD7pA==","signatures":[{"sig":"MEQCIF4N6LU5nMf7wWaOBtRmNevuGdZZjh/YUtElfY+cnMy0AiBgyUPrva3ut+3+FbY8PFcc3zOIGb065oo/VF6IE34hGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0c1fdf508c350b7caf8962d426bec8e229ada85e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.5610327e"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.5610327e.tgz_1509742785963_0.601245456142351","host":"s3://npm-registry-packages"}},"1.5.0-alpha.8fc77c51":{"name":"primer-forms","version":"1.5.0-alpha.8fc77c51","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.8fc77c51","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d1c295a8d90af6121233b22d711f28655c06a7a6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.8fc77c51.tgz","integrity":"sha512-uhu31Q/TJITgDOVUn41EuhaLEWr6VqBLjfkrnVvrmwzI3Cub7kxDh728M8CIEe86AGSlU6onSm3sfbHI2k4+nA==","signatures":[{"sig":"MEQCIA5Vz3BAUgGPo9N2SxDZRUzBNZGyb3rwV9iN2v4xvkztAiBzEM743R53zNNInuydErlbgEw+fH/zApadDwyzydbxog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d1c295a8d90af6121233b22d711f28655c06a7a6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.8fc77c51"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.8fc77c51.tgz_1509820600889_0.44658042630180717","host":"s3://npm-registry-packages"}},"1.5.0-alpha.4c38da86":{"name":"primer-forms","version":"1.5.0-alpha.4c38da86","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.4c38da86","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d606c3cc1b4a66ddf1d6941ce3da4ece61fd846f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.4c38da86.tgz","integrity":"sha512-gQSfYo/pmfLfz3Ca4M+gz1mU76DBxNy2MszfjCHAV6j0k6oe48lOpkY5X+lACmcZBvtQ4Md9/8pXa5h4C63YAQ==","signatures":[{"sig":"MEUCIQC3wt4ekQKOCASgtP1jP5+AbmtrpbBs1YpSrEzwQtSFWQIgMG51d/QNBMJrr6lqAVdYpYbq/Vmaq9v079CPBaN/QGk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d606c3cc1b4a66ddf1d6941ce3da4ece61fd846f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.4c38da86"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.4c38da86.tgz_1509983820813_0.35530866496264935","host":"s3://npm-registry-packages"}},"1.5.0-alpha.6e2f2e28":{"name":"primer-forms","version":"1.5.0-alpha.6e2f2e28","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.6e2f2e28","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"40e11207e0f71649a1466334127a8ac561f9d8f5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.6e2f2e28.tgz","integrity":"sha512-mA/6wW+sVEiDjICHSDbOu8GTyGieXvNsRODufWxbkB4ULNcnRNjW+i9fuJ5xMRCPxCbl/MVp7rwXWQgotYTrcQ==","signatures":[{"sig":"MEUCIBQjgMWajh0TKQpQzsNZAAUyHLOzUbub1GZioyKHWDzjAiEAvmSUwWXSIghwqiF9C9kGl+QYs8sgza6lj35k/tJhro8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"40e11207e0f71649a1466334127a8ac561f9d8f5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6e2f2e28"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.6e2f2e28.tgz_1509987815525_0.8244230810087174","host":"s3://npm-registry-packages"}},"1.5.0-alpha.4d9eeeac":{"name":"primer-forms","version":"1.5.0-alpha.4d9eeeac","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.4d9eeeac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d01422166abf5e4971a95487d5225271977d719f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.4d9eeeac.tgz","integrity":"sha512-xI342q32/h97XqQN04xaYX6eMq7Ws6yez6tIVRoZQp121WAk1BAMHPnUFgGKD+Egqz2ZSxiTBotFR6uSjbtshg==","signatures":[{"sig":"MEQCIEgWuX0/lRq9VI9qq0zaZtwbqBX7kbIVA9LBcbUjE1UiAiBSyd1N8l/bZIouc2xgdWY0I5VeKmNQsAyojpFhSf47nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d01422166abf5e4971a95487d5225271977d719f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.4d9eeeac"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.4d9eeeac.tgz_1509992845706_0.7821095334365964","host":"s3://npm-registry-packages"}},"1.4.1-rc.5":{"name":"primer-forms","version":"1.4.1-rc.5","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"46b18e16de7765fc86ca65a663cad2a4aa57a93c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.5.tgz","integrity":"sha512-Y26+JVC9N8K/Kh3ylw3filgn2JeQbpj95wnA0UAhtF4vvlS0trdBZMnM+S/04rm7TnJFLz2zXdVVf/qHquonug==","signatures":[{"sig":"MEUCIFTR0momPsx+OdBKeuUVNvXWTxina79DEL36CrWpkeiCAiEA2NWA2ahS4lp7AFbpOlBCS+3OUTWD3zjj2ZpkbhsNV6M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"46b18e16de7765fc86ca65a663cad2a4aa57a93c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.5.tgz_1509994396438_0.7143837520852685","host":"s3://npm-registry-packages"}},"1.5.0-alpha.6fcd7e0a":{"name":"primer-forms","version":"1.5.0-alpha.6fcd7e0a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.6fcd7e0a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c7aee993a36391a5f543f8d2e3128cb76550212a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.6fcd7e0a.tgz","integrity":"sha512-egNHGoLOHXMhVcUgOwcBwkLIeLfzyqf0nXuD8dbletYzy3zWbOoUszkLnSvov2pV6LMu58DlsSzOWOPI42VpPA==","signatures":[{"sig":"MEQCIHY7gCueDrCsRYNJQ67YtpUWDBB8iz87Y8rMvqGWF7LQAiAhUcypNnY8J+6WYohbUf3bM4oruM4yS93nqZjUs6+e0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c7aee993a36391a5f543f8d2e3128cb76550212a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6fcd7e0a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.6fcd7e0a.tgz_1510001749378_0.26848484203219414","host":"s3://npm-registry-packages"}},"1.5.0-alpha.4d6b10db":{"name":"primer-forms","version":"1.5.0-alpha.4d6b10db","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.4d6b10db","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2b8df8e61bde46cd002067de78d9885727f43bc8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.4d6b10db.tgz","integrity":"sha512-niK37gB3hQOBQww9cM3N/3mEKWmUMv4ngNk6PqYdQiNFgEdleUH1kKF5JyX88G07B2rbAWRAwRvBk5kChvayLg==","signatures":[{"sig":"MEYCIQDMBzzBakHzJLAhxLORdMjzHBjIhEgOirwQXqO58+TIfgIhAOMEIzMS378V728ezhAb2Ys2liDwfWom7KA5zl8zomhd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2b8df8e61bde46cd002067de78d9885727f43bc8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.4d6b10db"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.4d6b10db.tgz_1510005922486_0.09492744854651392","host":"s3://npm-registry-packages"}},"1.5.0-alpha.38d51a03":{"name":"primer-forms","version":"1.5.0-alpha.38d51a03","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.38d51a03","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a226d8b99a8d4afba3c81391e529290ca8eb3976","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.38d51a03.tgz","integrity":"sha512-HEnKwg8rHxqpK7ieYMJCocS1iPUIOu7otO82+/hFkqcLxaVBTksoMC8kD2K7h/eBfRLu25j9c4XPooRw0SpNqg==","signatures":[{"sig":"MEQCIDCy3W0OfCKsqa/VhZnUNRpWmFMEadpLk7M1i6X0GraeAiAxUVhW2iNc9VBZrAk/SJwDI/ADek4+HsZCGoUPzeTSIA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a226d8b99a8d4afba3c81391e529290ca8eb3976","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.38d51a03"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.38d51a03.tgz_1510011362970_0.5246253267396241","host":"s3://npm-registry-packages"}},"1.5.0-alpha.7888ee92":{"name":"primer-forms","version":"1.5.0-alpha.7888ee92","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.7888ee92","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"5ca07d30450e399507e8fa5f5a0fe145d2a382b0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.7888ee92.tgz","integrity":"sha512-R7NVc9cKKINU7O50HXLFRZ55PAMa8U20mFNv2GvEqC8q1K08OdUyH6gSEi0IdwDv9pA3hnOA3zCGYCGaVv9UFQ==","signatures":[{"sig":"MEUCIQCWro/HW3LvdWext1IWU43sENXKaG06dUz/9zLNBdtvWQIgUopbhEV1KDaOMMBHQrOWfetNhgZ0AInKBhiLiogFhLk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"5ca07d30450e399507e8fa5f5a0fe145d2a382b0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.7888ee92"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.7888ee92.tgz_1510011410428_0.9392371727153659","host":"s3://npm-registry-packages"}},"1.5.0-alpha.3adaac52":{"name":"primer-forms","version":"1.5.0-alpha.3adaac52","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.3adaac52","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"ff5bf26561ca8f8897dba36fe7eca353adf41827","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.3adaac52.tgz","integrity":"sha512-u1+yZYja1baw5kjnyNPRTzYBArRAWbpRpI1i7tbwmK2HCd9Q4SCTM8x+vKrYQ1vntL+70poH1HMW+Gezt4Bhpw==","signatures":[{"sig":"MEUCIFYmYSBh6i/w/3jndUWQPdzfMoRBP+f8agWOibB6DMbdAiEAsws4Trq4Beu+BA+QKzdD6B6ZuG/w7c7E6ko1xyuZ2pw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ff5bf26561ca8f8897dba36fe7eca353adf41827","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.3adaac52"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.3adaac52.tgz_1510012549824_0.7248147819191217","host":"s3://npm-registry-packages"}},"1.5.0-alpha.47b50016":{"name":"primer-forms","version":"1.5.0-alpha.47b50016","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.47b50016","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"06a3a6f679e1a7b58e0b699742c807df17baf0c7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.47b50016.tgz","integrity":"sha512-M888wqMlqSM37QvFdg8QYqbDKu856D9K0T79E9zN3qm1JQs4CSy0LVfIqo1iUJXu4UaKnKzlZK6U4usZhosdCw==","signatures":[{"sig":"MEYCIQC4ngvBC9F3tQAMWCHF/PcD8NgmJOtoP9BjXbkgSML+TAIhANE92nUfnw2zsm4umip69q+VEool9jsaJ6BJ60BdLmwC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"06a3a6f679e1a7b58e0b699742c807df17baf0c7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.47b50016"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.47b50016.tgz_1510030138174_0.4760723328217864","host":"s3://npm-registry-packages"}},"1.5.0-alpha.3205d58c":{"name":"primer-forms","version":"1.5.0-alpha.3205d58c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.3205d58c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"32dcb43515d6b8073164f53e67331c22830c51b0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.3205d58c.tgz","integrity":"sha512-PTHAqLiggnLr4n0EI3MVl8ObLZaNAyeI7B4ZC7ByR9DTnuKaw7JYyV4P9CC1qMjAGJceuo71/NG+9im8bUMNqQ==","signatures":[{"sig":"MEUCIQCTUA3Ig9HP60I3oQSg1usLaC7oqiPSqfQpxY5HBkv2BwIgYjgavZRrzS10UiJ8dxxaBXnh9J5zyI2iBqfAngv3+YE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"32dcb43515d6b8073164f53e67331c22830c51b0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.3205d58c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.3205d58c.tgz_1510037091875_0.2762540583498776","host":"s3://npm-registry-packages"}},"1.5.0-alpha.ac1fba57":{"name":"primer-forms","version":"1.5.0-alpha.ac1fba57","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.ac1fba57","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bfd5866b33337cf9dbc21a95c1a4384beb13be06","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.ac1fba57.tgz","integrity":"sha512-Ym4xXtkCYgYkqfSnBW8ed5Fc3ZFEgeWqIycM/VeamonR44TeqaWYw1pDcLrzohX+8nhnhcmHoUSG0zdDNB49lQ==","signatures":[{"sig":"MEYCIQCX1/nBXEGfSZTnF+usBOgOf/lpLuwdOq33WVj/DbhA0wIhAKt0v55ndfVsGuIVjkfhp7JLwXZAH8n3SMdE9cFQH6te","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bfd5866b33337cf9dbc21a95c1a4384beb13be06","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.ac1fba57"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.ac1fba57.tgz_1510077542914_0.5653021899051964","host":"s3://npm-registry-packages"}},"1.4.1-rc.6":{"name":"primer-forms","version":"1.4.1-rc.6","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b1c85f5847e69013b797bd939c41527d3306ef5d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.6.tgz","integrity":"sha512-sdd1zNrvViq/pMlNRA4+KdvuAXvX5aiHsKTOTb8liEXkv5Zs1PDhw6LyvOs6aeVxDaLkee6jOI0BeWkivQN8Vw==","signatures":[{"sig":"MEUCIEJ8gMf1ILi+gjFycx8EhXeYigGVOYnjZv/MAWAo8UHiAiEAutSva6jzKGgTZRRUpUcJ25LRwkyxk3YqLUhsEDcVIn8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b1c85f5847e69013b797bd939c41527d3306ef5d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.6.tgz_1510087768520_0.6164755620993674","host":"s3://npm-registry-packages"}},"1.5.0-alpha.a67b0ad2":{"name":"primer-forms","version":"1.5.0-alpha.a67b0ad2","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.a67b0ad2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"17d45a671f3c0e47eb5883961a09dd6d512db414","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.a67b0ad2.tgz","integrity":"sha512-SbOMiaH2mTvNF6yLTRhXN84UmwvdN1tdE98Co7QihZGH0vlvbdmyqkswnyRxNbUrfnNL+MnJOml41vktS4I1ig==","signatures":[{"sig":"MEQCIG1ef/gz7eU5uXiPybwcpaHXq/D8b5QCvpdv8sjSAFNFAiBaZtdZD9dPuH3edWFhggxlBeZlaH41EvuPTTeBEh6nGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"17d45a671f3c0e47eb5883961a09dd6d512db414","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.a67b0ad2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.a67b0ad2.tgz_1510091102685_0.7542638510931283","host":"s3://npm-registry-packages"}},"1.5.0-alpha.a4bc4a43":{"name":"primer-forms","version":"1.5.0-alpha.a4bc4a43","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.a4bc4a43","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"d2af2d2d07e1fe9b430257c7a7ce670f44a1e3d8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.a4bc4a43.tgz","integrity":"sha512-q8RfokxUJFZlA3g7DFJiy7RDuEEmeYMTEnH4dPmdsWU64LhIBGxsQi+2lzv15QI/oo3iZOmTebeKCLPDwGPAmg==","signatures":[{"sig":"MEYCIQDqEg0wuv5QMLXr2GK/9+ZEeYJ72QsHO48PRabEy4f2BQIhAMJsszBgJyi0m3DQfC0TXvKOcLKHrxcqZY8G81VluFWG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"d2af2d2d07e1fe9b430257c7a7ce670f44a1e3d8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.a4bc4a43"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.a4bc4a43.tgz_1510091972050_0.20301763014867902","host":"s3://npm-registry-packages"}},"1.5.0-alpha.f2cb42ae":{"name":"primer-forms","version":"1.5.0-alpha.f2cb42ae","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.f2cb42ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"12022e96cdb3539f0e7dd6a8257a6be5ee56f42e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.f2cb42ae.tgz","integrity":"sha512-ic6XU5s04LrmreeqaDBWRqk08kfuaaejhGFhvVxPugjnbolkfA+BypxuU8GohP7xqBNL2Umu6DOH/pknVvkz5w==","signatures":[{"sig":"MEQCIFxgqVsBBQTozww8ZHVeG9teY3HlkEK91MMwvafE1a8aAiBy4j1wkERnxujKRyXkNAMVmQwJ6r466w97XcIfgvTJag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"12022e96cdb3539f0e7dd6a8257a6be5ee56f42e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.f2cb42ae"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.f2cb42ae.tgz_1510092035851_0.37784698512405157","host":"s3://npm-registry-packages"}},"1.5.0-alpha.19404e55":{"name":"primer-forms","version":"1.5.0-alpha.19404e55","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.19404e55","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"22e288fa7e46718a4645d4bf126c6e085738fc30","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.19404e55.tgz","integrity":"sha512-pRmfs4ZgNa+gNtRUCTrp4AtHlNG1zb2nCCtBmatzp8JjuMqt/q58xI0CXNEqyYrFcOmKqqA1Xo15Nr9zpsq71w==","signatures":[{"sig":"MEUCIQDFJ/+cTW+Sx+ssBkWHnoAtanb6uyKIgNZMRmV+FxUC2AIgRQeYlNIhJL6N5ddESVm+iGmsxmbBvfEs+g69PlItCzE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"22e288fa7e46718a4645d4bf126c6e085738fc30","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.19404e55"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.19404e55.tgz_1510092046188_0.04254245897755027","host":"s3://npm-registry-packages"}},"1.5.0-alpha.511e2245":{"name":"primer-forms","version":"1.5.0-alpha.511e2245","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.511e2245","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"321cb8954c0f6e211af9489ee09ee333cd661b43","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.511e2245.tgz","integrity":"sha512-AmTaSh0E4/d7RRO0Fnjtk4DShua9UMccm5STR/WUMEwKqM68HrveN43EqLQqWcNNNFsreKAHNSTwKdgaLax02g==","signatures":[{"sig":"MEYCIQDZjcByXPcaTCcsUDtO/vs6VBNCmTnB5FT4xCc7eMO/UwIhAMxi1+s2s3mrDUAeV6vmKsLQpGYNG6vJR0tt1G7dSuAb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"321cb8954c0f6e211af9489ee09ee333cd661b43","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.511e2245"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.511e2245.tgz_1510092806992_0.010531284380704165","host":"s3://npm-registry-packages"}},"1.4.1-rc.7":{"name":"primer-forms","version":"1.4.1-rc.7","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"c3c27026a7a96029a2be57c6e67cda6cfa048bed","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.7.tgz","integrity":"sha512-lPIg5ZaZXwhJelNFhBWI5h7QKsSd4em5ikyXxXpHPBDIj7qgc2GUlBaqjIDmSNQg/FQjMvAop11sBrUSpiC/ag==","signatures":[{"sig":"MEYCIQCW6VupRkPiDqO2ehAxbaDV4Sk2ulUypNKltALZ/vfxaQIhAN7WdU5ReeDZQaXf2eH3vVsxEh4YW6LWgkCCmuKFjJvp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c3c27026a7a96029a2be57c6e67cda6cfa048bed","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.7.tgz_1510093417102_0.17466816073283553","host":"s3://npm-registry-packages"}},"1.4.1-rc.8":{"name":"primer-forms","version":"1.4.1-rc.8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a25048a70aa10a6249f693f6b7ed23888122b886","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.8.tgz","integrity":"sha512-aFSaJ9rAAIs6jhJo3MpwqhviLZ9gM35HQnSM43gOo/pHJirLpcNPAD55lHA1B2TG2oPPHifPqZmwVQxZStltCA==","signatures":[{"sig":"MEUCIQDf0zkAPhTPrM1mKahmvFMAgp6lIvcWbyhWHDoCCC48iwIgGav2356L9vhnrLp+Y0gEAW3cyXyp0PQ5Q/sHeya0jZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a25048a70aa10a6249f693f6b7ed23888122b886","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.8.tgz_1510093495233_0.9328860172536224","host":"s3://npm-registry-packages"}},"1.5.0-alpha.30aafda8":{"name":"primer-forms","version":"1.5.0-alpha.30aafda8","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.30aafda8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e4b66b3564dd74dbdf3ba8eb5409e2e240a0dc2b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.30aafda8.tgz","integrity":"sha512-0pl4GpfV9+M/lZxEGrZi43GghYmaso1b31ztDBM60WtL5xtTsn/MUVvmshAntjewmGryUQGiIz6Rc/7eJUvtAw==","signatures":[{"sig":"MEUCIQDiYMuwERpYdA3QGDJrJAwey75YkMpoIj0f9aSGopDsVwIgWP8afKzsh4rAc+KiBsO1YfFLDyowIkdg4Z//gXIDXvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e4b66b3564dd74dbdf3ba8eb5409e2e240a0dc2b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.30aafda8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.30aafda8.tgz_1510095228104_0.42145387292839587","host":"s3://npm-registry-packages"}},"1.4.1-rc.9":{"name":"primer-forms","version":"1.4.1-rc.9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"76470b38548f1bae21eb687b75147155c856c030","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.9.tgz","integrity":"sha512-W4h+Jmt9Wv4ueF0gJ7/OFA9eaE3X6ACwMXW8ibYpepDxx4Utjcy/fWagBe0xzXGTHwkE1jhmzX5jJP0IWtUdVQ==","signatures":[{"sig":"MEUCIHZaN8/EPNErN1yH37KBFKEUiwpd1Vo7O3rwaatdG5AHAiEAxB6UuzMMYMEQvhEh88gxMgObFQ0OiZma7l4DJvN1lg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"76470b38548f1bae21eb687b75147155c856c030","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.9.tgz_1510095995643_0.9839885579422116","host":"s3://npm-registry-packages"}},"1.5.0-alpha.228f8628":{"name":"primer-forms","version":"1.5.0-alpha.228f8628","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.228f8628","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"2c129b8c56666b12ea1741231159caa585c39dc5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.228f8628.tgz","integrity":"sha512-3TQR1DyfIqpT398qpnVyJrJGd11CWcZzj+ZIQRxEVgYvrdLMmEQEdKPCqt4jKIQwDMJ/FKHnN96nhRBZKwyzoA==","signatures":[{"sig":"MEUCIQD+H7UNXK2gWAvryEre64IeYVi6sV/CCnVhdV9OqLyLVwIgAOklchuYiQYpD+VyUopAA6bF4f79p0SXqlQyHgQPbBQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2c129b8c56666b12ea1741231159caa585c39dc5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.228f8628"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.228f8628.tgz_1510105532408_0.2884629217442125","host":"s3://npm-registry-packages"}},"1.5.0-alpha.c9a64cbb":{"name":"primer-forms","version":"1.5.0-alpha.c9a64cbb","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.c9a64cbb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"307b92b316696d588ae9df1973dd8dfb95cc5ad5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.c9a64cbb.tgz","integrity":"sha512-6ycrbzOeDKrOqIVDZnUTObf5c9D63O9Su4+/kJ5r/jeg2LKhpaP8Yox0QKjSbErZm/C5X+bM0sllvF1ppkYbZA==","signatures":[{"sig":"MEUCICy1dPP7MYgx57fPcSik2rLdKEmMBzkvVpbN3fd+PsqVAiEAxHy2R1+U6sfkCXOkHaamK92Daks5WEkNlwyfadUjb0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"307b92b316696d588ae9df1973dd8dfb95cc5ad5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c9a64cbb"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.c9a64cbb.tgz_1510106900777_0.2900900954846293","host":"s3://npm-registry-packages"}},"1.5.0-alpha.e0a27da9":{"name":"primer-forms","version":"1.5.0-alpha.e0a27da9","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.e0a27da9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"6c9579696a445ea2fb4cf62c2a6afd4790dfe3e8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.e0a27da9.tgz","integrity":"sha512-PDlIrNe0smrqPPtjS8CqMZDkXucCD9dthCGVVQ9a7IyUUTNQpi1DNAbI8722WMiE26B38ccf6bKie+rjxlLBUQ==","signatures":[{"sig":"MEYCIQCUqSn3VG7jY0iuy4cmLCU9L65kLB2doZl+5P/aNCo+pQIhAMHCTsaG0HUIQ0KzVhP7XLwHvv2jJQQ+b07TopS1Xll1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"6c9579696a445ea2fb4cf62c2a6afd4790dfe3e8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e0a27da9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.e0a27da9.tgz_1510109689532_0.9453232304658741","host":"s3://npm-registry-packages"}},"1.4.1-rc.10":{"name":"primer-forms","version":"1.4.1-rc.10","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"0b55027c524633c1e853c19f08b3e1785afe4919","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.10.tgz","integrity":"sha512-HCDOieq/iDTzTHGSfOIaidkeXsL7VFK2NPqXiAI6dUtDAGA5qK/EH4hbZBjpGMuZTWyYa6RsBUHELJWBQLaWog==","signatures":[{"sig":"MEUCIGL64Y/olFoDAa1czBzllbPpOMwI7/oDPTvHXz4KXhGrAiEA4za7XVWNT5HXBy2NQJBZU2LUD5sqSFeN5MPmxGdAeSc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0b55027c524633c1e853c19f08b3e1785afe4919","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.10.tgz_1510112770515_0.8955345381982625","host":"s3://npm-registry-packages"}},"1.5.0-alpha.ca4c2c3a":{"name":"primer-forms","version":"1.5.0-alpha.ca4c2c3a","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.ca4c2c3a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"848639552cb933b4730bef5feb2d4553705f1c32","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.ca4c2c3a.tgz","integrity":"sha512-C2wojQw6mJul+F+bWLCoj1aGFsW+2GVM43FGJCDoeKMM9q11S0/pvk0tjEAOHnQSKyvmO6KfZ3WROaWVtf8Tlw==","signatures":[{"sig":"MEUCIENUOqNzR2gUl4+0VBLoLSyJSR7Dg8o5BRFimH5lTfIkAiEAoeX1ff85wvbBrqMlHDGB+Z06CnoiPTWuV/H+PfpnNww=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"848639552cb933b4730bef5feb2d4553705f1c32","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.ca4c2c3a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.ca4c2c3a.tgz_1510170020699_0.33444479177705944","host":"s3://npm-registry-packages"}},"1.5.0-alpha.24aac17c":{"name":"primer-forms","version":"1.5.0-alpha.24aac17c","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.24aac17c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"797ef862601981d80a49d763329e55df96a12c53","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.24aac17c.tgz","integrity":"sha512-o5XBdWygv1HmaMBdiCl1Jsc3S7v3hGSigkNeZp3Jm+dtYkZGzwZ5yiwF5bARmaF6PEPVHFYT7tPQn13E/5bTTw==","signatures":[{"sig":"MEYCIQDtlxlDHtRYrHj5B7udcwOUqS6eXFHFImMVe1Wj8aPGfwIhAMXjSfZKaRcwb1K0+m9RYuL20zFUUHVycqFq3G4MyXP3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"797ef862601981d80a49d763329e55df96a12c53","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.24aac17c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.24aac17c.tgz_1510176871795_0.00960154295898974","host":"s3://npm-registry-packages"}},"1.4.1-rc.11":{"name":"primer-forms","version":"1.4.1-rc.11","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"82e059b0c7aae8210172f70cd8f123fcfea4e73d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.11.tgz","integrity":"sha512-pikDBEdBrMQrhhzx6PyoqLtWe+/V8z5GiSgAOUmuRSDXnpHAd9w2uj120khx3pfC2dJUjJiqGQpsVPGFWEoUnQ==","signatures":[{"sig":"MEUCIDA9ouZx9b1KaWlYe294n+TCQ3F+KspFvqi40e2J2QpPAiEAnpwAQDwXLicnYFjB3Gh7o3LOoZaFh2dWS9k+nKXAbNo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"82e059b0c7aae8210172f70cd8f123fcfea4e73d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.11.tgz_1510177535421_0.7754450256470591","host":"s3://npm-registry-packages"}},"1.4.1-rc.12":{"name":"primer-forms","version":"1.4.1-rc.12","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"b41593cb7c59f15672a4e0a1c8b952030017b091","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.12.tgz","integrity":"sha512-BV3uHspKto+6z9BDqOk3IY3YYAsvNpsqdLvZ84o87UqpSP5pHgMG8pWvJqQsntTO1KceusBTR0cx4tfjZaHx1w==","signatures":[{"sig":"MEUCIQCVQte6vixcY95zgyUTwfWW4SlVEbWHKj7wgT74/hr8pgIgWtugmHW+dJzdRWLyjCXoAc9f+INXvlsP7hYq6uCxBrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b41593cb7c59f15672a4e0a1c8b952030017b091","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.12.tgz_1510177765099_0.25867361202836037","host":"s3://npm-registry-packages"}},"1.4.1-rc.13":{"name":"primer-forms","version":"1.4.1-rc.13","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"283d3b0961af907136ef9eb9d70e9ef73e0509de","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.13.tgz","integrity":"sha512-3e4Afj0/iD0Cuz2KpMf2vEqHNSX/F1fklfPd4t57zgkwWrGZmRwmJC2CpfcMowQx+dShymr53hnPq6WSalEaXQ==","signatures":[{"sig":"MEUCIB/8FNWY0g2DBMrhXKWKdAtadUjY5rRVPkbmCr6PjsA7AiEA6oC1VOylOk5TcUdU4ffgcoGSXjnflOadM8BHeTSDa2I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"283d3b0961af907136ef9eb9d70e9ef73e0509de","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.13.tgz_1510181379669_0.4400383527390659","host":"s3://npm-registry-packages"}},"1.4.1-rc.14":{"name":"primer-forms","version":"1.4.1-rc.14","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.14","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"efbf8a726a1308d34c2d55fbd1a462d1a67ce45c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.14.tgz","integrity":"sha512-8kWsZBlD+oT4SwK4pWiYmv4UVTqNGUG+mYTXYKw6tKO9QfX87fXT9oZOx0dDgXNqB5WKNSvqAd3DDT7YAl4fbQ==","signatures":[{"sig":"MEUCIBlyUDFeBm6BVeBHWqp0DpLgVevP2kMUGlmKVI384PdiAiEAvbaOAndfVz/rUEhcD/NpQryv3gKwEKaOrEhU2CHEruw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"efbf8a726a1308d34c2d55fbd1a462d1a67ce45c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.14.tgz_1510181752658_0.07816716399975121","host":"s3://npm-registry-packages"}},"1.5.0-alpha.9965c961":{"name":"primer-forms","version":"1.5.0-alpha.9965c961","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.9965c961","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"899cbf1319407451b1ba20a41b8e7f02d694e715","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.9965c961.tgz","integrity":"sha512-BsySDhfnX+d2vEpgjOhLfzOi8sofKYazdU4Faeue01/CIM6FwxuCk4jZQrnBbbrNOZYNKLOsRRGzYNHY1wUSww==","signatures":[{"sig":"MEUCIQDECDCaXw0FNTVt8gFIr5NvDNQSqZy1cAz6+a44CkXjowIgIKlrLpaPv45H1ClUOXr1NVhz80Si6Ec5zCU32cbO8xw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"899cbf1319407451b1ba20a41b8e7f02d694e715","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.9965c961"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.9965c961.tgz_1510182339995_0.7935074807610363","host":"s3://npm-registry-packages"}},"1.4.1-rc.15":{"name":"primer-forms","version":"1.4.1-rc.15","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"65ba0314b5775ae7e2539017cb3836ef0e094724","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.15.tgz","integrity":"sha512-FGHVHJtYzW/2W9P4pezoT55gjeXrznP+Fl3xLSpGxkU+jtJPJVUG93kL0j60LrYy+BVAkIONZkqbj61kAqgKvw==","signatures":[{"sig":"MEUCIQDT392B8HjVBDTYQmQZeENVq2+NW0br1XRap5HOiRVVowIgSBnda4OtdgzAtjQvOy3iwHdkUKqU9IF2y9haZT2h2GQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"65ba0314b5775ae7e2539017cb3836ef0e094724","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.15.tgz_1510182901456_0.013694781810045242","host":"s3://npm-registry-packages"}},"1.4.1-rc.16":{"name":"primer-forms","version":"1.4.1-rc.16","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.16","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"e4b68fbfc5acaf0a8c35fcaf2a84fcdb0880e559","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.16.tgz","integrity":"sha512-zZw4zY7AArKVAXPdll/huE8y7LXfsbYWviF/cT7ID3QraOFsJ15WxH+6OtxMb217kG6wLRFHmGdohnypg0ys7Q==","signatures":[{"sig":"MEUCIQDKJsmw5VpjcI5Bq77eHOTQcVRMipxeGx3R1qi4hrfRJQIgY3HvK0VQa/l0MJvYW5vTIgWPB0gUZZuzmWJL7ZXMCbo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e4b68fbfc5acaf0a8c35fcaf2a84fcdb0880e559","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.16.tgz_1510184687846_0.6816915506497025","host":"s3://npm-registry-packages"}},"1.4.1-rc.17":{"name":"primer-forms","version":"1.4.1-rc.17","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"a4deedc458054d793a4f67fe070b937fa4b9f45d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.17.tgz","integrity":"sha512-KG5v39ylVcm2jik9UdErTF5Y50JC4chQOVhDmqlEcK4EpUCSQuEaVPYVc1axesC0vy7/THrMs6JlkfntsHPoyg==","signatures":[{"sig":"MEQCIAOVeHSqqSML2RXiuX0x2eyITt18AmNtfaS2ebqOHsQbAiBirDcYGz7XLD4m0ocwosSQUDjAgubD/yXuuFnwn2+ucg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"a4deedc458054d793a4f67fe070b937fa4b9f45d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.17.tgz_1510198553966_0.9797403088305146","host":"s3://npm-registry-packages"}},"1.5.0-alpha.a13b5a65":{"name":"primer-forms","version":"1.5.0-alpha.a13b5a65","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.a13b5a65","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"bc4a108c2764792a7c5c171c2c7f5d22a30a84e9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.a13b5a65.tgz","integrity":"sha512-I06wiXE6nniOabvfLKUO89ZW7ExKpc7BkO3P02imDR4nSYFepQKMLVnbChHEHht41D9jHPSfydiaLfM8Qlj9SA==","signatures":[{"sig":"MEYCIQCbVdud6tGBO7iE682lTwy1e4ve0pBrzuAo/LFq9ScdiwIhAKVS/MzTBPq6E9pQ1Wqpe7ClD5kSPecu8aQNv72mknqt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"bc4a108c2764792a7c5c171c2c7f5d22a30a84e9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.a13b5a65"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.a13b5a65.tgz_1510246504718_0.24547265470027924","host":"s3://npm-registry-packages"}},"1.5.0-alpha.14223a9a":{"name":"primer-forms","version":"1.5.0-alpha.14223a9a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.14223a9a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"86c9240a9bcde112f8c6651107c92e95ac8b1496","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.14223a9a.tgz","integrity":"sha512-GZCmUt0Y91ijr+bOVK0F0/WX+X5vlHTC9QhiqHalrkGZBUb3QdinGAtbT1mJrT8cEEYf0LybP+yUeqorsD3hOA==","signatures":[{"sig":"MEUCIQC3H5QKq+pBeq/kErU9T7FK60LDjykHGQy/jmMW0T5tEgIgTpDFfaGMGxc4jJ3HzdiNeKKluvi9nCU9V+ulAj252uI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"86c9240a9bcde112f8c6651107c92e95ac8b1496","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.14223a9a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.14223a9a.tgz_1510250051063_0.06712272670120001","host":"s3://npm-registry-packages"}},"1.5.0-alpha.6910d580":{"name":"primer-forms","version":"1.5.0-alpha.6910d580","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.6910d580","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cf94019521e8160c6fd10970954299de8a503b54","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.6910d580.tgz","integrity":"sha512-B6fV6DCVfxgOBWH4qiVtymLqKVjPUSO0nRFxtepznwSV564tFdRf1O0ueE3hjJkHADsGh5o/bvI3sWuvZl63aA==","signatures":[{"sig":"MEUCIQCB0FFZOsbgLpSydOxOYXotrQGmbxCeHhrlFnjJlCkJzQIgHVGMk6hjbCdjUmBST7TFe7+6EVCdQlkS+zzb5giThfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cf94019521e8160c6fd10970954299de8a503b54","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.6910d580"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.6910d580.tgz_1510250349222_0.6977774780243635","host":"s3://npm-registry-packages"}},"1.4.1-rc.18":{"name":"primer-forms","version":"1.4.1-rc.18","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.18","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"1d21d679451194f5c87fde07f77c88a785ffd454","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.18.tgz","integrity":"sha512-WReQczf5kuTASTRZXshd6ueXxoXk1zlQGjGdos5/gmNN/nF3Fp/qKWXtegHn+OUnj3X7DJFhWdk5E/exX+cvwg==","signatures":[{"sig":"MEQCICSlyVTUMab3EFld+m6spUDw9C+l7dXC0fM28WJBb48GAiAzZhAbQYOxbmZzsux2eE9jaOAREsdgoCrqyNglpwdRRg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"1d21d679451194f5c87fde07f77c88a785ffd454","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.18.tgz_1510262610185_0.9855561875738204","host":"s3://npm-registry-packages"}},"1.4.1-rc.19":{"name":"primer-forms","version":"1.4.1-rc.19","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.19","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"547612cb004a1c67eedfea89c11b906f49bbb15e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.19.tgz","integrity":"sha512-WEx86ZY9lq9jq/eBfcS8HYSb9Jt32g9S+jNP13eC0czABOrtXXkvUp4UecRvSiWOZMiSeQIM0TUYctU5DgpgWw==","signatures":[{"sig":"MEUCIQDygweI0dRhsMmGQnvMbyxcvHKsb6gEtqn939EH87X3+gIgZAF9v8vQtljA23JqfqhByvV4lTt30x8DR/r90R3ptjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"547612cb004a1c67eedfea89c11b906f49bbb15e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.19.tgz_1510274547884_0.98631786624901","host":"s3://npm-registry-packages"}},"1.5.0-alpha.e39405dd":{"name":"primer-forms","version":"1.5.0-alpha.e39405dd","keywords":["primer","css","github","primercss","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.e39405dd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primercss.io/","bugs":{"url":"https://github.com/primer/primer-css/issues"},"dist":{"shasum":"273b353160e4a6c1432f091ac930ec95806d7660","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.e39405dd.tgz","integrity":"sha512-kNUIDvKDlPVRYwslKGRNnCQa/Dch++J4xZGqXVvqR+0FGNf2QBYaaLA4A41AN9kQ5XBBjghRRhIleX6LYNjufQ==","signatures":[{"sig":"MEUCIQDVqBLEc4/er0LUjnOhTocxlMHy3SoYySUram4JEsnbsQIgNugPToOEEHf2ALNtOoMzfUblIHKKULYHDmfFlHZJnes=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"273b353160e4a6c1432f091ac930ec95806d7660","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer-css/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.e39405dd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.e39405dd.tgz_1510275324346_0.7270867277402431","host":"s3://npm-registry-packages"}},"1.5.0-alpha.d2e6cfed":{"name":"primer-forms","version":"1.5.0-alpha.d2e6cfed","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.d2e6cfed","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53b96d2f6e1018ff1e35e91b8669f166ce4aee17","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.d2e6cfed.tgz","integrity":"sha512-r92TVz6NAb66lK7kdNZS24KlcnVNAR17QZoxTGl4LGPEym80ygEBFSDjkRDzw/1LKopkDP53Kb1ls8LrhsVi6A==","signatures":[{"sig":"MEQCIAwA/is+s3dnEZ4AK41eC/tH+3+7vh5Q/0bsV3HKcH0RAiAaZ2SHEJwGBPTfN5uhrIUN6zQdD3IJS1btzLyJWn0Kww==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"53b96d2f6e1018ff1e35e91b8669f166ce4aee17","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.d2e6cfed"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.d2e6cfed.tgz_1510283614245_0.14917056751437485","host":"s3://npm-registry-packages"}},"1.4.1-rc.20":{"name":"primer-forms","version":"1.4.1-rc.20","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.20","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2fc1cfcf81c81ebd33ca33674b980836d641dea3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.20.tgz","integrity":"sha512-68PzHcU8aC2UcDmKDvTCtOlyxKSePB0U3apF6ywWHTR5byqjgffgKVW/MqkMnu6rzjgsgf3Brpmf16thON4/wA==","signatures":[{"sig":"MEQCIFExkot9sA2PlvTyJFXToRboDUJsW1kMhON8XUllY976AiArDmPJpkAYFeApjMwT+ZCNcMQHQa0HklSwVebBbsDAbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"2fc1cfcf81c81ebd33ca33674b980836d641dea3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.20.tgz_1510293009001_0.9031504760496318","host":"s3://npm-registry-packages"}},"1.4.1-rc.21":{"name":"primer-forms","version":"1.4.1-rc.21","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.21","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ac6610bdb5b42910716e027a9fbc6327c4c615e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.21.tgz","integrity":"sha512-ewWxFpavkaSGki3S2jICGBA1h+22u4Qr9lPC6yha/daRAGdqhWhMEQ1M8m0e4B9bBIG3AlCwuqCHaIoCrIXL0w==","signatures":[{"sig":"MEYCIQDp2ZFjBY/mb/GaWXGgB84ixPQ3ttkMc0vGgwIkt/VDqgIhAIqhPvblKcdD3cun6B7H/0wSTfmCnTS8W12AiX5JliV/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0ac6610bdb5b42910716e027a9fbc6327c4c615e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.21.tgz_1510332792799_0.1730751129798591","host":"s3://npm-registry-packages"}},"1.4.1-rc.22":{"name":"primer-forms","version":"1.4.1-rc.22","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.22","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ab1c427b8b6aee0ba84ff703525ba91c25240757","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.22.tgz","integrity":"sha512-DDwYV+8DIFCq3MqPT86LOCr4OqxzQ9Mdl4uZL5qb718hXnbLEP6Dimj/ZsasQpejtSIn9OT4fgpIOGTHTXTb+w==","signatures":[{"sig":"MEUCIDJYYEV1o+ErYnct6knVyhs/7fLQjJRm22vXOkJPE3R2AiEAgXcD0ODFWYXWR6uaNyplAj7mv64MVy1OO4NwTLvLl+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"ab1c427b8b6aee0ba84ff703525ba91c25240757","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.22.tgz_1510333733471_0.33190844277851284","host":"s3://npm-registry-packages"}},"1.4.1-rc.23":{"name":"primer-forms","version":"1.4.1-rc.23","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.23","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"df2a4e19ff36752ae3f4b13505841fd3deb60caa","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.23.tgz","integrity":"sha512-pHr/AsSyznCMuqSM4HYYtZiC9ByK5w8jgV8Ayymd3sy2PHVx8NFdNgFmLLKNmeUURyHEyFQ5apR8r6UOs7OGgw==","signatures":[{"sig":"MEUCIBsRVpoYP2oveJJdm10R/S6shQCl4etZxFHxCHe6IXWCAiEAspG0Z+Ybzb8jOm0SboH9S3AZTtVb1fJB6tkp7qPUPrg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"df2a4e19ff36752ae3f4b13505841fd3deb60caa","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.23.tgz_1510334300963_0.13105619885027409","host":"s3://npm-registry-packages"}},"1.4.1-rc.24":{"name":"primer-forms","version":"1.4.1-rc.24","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c34824035db29bc8df552de1cc9c8bd4db6a2157","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.24.tgz","integrity":"sha512-OTR9JFOr4ek75AUCX+0vkS5zfLaVwOW2ohJhSa0Q8NgeQNScRhGIRNlsYjW8hHqDQRTvN04ZqMvsE9o2jBVAxg==","signatures":[{"sig":"MEUCIQCNY/6AkXDsDUT8plFl01tRpd7bWhHrIenm632JJYYFlAIgWszB+PYk4EjlB8w241Hphg5mmYgl+GF0MzAgvXxJk5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c34824035db29bc8df552de1cc9c8bd4db6a2157","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.24.tgz_1510342682446_0.7847136161290109","host":"s3://npm-registry-packages"}},"1.4.1-rc.25":{"name":"primer-forms","version":"1.4.1-rc.25","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.25","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f96c3b44bf949cc02312620b50baeff14fe5fe91","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.25.tgz","integrity":"sha512-mvPXcAb+x0KFw5Z73ECZCj+tZmU7egMWrmnufUMFr5bD4oHa/mknqulbvFCsx/HngYCxGr0EJLxXO5QRy1LlVA==","signatures":[{"sig":"MEQCIHLLI1gysAOUjSLhStsYoCSZQJqCoOW4N+fhVZZUKJtGAiB8KLxVUuQZCOFYVx8s9jZuV4WY/i3eo1XKuM5lv0o/QA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f96c3b44bf949cc02312620b50baeff14fe5fe91","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.25.tgz_1510351261164_0.3026862354017794","host":"s3://npm-registry-packages"}},"1.4.1-rc.26":{"name":"primer-forms","version":"1.4.1-rc.26","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0d6cecc0a6acdafdfb32883475340e04bbcb9075","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.26.tgz","integrity":"sha512-zjbxLpbSEaSrg+5N+/QZiwfgqwbCZmXicuhbe3ODWlCLFbqGjOsdv0uva4G0yFrddKv5x6MhFCUFPygYYIRKCg==","signatures":[{"sig":"MEUCIQDT0I66YEajsqlYIsVRu9d3b5V9gNqgKv+ZM0LM4zbZOgIgFiZ5Glg9/KTEj0ib9pIlmx09BvgxLhNPaTvdIOHiRCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0d6cecc0a6acdafdfb32883475340e04bbcb9075","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.26.tgz_1510604312471_0.7964637367986143","host":"s3://npm-registry-packages"}},"1.4.1-rc.27":{"name":"primer-forms","version":"1.4.1-rc.27","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85486ade7a8864a9f34efc6e8ee858f10baaed1e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.27.tgz","integrity":"sha512-3SaKka54wRjNmdklvzV2tXjhhCHEYoFQirpE3FCfMPiy9At14TxjsagDZ1G+Pgme3rpEeMnQH9K1lrvfgzxYeA==","signatures":[{"sig":"MEUCIFwtgoLKyoc/Si5j1tCwxrMQ3m0d9MCieOoyowKGRe7DAiEA/RTrEDYWqBk5Tk+ENgVskHN/AyEZJ4gSQM+JdkFfNSg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"85486ade7a8864a9f34efc6e8ee858f10baaed1e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.27.tgz_1510605399331_0.5011382980737835","host":"s3://npm-registry-packages"}},"1.5.0-alpha.fbed85cd":{"name":"primer-forms","version":"1.5.0-alpha.fbed85cd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.5.0-alpha.fbed85cd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"18c02e4621c539c3da5e978f22924f1103a868e9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.5.0-alpha.fbed85cd.tgz","integrity":"sha512-+JzXNDjl8LZWrrdVFHUPpvIX/aUUP+drSOvN8aTW6o6xCeNTbK5fcVIOKYS731kuuxUY9HX1llYVEfrI4WFD5g==","signatures":[{"sig":"MEUCIG9NJAYp/O3pMx2rSaDcT8iJ1uVhFgfamA9hNxufxgTFAiEA2wGqeylzlgJgbguaVHNN0a2XsFuOAq+gB+ucA0keOyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"18c02e4621c539c3da5e978f22924f1103a868e9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.fbed85cd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.5.0-alpha.fbed85cd.tgz_1510605437718_0.7477636595722288","host":"s3://npm-registry-packages"}},"1.4.1-rc.28":{"name":"primer-forms","version":"1.4.1-rc.28","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.28","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"06ec279e4ef5ad3d2a0fc6a7a2b185a44f6515bd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.28.tgz","integrity":"sha512-Kg2JhTu+vKN0M8735LClu00vTtgisR2BI7owQ73WMmrbHx/x9OpeFdWxtwzU+A3nSQmZkatHtCSSvbUua1XKVw==","signatures":[{"sig":"MEUCIG6NTuUMmW7jiInWGYW8S/OPC3xYG5lQh/gTmCtQvLTWAiEA/bQ0hesvOCXZ/Nw+wSYPA022sNPvwi3vyFm0l7Vcp+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"06ec279e4ef5ad3d2a0fc6a7a2b185a44f6515bd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.28.tgz_1510613128165_0.1426157564856112","host":"s3://npm-registry-packages"}},"1.4.1-rc.29":{"name":"primer-forms","version":"1.4.1-rc.29","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.29","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f11ba30f7081c88e3f4ea17cabb53d73b9cb8557","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.29.tgz","integrity":"sha512-uFC7UlEmPf7c/mTnfObWv7QVONiRO01Wq2zPrBM0cvRgF3hWib6FNML1ynUxd+PMyiC5SJSvysE6mpSq3fjfNA==","signatures":[{"sig":"MEYCIQCAUxVCVU8pRjFwEvgpsF3qTN+odb7hDS5VOZv/ZuFB1QIhAI/v/jAGBDvP9Buh8WrM2i3PXsupbFtbq0+wyQeiBQMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"f11ba30f7081c88e3f4ea17cabb53d73b9cb8557","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.29.tgz_1510618680474_0.06116400891914964","host":"s3://npm-registry-packages"}},"1.4.1-rc.30":{"name":"primer-forms","version":"1.4.1-rc.30","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@1.4.1-rc.30","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3240f9dfc8fb513153b7526aaac50b46bfb09583","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-1.4.1-rc.30.tgz","integrity":"sha512-gghDZUlMgSUsgA6x6Ci4iV0sAGUg9pjvm4OlkI+ZikaTQ+tr1xLdY5Xlbs6w2OnNr2NjKe+KNAHY7loqNWfQVA==","signatures":[{"sig":"MEUCIDjX8QhlbBWa5k8VP+iYwx7s9HPtKlkuHXTIVd7W4wauAiEA2BxCd3icAzh9cUyoNFs3nZ/AkaSD19oU6Zdx0gFL050=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"3240f9dfc8fb513153b7526aaac50b46bfb09583","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.1-rc.11"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-1.4.1-rc.30.tgz_1510619231090_0.02886239835061133","host":"s3://npm-registry-packages"}},"2.0.0-rc.0":{"name":"primer-forms","version":"2.0.0-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0dfed829018f1a0ee1ea19a9c97d4bdb9ee5f452","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.0.tgz","integrity":"sha512-Z1w+tVixcq8UJCFL40xIkTE1aJD6gf7X0rSoAOZj3r59KdVlxCjlDtvBYRLWAiUcl+wfVmZgFL0T/iNDQXVa8A==","signatures":[{"sig":"MEQCIEawKzyqugj/r29cWRFXzyfDLmBRr46nBYOi45eKmxE4AiBO+5KsEOkYAxYmr+I2LILzCMxVHzwAHinfybV0C3+dLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"0dfed829018f1a0ee1ea19a9c97d4bdb9ee5f452","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.0.tgz_1510620673630_0.7992245627101511","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"primer-forms","version":"2.0.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b5f50506bb9f9916ab531119d813df7c0012a58a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0.tgz","integrity":"sha512-O94NQ8Y5tm+1MrpXQ96U7q4hZfudP1UzSF9xYSDofWZOc4ArtMpOefAAe7ZOFS0pKd9C7F4svXlSTC6HFhvubA==","signatures":[{"sig":"MEUCIQCWifvfI/euZHWmlTI3xb7sUJgimmkuk+0iAimqLdoHTwIgX7ur/pCDhKmCDW3otMZDv7jzYEJYFEcDo5L59Zu1N4g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b5f50506bb9f9916ab531119d813df7c0012a58a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0.tgz_1510621300111_0.3030139319598675","host":"s3://npm-registry-packages"}},"2.0.0-rc.1":{"name":"primer-forms","version":"2.0.0-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e644f646067e41666da670e694ed1098db4bb199","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.1.tgz","integrity":"sha512-MyZO7AsQTD5uPGI/KrXcOwIlsv2THjZDrcjA9KLsAoWgeFUNlbP86sn5jHGuYxAveYj78t+OH3tL/PzQUQuU2Q==","signatures":[{"sig":"MEUCIQCf8rnFxchQV8eWpq8Ox9pYeNBSTtPLBYSoLyfoagFx+AIgHm1BIdt+g1q8toYUspab6ko5KJ9aptvaYi6iv1tXpuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"e644f646067e41666da670e694ed1098db4bb199","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.1.tgz_1510676839076_0.8675586318131536","host":"s3://npm-registry-packages"}},"2.0.0-rc.2":{"name":"primer-forms","version":"2.0.0-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8a73495efa908d52314048a5f02a18364cd85864","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.2.tgz","integrity":"sha512-y9okHjTKSjthweQbgyWxhCdl+DV/UR6keQDfds6SZIHSquv4NhARr/GuTbFXM+iTFLSZQwgAvgb7MvbCeZH0Iw==","signatures":[{"sig":"MEUCIBElRaGo/7ZTTk+6VCyQdeviHIV57hnNwAT4+FtGjvRhAiEAsiXphPIDnXAYg6lRW9HdQW+fJcp5r42AfQgLLLFPd/o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"8a73495efa908d52314048a5f02a18364cd85864","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.2.tgz_1510679850481_0.4398417961783707","host":"s3://npm-registry-packages"}},"2.1.0-alpha.0076710f":{"name":"primer-forms","version":"2.1.0-alpha.0076710f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.0076710f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3ab4302aebdf516257a403a7fcf67de7687190f5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.0076710f.tgz","integrity":"sha512-h0bALG6EFPh7yJ8Gp8hT0Cs5R9W8OFGEAZmsX9gHz7TnHDdjizAuhRql8ceCSRnht94ivoRGlK/h+JPD+XRz8w==","signatures":[{"sig":"MEQCIAVzTKZh/KK0B5cAXRcocYMLMkaKUBwhonUnfM87HklDAiBainK4SpeGYI/5aD0Wmlq0+d8BCgGGO3VxJPptX1dv6Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"3ab4302aebdf516257a403a7fcf67de7687190f5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0076710f"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.0076710f.tgz_1510698863995_0.193016187986359","host":"s3://npm-registry-packages"}},"2.1.0-alpha.46a65560":{"name":"primer-forms","version":"2.1.0-alpha.46a65560","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.46a65560","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa35f1f0c98b6d10a60cfdf0c5bb0af0d5bd5442","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.46a65560.tgz","integrity":"sha512-dulpPCyUCB9nN4n/jD8jw6iVfcyGBVUn4U7pERT80PwhByJJTtJxozfWTMe38fd/ghL4w2W99CHXEH33ZG9nbA==","signatures":[{"sig":"MEUCIQCFR8T15Ore2sFakaU+q7F31A+WaSPnfukgy/XNsoZmPQIgFrEkDt1Rz0FZTZzkpsBlbLKTcwHRdyYyhRNuQRFwxxM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"fa35f1f0c98b6d10a60cfdf0c5bb0af0d5bd5442","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.46a65560"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.46a65560.tgz_1510701098572_0.3729757689870894","host":"s3://npm-registry-packages"}},"2.1.0-alpha.0bad1ef1":{"name":"primer-forms","version":"2.1.0-alpha.0bad1ef1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.0bad1ef1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"45a8a281f885b49be2d8e657c14450f7fa5d0470","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.0bad1ef1.tgz","integrity":"sha512-pE3NHYV5kkhzgBq4V3HhQfcyeljFo6KbTTEpeS/05PogCNaD/icg2QCfU3yZh+fWEUuDtoVUTFhVui+N5v0qTA==","signatures":[{"sig":"MEYCIQCcib/d9KlXE9DnAJeceKrSrVlenj0PouGo/hUTy6zveQIhAPd58WztpqFUHdLF1fYX9kSlSSdM79n/3Xc88Mkd/WGi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"45a8a281f885b49be2d8e657c14450f7fa5d0470","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.0bad1ef1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.0bad1ef1.tgz_1510765382781_0.8408764624036849","host":"s3://npm-registry-packages"}},"2.1.0-alpha.62bcf358":{"name":"primer-forms","version":"2.1.0-alpha.62bcf358","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.62bcf358","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3c9b5c1e5102e5bbbf4c5d3a6336f012ef2e0129","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.62bcf358.tgz","integrity":"sha512-snwN2l1QCbn6ctUQOUe31K1Ni7pvzGSxpuM2rVBSVnNl9XH1w0Fq6mkXQRTpT9uLp3WWopRXex3k6t3nfV2qxw==","signatures":[{"sig":"MEUCIQCeamB14MG/I7dmIiXPK97j4OHGIVfBiMbU2sKbC49coQIgeC+pd4Mt/PzyFgUod0wYRrx4C2H2hqqNygwdnLQdhqk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"3c9b5c1e5102e5bbbf4c5d3a6336f012ef2e0129","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.62bcf358"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.62bcf358.tgz_1510768405338_0.1475446787662804","host":"s3://npm-registry-packages"}},"2.0.0-rc.3":{"name":"primer-forms","version":"2.0.0-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9d140fd88de1b0f53c42c87d101110e50bc076d0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.3.tgz","integrity":"sha512-AxH6E5psEYnL01B0cKJkg+Gvtd467VNm2akhlqupgjwTlB36zcyOzdcL4cTXPlOBDIDAc/wbLQYOqdcFlymT6w==","signatures":[{"sig":"MEUCIQDaOZIKvgrdlFvhkvguelylfH999yCPImXJURD2Y72BQgIgOkEz/cXv50iTCT+kANVJnZguppcAZWmphsrjBU0czRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9d140fd88de1b0f53c42c87d101110e50bc076d0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.3.tgz_1510769789530_0.5827742260880768","host":"s3://npm-registry-packages"}},"2.1.0-alpha.c618f034":{"name":"primer-forms","version":"2.1.0-alpha.c618f034","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.c618f034","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"126a214588656ee9a464c969e1c19fdbeb790586","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.c618f034.tgz","integrity":"sha512-cRFOtjxc0KlzZ4bNHLBM2G48NouDpDAG6wqey89b5xlNOIC0Lrjs4E60uK11zdVTtFRidHaBoAiY/sna9P++aA==","signatures":[{"sig":"MEYCIQDk+3JuC9X15ktSCVya8A82T2Gu8QxLAi9Dw/dWWoRJYgIhAI5t/KU2HmFG2FWvRnKCBxhW7ism0ZRGpOuDA/xgfFJY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"126a214588656ee9a464c969e1c19fdbeb790586","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.c618f034"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.c618f034.tgz_1510770472972_0.0018439965788275003","host":"s3://npm-registry-packages"}},"2.0.0-rc.4":{"name":"primer-forms","version":"2.0.0-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c576ac94cd2ba4218e5e5d75530e9a2f323699a8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.4.tgz","integrity":"sha512-VKcAqujLmYjoiiIOWdrVbGAfoTpZha4nGM5b4Yug+h4zfH56AAB1siJGmkOx16kP+dyargD7BNFwoTjUanpV5A==","signatures":[{"sig":"MEUCIQDSuef34NoPYhIdtWQCR493r16H9L6VF+5Ju1OYCnH7AwIgDaJXZP7BDONMftWnFuP+bgNHDTIyfjt0rdLmmMP0D0c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"c576ac94cd2ba4218e5e5d75530e9a2f323699a8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.4.tgz_1510774577707_0.5073521235026419","host":"s3://npm-registry-packages"}},"2.1.0-alpha.b209ba21":{"name":"primer-forms","version":"2.1.0-alpha.b209ba21","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.b209ba21","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b96ab3731765276ee353bd38534999639f6f9ac3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.b209ba21.tgz","integrity":"sha512-WAVUUYqnaN/RS0bbHzBBGdL/tTNFI6h5J+2yu+8QnaJq9PkEVMMrIS4lEmPD/sxpKOAWH6pQHjlXTiBu0Zm+Bg==","signatures":[{"sig":"MEYCIQCNdMdpnU5rDPf3kOQj9isXpRX94fzkLmayPCdbZEs3bwIhAMs65JkNPCsgHNhG35CA9omqWWEh/l0C8r/XSP8j2MPf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"b96ab3731765276ee353bd38534999639f6f9ac3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-alpha.b209ba21"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.b209ba21.tgz_1510777554411_0.573146611219272","host":"s3://npm-registry-packages"}},"2.0.0-rc.5":{"name":"primer-forms","version":"2.0.0-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"83edded7e3d7acf8e7353ac557cb01cfa09b69f4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.5.tgz","integrity":"sha512-yH2lg1+0dvArew+wQvm2hod/igAr2U1DVpmnHa3MX4VNEKUirMqZ49OYMY2k8hEtdtUiLHwCjPqpN+q+go/u+g==","signatures":[{"sig":"MEYCIQClcJFL1G+clXpv/ww4nOtA82q6+K6wK/s2EtRh2aEwlwIhALc04VfNNrTPvy1OqMGHFiTNSBEsXNKglJaVDCtHp0ki","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"83edded7e3d7acf8e7353ac557cb01cfa09b69f4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.5.tgz_1510781132663_0.9271418161224574","host":"s3://npm-registry-packages"}},"2.0.0-rc.6":{"name":"primer-forms","version":"2.0.0-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.0-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"56ed72525bfc04919d28aa74328878611a31ee4f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.0-rc.6.tgz","integrity":"sha512-BXipJimFrHmOJrTHkcVRO6uXeIDvsRfuYbiS6FkwwcSLBrvlqoik//usddAdzYLZJZD0xiFHiT+jjeZ8/KvfRg==","signatures":[{"sig":"MEUCIQCWXTH5eeaT2VybTFwh3fQX7Uszsv+Fmdk/ZBtuJUN/hQIgeIb99D50lNobk8dz7X75vTInHP5rZIu/rCFbRX6TRD0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"56ed72525bfc04919d28aa74328878611a31ee4f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.4.2-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.0-rc.6.tgz_1510789074857_0.720446655061096","host":"s3://npm-registry-packages"}},"2.0.1-rc.0":{"name":"primer-forms","version":"2.0.1-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9377ee934903356d28bf2e4368a4742413928e16","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.0.tgz","integrity":"sha512-tDFZBQGE4N4ti2IoYrEBVKl9z4bldM8gSHmUlFiFp9KFRMXSCdFlv/256VklhjOZ0o7OIUOVJGmNq0rFd93P5w==","signatures":[{"sig":"MEUCIGOj7sswBVamVLiBY/9o3+7+zOlcdqsOxw9xVtwLE4TGAiEAtMe0nufNMPRPgEyPIVwkVpvncZRk8EYgvW/kGk68iB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"9377ee934903356d28bf2e4368a4742413928e16","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.0.tgz_1510789643329_0.4625653789844364","host":"s3://npm-registry-packages"}},"2.0.1-rc.1":{"name":"primer-forms","version":"2.0.1-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cb0ce10eaee5ce5f6349916b3d6282e2a56cd0d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.1.tgz","integrity":"sha512-8ipex3vctsP85ED3gKfq0DdfO17YtbUdblL+0Cb0tfGYdayQ7JBW7V4nCDs/BVKs17s9jSl/wuOHBWKHWO0D9Q==","signatures":[{"sig":"MEYCIQCQmlwPL4OrkLGlNJKS/H96+VSIHaXH7pgkalZVtKpf8AIhAPwPQq+JtRrN44JDQ5GKX9LO1X8rGudGCj826YAyWaFK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"cb0ce10eaee5ce5f6349916b3d6282e2a56cd0d9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.1.tgz_1510790171787_0.5463100692722946","host":"s3://npm-registry-packages"}},"2.0.1":{"name":"primer-forms","version":"2.0.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"89b73028fec60e03d95f8bbb16ebe97c0caa42ef","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1.tgz","integrity":"sha512-5uQNTnRIoueKFzdvQvC+qPfKTjn4zHsozGh8PeKnAlmeBMdxMsJ/r724pIZaZ9IrkhDfNwydVXhS1AmuuJJAjA==","signatures":[{"sig":"MEQCIDZdTcaPp0s5Ny0CpAh7rc8vmLHhABeZlN55OO9EQbiGAiBjCtPsaL0sttcYqkLR9Kzvu4nkmyX4sELosip+KjujiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"89b73028fec60e03d95f8bbb16ebe97c0caa42ef","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1.tgz_1510790869150_0.006811826257035136","host":"s3://npm-registry-packages"}},"2.1.0-alpha.ef159fe7":{"name":"primer-forms","version":"2.1.0-alpha.ef159fe7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.ef159fe7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85848ea9cd1cebca7cf2a07cd37f0e1f18c1d0f0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.ef159fe7.tgz","integrity":"sha512-mKi6Y4IfUoVR7kS9PaCLjrBb0D8Uhlz3KsabMNIZ6DI93TCi2tJYLoOg15XlwD1Xzef4XLlrvF9QSibUmKKOTg==","signatures":[{"sig":"MEQCIAwCVJeM1NWv8eYmbpbORHO5LjAdhcEdEe5uco/0NQ1yAiBhJtO6uyjn5lKn3NwBaEn9gBCujBmwSQSsMkfsMnj+Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"85848ea9cd1cebca7cf2a07cd37f0e1f18c1d0f0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ef159fe7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.ef159fe7.tgz_1512436331931_0.9041391925420612","host":"s3://npm-registry-packages"}},"2.1.0-alpha.da9ed3b0":{"name":"primer-forms","version":"2.1.0-alpha.da9ed3b0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.da9ed3b0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4b1bc61fcfe0499e3da202bc595a0ebd6574681a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.da9ed3b0.tgz","integrity":"sha512-NbfrAhmYxThMr1aSxqeNhK8dvJScUnJPk+GOqWFqk2gDsIHhFqehGSykrJisZMiUdEVsGIrnCumzioW/OcVNDA==","signatures":[{"sig":"MEQCIBPQ1oAAI9FnyFO0wZ/VdS4wIlVjVdaURdG9cLkomRPTAiBpyfyYbg7dYiFqK2k12cThKGM8AjawSymC+1+71vxd1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"index.scss","primer":{"category":"core","module_type":"components"},"_shasum":"4b1bc61fcfe0499e3da202bc595a0ebd6574681a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.da9ed3b0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.da9ed3b0.tgz_1512584385764_0.05510531598702073","host":"s3://npm-registry-packages"}},"2.0.1-rc.2":{"name":"primer-forms","version":"2.0.1-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dd1fd9fa5d9c8805ca9543a10c9745cf08704ada","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.2.tgz","integrity":"sha512-Vw0XyRNxlf4nPg/ARgcjRtIGuaFQdYmbiijsEjkUAGXjuce+3gwFQsagCZ6feHqutPY5fcQo4OHIVgZNjUSRTQ==","signatures":[{"sig":"MEYCIQCMrIKhP3X1akNVQlX8ygEpl7keR8O1h373mTlnHkouBAIhAMGZt5+3xrXjmpYL/ICZkBauMv1tOgAAx1LZc3/qjZKJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"dd1fd9fa5d9c8805ca9543a10c9745cf08704ada","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.2.tgz_1512678714857_0.2783255537506193","host":"s3://npm-registry-packages"}},"2.1.0-alpha.fb510a5d":{"name":"primer-forms","version":"2.1.0-alpha.fb510a5d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.fb510a5d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c8e0dccedee0848adc7234b5c6403657ffc8311f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.fb510a5d.tgz","integrity":"sha512-2L/nCcq/txXtj5SqDocEtPCIAxZ3KomswlaXfLUqBbEIw/1X3eBFBr1OMs9KAXgbdaeX23TClAzfECy9VJ4LFA==","signatures":[{"sig":"MEYCIQDrmQWgUtjqTtz54mm+ntyLGojxqWI54ETVOK/RBA64pgIhANpUe2GtjoaOpGblveoiCkx0MgeGvkLFncd39uSQGzFx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"c8e0dccedee0848adc7234b5c6403657ffc8311f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fb510a5d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.fb510a5d.tgz_1512682243138_0.6135424261447042","host":"s3://npm-registry-packages"}},"2.0.1-rc.3":{"name":"primer-forms","version":"2.0.1-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6aaf5f6e166ed44fd0ddf764e4f256d215178e8c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.3.tgz","integrity":"sha512-XvF9ddGpf7rkaA2oAENh7FfiHtIA422EE9hej8Q06x811EVrXaYBEyHj+XP+MPN+RBdaIA4btjOJbwKGLWEbpA==","signatures":[{"sig":"MEUCIDndU+u5mGD6xajikYRZq/i7Nc7HtSkl4Ep+gjYBy46bAiEA3LQBZVoZvYYEbLuK7l82g8AAFrr5p4YmtC3dG/zYeJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"6aaf5f6e166ed44fd0ddf764e4f256d215178e8c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.3.tgz_1512767020150_0.2930758651345968","host":"s3://npm-registry-packages"}},"2.1.0-alpha.ed73f8e2":{"name":"primer-forms","version":"2.1.0-alpha.ed73f8e2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.ed73f8e2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6fccc0f32d71008bb9df44c2a5bd0847f0b58746","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.ed73f8e2.tgz","integrity":"sha512-To4y80x7mUzC9JMy7CbcyCJgUF+C/etPu40d5s0uEJKIbhiIFMhaSHgDvl2UWD/msLdrk2ilswOvRK0yGdKs+w==","signatures":[{"sig":"MEYCIQC5dff8nwibuTk5dYdHVLouGJ+6CEgQ+YcpSXIoEkvzYwIhANU0oX0FQWepcYV0UvoPSrufGCIUW4GF7Iq7U9MDe/VQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"6fccc0f32d71008bb9df44c2a5bd0847f0b58746","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ed73f8e2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.ed73f8e2.tgz_1512774860054_0.6465110590215772","host":"s3://npm-registry-packages"}},"2.1.0-alpha.6d3383f1":{"name":"primer-forms","version":"2.1.0-alpha.6d3383f1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.6d3383f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ce91512dbb88a85d5aa31d274851f0287982f26","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.6d3383f1.tgz","integrity":"sha512-hAuMJGMeJPRp95o39ImkacF8fRuTlCS/HxFr2Y/8K5/AvnqSogeOEdMyn97XypNNSHTPcsCIvy8e72fUXGtwmA==","signatures":[{"sig":"MEUCIAoRLf6L9c+1Rs5VA8bsQqu9zBPgdKE6B7ya6U4DmbvOAiEA+1uxTdvb/gOxaVzqZBDTcTiy55mmJIlDXKNMpM4LnWs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"0ce91512dbb88a85d5aa31d274851f0287982f26","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6d3383f1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.6d3383f1.tgz_1513007412359_0.5505447769537568","host":"s3://npm-registry-packages"}},"2.0.1-rc.4":{"name":"primer-forms","version":"2.0.1-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cfc979d8da484f2b87e7f582504c92edc92d3692","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.4.tgz","integrity":"sha512-YwZ4jfL50Q/Rdl9sq285kKdUJehncWTrm6JGldj2Jpmuv1TaFMsdIV8b4QSqu4oTpi7BrF/XtcxqU41DzuxbxA==","signatures":[{"sig":"MEUCIAW3l8mWQI89fentGZWRIskONxo9YC1zRukjSJfgiSzHAiEAlrkLE91cbzDb/tJOUbeKZb0HTtMRnwwCw+N035hMpGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"cfc979d8da484f2b87e7f582504c92edc92d3692","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.4.tgz_1513007646794_0.3387085599824786","host":"s3://npm-registry-packages"}},"2.1.0-alpha.c69cc480":{"name":"primer-forms","version":"2.1.0-alpha.c69cc480","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.c69cc480","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f9cc6a3ab52c9c1c7f0d5a7402d0e1d1e37eab35","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.c69cc480.tgz","integrity":"sha512-ItF32GDtrc0Igsh4Ilm0bpzdu9qoizf5fC8JRXpHkYdi0rMldiNpU5JRMCX2gbsn64v9Y13WFXcZeY9EcRZwJA==","signatures":[{"sig":"MEUCIQDYG1iu1hcYW87u1rWNHr27TejSjE/Ippv2a6Sd5P86egIgebBywZYdT8GgfrJdr8qY2/DS8yt8ZETA2C7MXdQHS+Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"f9cc6a3ab52c9c1c7f0d5a7402d0e1d1e37eab35","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c69cc480"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.c69cc480.tgz_1513008575129_0.3037123077083379","host":"s3://npm-registry-packages"}},"2.0.1-rc.5":{"name":"primer-forms","version":"2.0.1-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c3f1e78bc727d929cedc8a8eaab0d178e22896af","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.5.tgz","integrity":"sha512-oEJ8usJlPlLs6KIZppcu2EmZZJuYntrpw5R0rjAONy5yfwNBMlk279v0kg/gbVGMNBs57LWPmYoj8S6eNcwO3Q==","signatures":[{"sig":"MEYCIQC8F85At0dkMXsy7QD5AY4Cr8U2MAbPBcMxvBibSbgDcQIhAOxXm6aoZm2W8T+H2qyltqmSeUj1FEkebnleW836dfjR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"c3f1e78bc727d929cedc8a8eaab0d178e22896af","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.5.tgz_1513009652449_0.9553498707246035","host":"s3://npm-registry-packages"}},"2.0.1-rc.6":{"name":"primer-forms","version":"2.0.1-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"266d6c0d97912c15b342d671164b0de86bd1a23d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.6.tgz","integrity":"sha512-KFWshlIc5CNBzB0l1xlsbk+NZhr2pxV+4McvWQYcA9oBwq60rXf5RL+Z9evoTZAAZyJVSSBwPAAemsv59ODkgA==","signatures":[{"sig":"MEQCIAeN1f6ULa8LJw36y36BVLFjBj/l2Or21nuUQRjlpgilAiAXyW7KjmeFdxwOM2HdYoXR+XHszRj8GmErfeXLcWMTMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"266d6c0d97912c15b342d671164b0de86bd1a23d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.6"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.6.tgz_1513625343472_0.5028081429190934","host":"s3://npm-registry-packages"}},"2.0.1-rc.7":{"name":"primer-forms","version":"2.0.1-rc.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.1-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a0126ccd63d38593ac20a975238a001b376370cc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.1-rc.7.tgz","integrity":"sha512-ZIOTPnOIc6KnbXzkCv/IEASKdMQUNTPaBNQ9d7Ni4r5lqQfKkv+ms1DxEiTrwlLU6r1Nhsv6e/AOPoPXZ5IuGg==","signatures":[{"sig":"MEYCIQCXhToFR6M0defwFxSx7bDPHRKIo5iW9R/UqnUpbADCggIhAMhKbfsVUTBren8RM5LhuxKs9zkTbo9+be9KjCYZ68yx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"a0126ccd63d38593ac20a975238a001b376370cc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.0-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.1-rc.7.tgz_1513626551370_0.722616835264489","host":"s3://npm-registry-packages"}},"2.0.2-rc.0":{"name":"primer-forms","version":"2.0.2-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"443b92f3d89e594a53ec6202cadb0e59c88f0ab6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.0.tgz","integrity":"sha512-tcyvzUK+T2SQaM+0g5xXk0E8Feyw9qQProjZeCHJG+wfMa3wDAbt95bm/tW355GahgeowUjZCc5Vq51OF5hg2g==","signatures":[{"sig":"MEYCIQDZPDrntdmMFW32p0GKq8F2W3//CwzQYRr20bN05yKA5gIhAJJ+eveQP5fyY2Lh4ZGBpH+QboA5SbrR31YGOQukQNwO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"443b92f3d89e594a53ec6202cadb0e59c88f0ab6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.0.tgz_1513626826283_0.9725678146351129","host":"s3://npm-registry-packages"}},"2.0.2-rc.1":{"name":"primer-forms","version":"2.0.2-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e8466e91bf23804bacfccb3ae118a07bf0cc1fb9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.1.tgz","integrity":"sha512-Rls5OmTpQOlPK3svCaTAoyZZbwWteesNtnHwy7dVDfrJ7dUwmGFoXgPdtwMcfTNhyPCg/oA/RF8dae+S+8J5DA==","signatures":[{"sig":"MEQCICIhndXPUlCY6BzV14xFPMbmGO3jkoLrE3Qf7TfcR7i9AiAsLfvJxBR0KXOKUgBuW5s0Sl/PFqDWnyXeSm1Dz9C3BA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"e8466e91bf23804bacfccb3ae118a07bf0cc1fb9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.1.tgz_1513640679171_0.1827920158393681","host":"s3://npm-registry-packages"}},"2.0.2-rc.2":{"name":"primer-forms","version":"2.0.2-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"71ac77af056dd91c4c60a0bc80af2d2fcfda42dc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.2.tgz","integrity":"sha512-2MXqLMyPzkKaRXNFOCA/WWa9DXjoFl0UWn1Th5ejT2XB/2iijcRvZYRseIwAP2iGq5iDkP9Jir9uxHc/JT/POA==","signatures":[{"sig":"MEUCIHgVXfx+tfm3BhHKWfagF+ckazDkSeFlALX+2upoHKe/AiEAw/6vYxsy6Pp4w98/Ma7EiiqC+XC2XEsq0YMyFOd+sOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"71ac77af056dd91c4c60a0bc80af2d2fcfda42dc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.2.tgz_1513640791441_0.8014662070199847","host":"s3://npm-registry-packages"}},"2.0.2":{"name":"primer-forms","version":"2.0.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c33898540ace3d79fde9063eef39655a2bff8fb8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2.tgz","integrity":"sha512-s2GQel0OgCyIeqx/na81TThYtnGQvBwcO/W8hSKRhIM/JqUpOPat3YjbOAcs+YbmAYPSZAdvKxbMEaHxwvO1SA==","signatures":[{"sig":"MEQCIHhA8P1o6sqtOJcx0BzLeYzKYCtNhjNEecCEvd3TWI4vAiAqGD7pi4Nua3CnddSZBLBEooUWqkdqlLA1X7fB7XHv3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"c33898540ace3d79fde9063eef39655a2bff8fb8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2.tgz_1513723154135_0.6712762601673603","host":"s3://npm-registry-packages"}},"2.1.0-alpha.3efde033":{"name":"primer-forms","version":"2.1.0-alpha.3efde033","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.3efde033","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e450e7213b77c66062e195c1d18a29392849e3d8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.3efde033.tgz","integrity":"sha512-nm3LGlx49EZCb8u1g5cU7HhySvXOS62Fh4IMs8/3nhfuQOV6SXfTjE7mohsx2mQgTXgOU1CpJ+GHcId6Voz3GQ==","signatures":[{"sig":"MEUCIC0Mz1Ew4gujDLkgDLLTnTAOwdJP86tc3gtD36gLwhaXAiEA7bvG+nfW92+nFqZ3twu9tVG+L3uesGbo/9l4MQeEsxE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"e450e7213b77c66062e195c1d18a29392849e3d8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3efde033"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.3efde033.tgz_1515021308064_0.9472798223141581","host":"s3://npm-registry-packages"}},"2.0.2-rc.3":{"name":"primer-forms","version":"2.0.2-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8593f39b09532118b131bce82c9bd42a858d5aed","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.3.tgz","integrity":"sha512-e00qZYgtEP/PQkcZ7WrgO05i/5ffIsv270CEGWT1ucrIOVmD+e3gmmSWTwRGxz3QQ0nFzXhwAiFCnaAUYTL2Ng==","signatures":[{"sig":"MEUCIQD3mmD5FHfludzez/JjsKn7amlLa/EP+WD0lc2V/ZdrGwIgO7qtsbgP2eDq3RyXPXInPaM5U+sriZcBl/f4ejLt1Ck=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"8593f39b09532118b131bce82c9bd42a858d5aed","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.3"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.3.tgz_1515112788442_0.566810299642384","host":"s3://npm-registry-packages"}},"2.1.0-alpha.d02187f8":{"name":"primer-forms","version":"2.1.0-alpha.d02187f8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.d02187f8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f913ea1ad2ab67335e5d572ff24ed727def1594f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.d02187f8.tgz","integrity":"sha512-9qoW8+Pr454pGgNRT8mkLMl93zdm6wMJAoWkc1b7aa288X1rfMauH/0A63/JX9JqTNJo1rAjBNg0aHApEp4xwg==","signatures":[{"sig":"MEYCIQDbwhmmJbxPZDcND2C35U+Ja0Xc0yfOkv2QiPNM58D77AIhAKJ8fUvLztCl6xxT04Snr20CDjMuAeoN7tktCAY4ZIeI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"f913ea1ad2ab67335e5d572ff24ed727def1594f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d02187f8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.d02187f8.tgz_1515166440713_0.03809621185064316","host":"s3://npm-registry-packages"}},"2.0.2-rc.4":{"name":"primer-forms","version":"2.0.2-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0715d553594ac7812f78fc73f552cb6cbf8698d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.4.tgz","integrity":"sha512-0EaXtWrv0TAwcVEwndeg08uvv/vT4X61X8ttKFW6wea2d0xDGg/ujqwNS96wIP7D16/CiAhtOjRMkyb4oVOwoA==","signatures":[{"sig":"MEQCIGiQS/0Wc58TSx8OmggTOVA+aGCDZVjTIAn4+GtiQuIZAiBRDicdYlC9aT05kWr0eZMHaZf3CJefGCMjdKG5TtkY9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"0715d553594ac7812f78fc73f552cb6cbf8698d9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.4"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.4.tgz_1515169641315_0.5183311805594712","host":"s3://npm-registry-packages"}},"2.1.0-alpha.aea4ff80":{"name":"primer-forms","version":"2.1.0-alpha.aea4ff80","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.aea4ff80","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c7aeafb78815d0e38c563332bae2521624a6eee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.aea4ff80.tgz","integrity":"sha512-HzBXaBpo3urf9ne9MCWG2Zn5kWBsclqLCsAoFm8QFiL7betOtk54SlBMSghoLax0ZMl4uL7hVJBcpZej2WGEpg==","signatures":[{"sig":"MEQCICZgFUCizNE8C5WaNVTh9pJvi1asE4eeWzTyllHYLHNoAiAQhWy95mvob6OD+28sUsx3yjMTBKy7kNM+8hR1eVcMuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"8c7aeafb78815d0e38c563332bae2521624a6eee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.aea4ff80"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.aea4ff80.tgz_1515189243582_0.2199103303719312","host":"s3://npm-registry-packages"}},"2.1.0-alpha.a134b9ac":{"name":"primer-forms","version":"2.1.0-alpha.a134b9ac","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.a134b9ac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dc9a39f67909ccfa1a72dcc3499419f4b4dbc95a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.a134b9ac.tgz","integrity":"sha512-hL6ELeW9uGXCRRSE6PvoP3H8k6aeSCjBqMBLKVm2UYFm45/OylTCd5orf6UEhlPp39kDMOtEEIFUKeJEO5B6eg==","signatures":[{"sig":"MEUCIQDhdMTPXMXT0wN/QTqO/TYVYiWx0e84DBT35QU/KDzYRAIgQFeNpRy2ywTf94N8KNZH3tc8bWgq+JFZMduSMTxVnfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"dc9a39f67909ccfa1a72dcc3499419f4b4dbc95a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a134b9ac"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.a134b9ac.tgz_1515193523257_0.06852286448702216","host":"s3://npm-registry-packages"}},"2.1.0-alpha.6ab46488":{"name":"primer-forms","version":"2.1.0-alpha.6ab46488","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.6ab46488","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ac3c1bd04c1501614ca1a794c719f4007b1dbbeb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.6ab46488.tgz","integrity":"sha512-H4sLsmSKzPSGvY9l4DnWur1uTATplk2b9w4BvI3eGthDDKyJ/JinFQJgAnvtfG+UBM9KFaqYC5dTW34m8W3fvQ==","signatures":[{"sig":"MEUCIFhY11DEykZdhRLwytf6Ji88BgOb/9iZLE3EdUMD0fLOAiEA14ag7bUZYkO9iEhQ00n2mDVFUasUFG+Vwd/PBmoAVSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"ac3c1bd04c1501614ca1a794c719f4007b1dbbeb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6ab46488"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.6ab46488.tgz_1515193828165_0.7594762318767607","host":"s3://npm-registry-packages"}},"2.0.2-rc.5":{"name":"primer-forms","version":"2.0.2-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"987f741267e1e6c5ebf87caf5d53339966bac9b0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.5.tgz","integrity":"sha512-FO1J4C58433SqL9LpdUe3iQbZ+TtNYgBvEMnLEed66WZ6usV2P4lQpjbf/qqnIq+cKKvqBloz3fjOx1CJgQQrg==","signatures":[{"sig":"MEQCIGuTOKtSZKE/TGfiJyWpWHvvpSL27ynBIS5bXSV1EZafAiANXLvHA7oSHBF5Qh1QaHeovOO85ehTvjQorn5I3Y10mA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"987f741267e1e6c5ebf87caf5d53339966bac9b0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.5"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.5.tgz_1515259172066_0.7670992056373507","host":"s3://npm-registry-packages"}},"2.1.0-alpha.d2343bbd":{"name":"primer-forms","version":"2.1.0-alpha.d2343bbd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.d2343bbd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"70eacdbcd0195d6869eb54cae69abb745b924f2a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.d2343bbd.tgz","integrity":"sha512-hYp3wSltzig5CtPZgWPzB0llYIdiJBerJSfiX0WCVjqCF2vvYXESTQeydlRyCNId5nsrdC/RPx7Et/jSG0Pg4A==","signatures":[{"sig":"MEYCIQCxnQcvjca5/PkwsZPBK9Va9rqwJtwWCbPqqii8xTEEHgIhAIdxCJkuCe9ARBLgA21+6Hggmgii3wxWEr8iyrN0OfLT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"70eacdbcd0195d6869eb54cae69abb745b924f2a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d2343bbd"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.d2343bbd.tgz_1515541201124_0.05995694920420647","host":"s3://npm-registry-packages"}},"2.1.0-alpha.dd122634":{"name":"primer-forms","version":"2.1.0-alpha.dd122634","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.dd122634","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f6883403c4c79d4ea62175c51b7c7b3456f6b71f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.dd122634.tgz","integrity":"sha512-lvP2DHyBgUC1SvG5OlGLiia0kw1GBVAtVl3xDVDgy4tN7mzxMtjmpeZ2ZgG+XMTJLHkflJOz2Zin/kQWM4xlLg==","signatures":[{"sig":"MEYCIQCm39h1+tVPnqLxfg86aBvldjymoXO7VTbZDerWT6IhygIhAMuB73iPh4lRCVNMHcxOf/iO2hqmQfxx1h6AIsrMvwdx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"f6883403c4c79d4ea62175c51b7c7b3456f6b71f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dd122634"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.dd122634.tgz_1515623518224_0.12596773286350071","host":"s3://npm-registry-packages"}},"2.1.0-alpha.9ecb500d":{"name":"primer-forms","version":"2.1.0-alpha.9ecb500d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.9ecb500d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3748c579d0b1d5615ac4256f92206ce92ce5bc16","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.9ecb500d.tgz","integrity":"sha512-+hJGdEZ74ch66vR+QL44oAOfjK+1bu+K5y5ULwjf95TPNWwow9SMVhlhy87Jmk4oXEOz96NsgDNkb/gOB/Vb7g==","signatures":[{"sig":"MEYCIQDes0YCIOdUsLMzYoeRirwe7SYttaqsqN0nBTT9q2xabAIhANBGF/ejXO5cvUfZ9vmndOPw2D+bli2iE7PIBPt7SMEX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"3748c579d0b1d5615ac4256f92206ce92ce5bc16","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9ecb500d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.9ecb500d.tgz_1515628319925_0.5547829216811806","host":"s3://npm-registry-packages"}},"2.0.2-rc.6":{"name":"primer-forms","version":"2.0.2-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e12929191cb0a6802066fde2a779895dc1f4fb50","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.6.tgz","integrity":"sha512-yrVAw8f/1jOoWgUWZEvsP+8IcRR9qfmCWleoc3BQrq+3FkjPFb8yJwHqaiHpTdBsSEAkHU9Tho69jgRRw4rnJQ==","signatures":[{"sig":"MEQCIHmZYANExB/of40SjsOJLJW52EfZQqwS0hkJJeOctRr6AiAJ61gDPbwE71TrXWzxa/GROdts4mFmjjGbK2w3A3e2Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.6.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.5.1-rc.7"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.6.tgz_1515714419498_0.5408969761338085","host":"s3://npm-registry-packages"}},"2.1.0-alpha.f64f6abb":{"name":"primer-forms","version":"2.1.0-alpha.f64f6abb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.f64f6abb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9fc30cbca4d560d17ab2cd8d4d08286c147adafb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.f64f6abb.tgz","integrity":"sha512-rwqT1Arg7j6IEWtpGVM3JUA85GPpbhMe7KUaBIMLWyX6itQpaoD/A3c4dfC/SjDUb51xD7LCq4v5q85CAKPzfg==","signatures":[{"sig":"MEUCIFrDimAoMdFGeQ/w3LTRekRFAcwfUDcNvkyEL7SbWDE3AiEArcykxtOFFJJ+h1GZxt6gp2LTd8BC05c2PG4xGJk30qc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.6.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.6.0-alpha.f64f6abb"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.f64f6abb.tgz_1515714467814_0.923147787572816","host":"s3://npm-registry-packages"}},"2.1.0-alpha.9c5fbfd8":{"name":"primer-forms","version":"2.1.0-alpha.9c5fbfd8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.9c5fbfd8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d8980013726781474083baa54d85792acf6d48fd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.9c5fbfd8.tgz","integrity":"sha512-ix3sBGyNHhAZXb1N+7Pvi/n6WWasxiCBmV2EZ1IRFyZTYpE/5tZm9Y5oZnbZw1Zc4LX0HlGVJA3OAXm/y19a/g==","signatures":[{"sig":"MEUCIEp/q7vW/FSDmZjF0O3oiy/MX78OHiRh5jAaONhbTdixAiEAsFZ15k9wkscldv5M8qPl+0Tk5WDpQbBYUzULex0rIwE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"d8980013726781474083baa54d85792acf6d48fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9c5fbfd8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.9c5fbfd8.tgz_1515776230597_0.6673315102234483","host":"s3://npm-registry-packages"}},"2.1.0-alpha.17592000":{"name":"primer-forms","version":"2.1.0-alpha.17592000","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.17592000","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e7b7b083658c9ae76232cf23b8b075b5e01e10d3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.17592000.tgz","integrity":"sha512-Gqzx/n9Y3ir0El7NOi9z4C5Tce5d7gda6uDuRTTMqDdVqLnRxJ92ZwcHhemAafdk3/uWkjG4sWiL0OXXdCkkDQ==","signatures":[{"sig":"MEYCIQCMbnP7JBvvAdMvgek+7elLzmdvR/C4AJrVS2XpDXM/mgIhAOUFOH6hHJ0eHxTe4LePKUv50NMUJrzlMf6nvbw/IiWW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"e7b7b083658c9ae76232cf23b8b075b5e01e10d3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.17592000"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.17592000.tgz_1515785838277_0.44638348114676774","host":"s3://npm-registry-packages"}},"2.1.0-alpha.359598ab":{"name":"primer-forms","version":"2.1.0-alpha.359598ab","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.359598ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"92b2e609047c48a14fb03ea76171d0aac7a87495","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.359598ab.tgz","integrity":"sha512-k7ItcUn1ZR2CNuosEMO4mdgBUJYDXdwE/UipPiXG9kwwm+TQtjwyYSr4YNhVWLZZK5zNBBilh7vQyvwR9CiZFw==","signatures":[{"sig":"MEUCIQCVmOs5fkophmX8ehSUNX5H4S4fXyduy2JP6FKQkvI4qAIgRgBKHsqUL0Cyhu2cQc0jy+ufg7fPFbMO80VGRLS6Vrs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"92b2e609047c48a14fb03ea76171d0aac7a87495","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.359598ab"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.359598ab.tgz_1515787082182_0.20287890965119004","host":"s3://npm-registry-packages"}},"2.1.0-alpha.52e89b13":{"name":"primer-forms","version":"2.1.0-alpha.52e89b13","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.52e89b13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ea72f374a14b1b036c8a6366ebad5b2b43600ae7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.52e89b13.tgz","integrity":"sha512-QRfUt3QORHB5ILNlKxEZB+gYlbLSWPGIBXz8wiVB+kJIWbGY03FBJkRT1JrJWnoqBV0t+LTKTEocVvy5vNFM0g==","signatures":[{"sig":"MEUCIQCyoCBzy67AteBIZ2TvJwP0Bxts/+A6aKr8mKTyAmAV/wIgLIK5u/NdpruqTqcTFRDvt+SQo3vQBZVfevPrsu//tpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.6.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.6.0-alpha.52e89b13"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.52e89b13.tgz_1515787520441_0.9646212081424892","host":"s3://npm-registry-packages"}},"2.1.0-alpha.c4869e9d":{"name":"primer-forms","version":"2.1.0-alpha.c4869e9d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.c4869e9d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"05df3f2efd5a83bcc4b2fb9a83df08e0f21e3043","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.c4869e9d.tgz","integrity":"sha512-hN5IG5DGxp7+DCBJOzx+8YdlS5320BZZz6DbqjTAn3isYr0HGWiA1WVhqNJ6L+HfULXqcvEie0NaYAfvxCZmFg==","signatures":[{"sig":"MEUCIQDEObwzjfzmoIl6HFV05o7dDUScmsoOMtR+HLr7ex/JLwIgBZoJpDwjNwXCZSotvrJsl258lWI19VVeY4GuT05DN8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"05df3f2efd5a83bcc4b2fb9a83df08e0f21e3043","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c4869e9d"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.c4869e9d.tgz_1515788298184_0.6611334625631571","host":"s3://npm-registry-packages"}},"2.1.0-alpha.a4c3524c":{"name":"primer-forms","version":"2.1.0-alpha.a4c3524c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.a4c3524c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ce8e113f41da41c0602ceb30fa3c358e8d83d24f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.a4c3524c.tgz","integrity":"sha512-WxKSKx0HjsM7yadryds2Pk+i2Tdis79qwT0noybVRYw8V9cM88fjhMwMQMxswYqD5XswxANg3rGHehozgbCzWg==","signatures":[{"sig":"MEYCIQDdBbslxPCnOtNvlNY4Ata8CwFLBQfUdLF4GUcQME/vDAIhAPorrA917BcguNqSYfO3cvOWiyNsQ0zwxv6AtW2BqCq6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"ce8e113f41da41c0602ceb30fa3c358e8d83d24f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a4c3524c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.a4c3524c.tgz_1515788865947_0.4708006256259978","host":"s3://npm-registry-packages"}},"2.1.0-alpha.7ae35186":{"name":"primer-forms","version":"2.1.0-alpha.7ae35186","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.7ae35186","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0e68e89411df248cbe370ef10e54a2b94bc2641b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.7ae35186.tgz","integrity":"sha512-GmBkgrRQfQx9rmU+h+q5g9V4N8D+Lyry7ojAu8stnDMc1hDMUcd1i7nGpeF6cdEXOXbJkd48BouHbfgvpyWDBg==","signatures":[{"sig":"MEUCIQCR5ncz8M/OWqvHd3/MhZDP8m2/geqNwdsvwGudFnGJMAIgY9/MqpxgIj1Jg/slVBxLEDgFVgyUvktjL86DPByf+/E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"0e68e89411df248cbe370ef10e54a2b94bc2641b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7ae35186"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.7ae35186.tgz_1515796676927_0.0009869111236184835","host":"s3://npm-registry-packages"}},"2.1.0-alpha.36307d88":{"name":"primer-forms","version":"2.1.0-alpha.36307d88","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.36307d88","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"578f9f5c3faaeb5ea14df84be18fa79faf97eddf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.36307d88.tgz","integrity":"sha512-T4IrD85HBm+QcZkHTWK2MqdWei8rd+w9kyQIMt98wkm2YVUSSREzBEqUj9FoViNdS/2jproAVAjlbuA9xikchQ==","signatures":[{"sig":"MEQCIDPFnkC9Tcc0sYu/YwKb19EZwHczPDXcBPF2o4mnYjSrAiAsF7i0vHZWJYAtJfNcbMFjfTr1zy7Bx/T4BFbriGsddQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"578f9f5c3faaeb5ea14df84be18fa79faf97eddf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.36307d88"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.36307d88.tgz_1515801320267_0.6648796685039997","host":"s3://npm-registry-packages"}},"2.0.2-rc.7":{"name":"primer-forms","version":"2.0.2-rc.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e9c14d357d16a10de3f217d5c2989023340bda90","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.7.tgz","integrity":"sha512-2XwCI/JZlBnyjjLNaM/Uq3Clp/aPWFiJ+gEujItbringseV4e/inVOSIvxSB/dakeTsObV1hj/sTNIeiTW6lwQ==","signatures":[{"sig":"MEYCIQD/M1VM/+GdnYKD6JAGdsu6HEf6jn7tc3J3+WzxepzuLgIhAOqfHU5oZbkdpRSi47sZX5OFgjRbrRluAYZalhGoQ6og","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"e9c14d357d16a10de3f217d5c2989023340bda90","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.8"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.7.tgz_1515801987860_0.5650360970757902","host":"s3://npm-registry-packages"}},"2.1.0-alpha.b6939e4a":{"name":"primer-forms","version":"2.1.0-alpha.b6939e4a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-alpha.b6939e4a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6ba03a9eb341769bdb9714de0232161941e1afdb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-alpha.b6939e4a.tgz","integrity":"sha512-6LavpN2F196JHn1rMxEuRw+m3bRJsvnPuGhwiB20KRRVVvJH5zwSSRgPVISlSELftRbgnWE3WB1tDgf7n45QYA==","signatures":[{"sig":"MEYCIQDj2gAGk/0FoCUMptPeAS2aWjXS7+zJOFeu1fWxgQRdAAIhAK55YX4mH1u3Q/sDXN/fQDX/RN9VqOhjxzOSQ8ilrXIZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"6ba03a9eb341769bdb9714de0232161941e1afdb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b6939e4a"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-alpha.b6939e4a.tgz_1515802413432_0.13159006042405963","host":"s3://npm-registry-packages"}},"2.0.2-rc.8":{"name":"primer-forms","version":"2.0.2-rc.8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ddf2fdcb7a65c4db80e31e2fad24cbb564f28f5d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.8.tgz","integrity":"sha512-EckpIouwCn30VSRCV5ZZgQhoidFInjl7X6Kcuj8S1/7aHv39fFmgVgNCHSUqiO6Ceb9zski+h8UvJg1aavB3rg==","signatures":[{"sig":"MEQCIAPcgcJY6y2RlsJD4+ACUeQs0ChA6ZGDZSlVm32BMcbIAiA3N4cAKCB09Ksw9u8dOMgtN+ojsZO0/PpfuaEYb1FJuw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"ddf2fdcb7a65c4db80e31e2fad24cbb564f28f5d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.9"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.8.tgz_1515802694014_0.0631535118445754","host":"s3://npm-registry-packages"}},"2.0.2-rc.9":{"name":"primer-forms","version":"2.0.2-rc.9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b0f7b95c794ac63b56b8eddf5ecb6a954fbc7c72","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.9.tgz","integrity":"sha512-V3TrqKmDHojOzxER8SAvZPjIYwa3UmLqPsa+znZESDZ/6QFfQiflIkTZ7svqMA2YfLdPjVEC6H75ZlMOfZFH8w==","signatures":[{"sig":"MEQCIFiZ0G4/4xp/hXKyvWx0npXt287fa0laBLwXGkp1mie9AiAysmfaysLhSLHj795X7z0MtrLEzxoais+/CzYz0evHMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"b0f7b95c794ac63b56b8eddf5ecb6a954fbc7c72","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.10"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.9.tgz_1515803206824_0.845394472591579","host":"s3://npm-registry-packages"}},"2.0.2-rc.10":{"name":"primer-forms","version":"2.0.2-rc.10","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4537cd4bfbaa2df27ad0863f3e4b8f8cbffb46f9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.10.tgz","integrity":"sha512-GKHR5BOvoU+qP7kOO6Zd+x2j8BLpJ7HTkvRYH8NKs9fn6FaPNcCVDeeewZTl7vx8Mhux/aH2/87LLqTFqelWrA==","signatures":[{"sig":"MEUCIHXYWcetC34+pjEPaLJwkW0aXbQYeplEmSwIOkylpIZaAiEAyMUgq4lSulWKkJwgcSUTv9vitv+JYipw00EHX39jJeM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"4537cd4bfbaa2df27ad0863f3e4b8f8cbffb46f9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.11"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.10.tgz_1515804030653_0.9958759229630232","host":"s3://npm-registry-packages"}},"2.0.2-rc.11":{"name":"primer-forms","version":"2.0.2-rc.11","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"87eea1a13d142366cc1442c960d16945b34730b7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.11.tgz","integrity":"sha512-D/eLJpQapuOuDSsZb0+07UGcBsGEliqpSXB3uu1WQhN38kzfZMbt/G91VCFsP+9aa5nZkFSgFsl2nC2YsbTzfA==","signatures":[{"sig":"MEUCIQDjiVv+EPpDKmFo+VjWrdvN/sjbhesbaIS8+p5BZ/0UnAIgH5P7ExCF4xIOnW5TRBl56SwLud/bNLc6JDgd85MsLm8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"87eea1a13d142366cc1442c960d16945b34730b7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.12"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.11.tgz_1516166131292_0.945881096413359","host":"s3://npm-registry-packages"}},"2.0.2-rc.12":{"name":"primer-forms","version":"2.0.2-rc.12","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8e1d27efa4328889dd128c1c551cd5cd92ea45ea","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.12.tgz","integrity":"sha512-059+GO2JHANyat0+ak3BgexmCubRBlmFtAUjlmJN8HuHuVZGpc0TdIvrK8/9AsZo1OyzK5SJQ8F7nlW1nFQ0aw==","signatures":[{"sig":"MEUCIQDFfrlpd55lZ3fwDnA1od76/EHQPYzfkCbh5d9Mk66hdAIgayUtWhYqgv48uj0QGrt6bMIx/wbLU9CzWm7BRveaXTE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"8e1d27efa4328889dd128c1c551cd5cd92ea45ea","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.13"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.12.tgz_1516231433130_0.7641283017583191","host":"s3://npm-registry-packages"}},"2.0.2-rc.13":{"name":"primer-forms","version":"2.0.2-rc.13","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.0.2-rc.13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0aefac23f21c09a9e09b5618c01e2440e7d6670e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.0.2-rc.13.tgz","integrity":"sha512-Q5CARAOikgKYeK7UCmo/aJRpV4/RN8onQzOCH580OlPIXvKH350HE8095POV+heHGcyM/7s8c7eA0CowiPB1+Q==","signatures":[{"sig":"MEYCIQDT5tKivXrf/KLepDd9suAXF8vjlu8FzpIaqS8vMu0pBgIhAOWyClFPJHvBjBcUAr22d36klI9X6S2S+mKeXno65H11","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"0aefac23f21c09a9e09b5618c01e2440e7d6670e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.1-rc.14"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.0.2-rc.13.tgz_1516232796339_0.31698818737640977","host":"s3://npm-registry-packages"}},"2.1.0-rc.0":{"name":"primer-forms","version":"2.1.0-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"789c080b2a7be913cb3ac7f0122e1fa068e0ba01","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.0.tgz","integrity":"sha512-FrDOXx5ozyCkeVXCSded3cL9hVUYQfry9qZvyh8kcWfYDfuD3ker9JP2kOAMSnSUcmWUUvS/GZEXxHe7qShOhg==","signatures":[{"sig":"MEQCIAkKwkC2XqAT8rYikaEXmovTpSqAn/JRaVCkL3rFokv/AiA1jzA0ZJKGTYL9fnDvHu0HDoQxr7vaywTwUSz71MhdxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"789c080b2a7be913cb3ac7f0122e1fa068e0ba01","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0-rc.0.tgz_1516234053577_0.8592874123714864","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"primer-forms","version":"2.1.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d27b4bba8bd214a097fe8a5615ed6837146feb2d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0.tgz","integrity":"sha512-evQ8lEX5lDsV/lHTKi2/0+OI9RQl+b3NjLnRGx+zxRZZMEm/W7G2+86r5dKBbNC6akf0vdK26JzDfyxv6CoKMA==","signatures":[{"sig":"MEUCIBhGFgQ6LalquwZq6LmoLeA74NuGgIqS8l19ClDzFT5pAiEAiJeKdC/x4osNKb9aB9KCubGIgdP1vIzLihKlwdaHMOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"d27b4bba8bd214a097fe8a5615ed6837146feb2d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.1.0.tgz_1516236202913_0.7085897189099342","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2fffa26e":{"name":"primer-forms","version":"2.2.0-alpha.2fffa26e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2fffa26e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5b9a5213bfad4f4001f3810c396270d8d683039e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2fffa26e.tgz","integrity":"sha512-lm8RNCk2TvU3EZGGHKuSVXmX3KpxfgiZaG5IfYEV5G8t8Vca5yFM+y49EaqM+nX8FSF6DGtUF7jeFI9+3VTdPA==","signatures":[{"sig":"MEUCIQCcPf8nitN8GXoRZoDVwQkjcnu24JamxXK1Qal0m2G/8wIgNb5+SFQajua3eCRMA7Q8Ao7XH5dCfnUXkE6d3MBUD50=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"5b9a5213bfad4f4001f3810c396270d8d683039e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.2fffa26e"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.2.0-alpha.2fffa26e.tgz_1516300588051_0.004052066942676902","host":"s3://npm-registry-packages"}},"2.2.0-alpha.66dd47c0":{"name":"primer-forms","version":"2.2.0-alpha.66dd47c0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.66dd47c0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1c2002cf16a06020ee0aecc9f0035620facb1549","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.66dd47c0.tgz","integrity":"sha512-enSMgh/zpAfgiCnx+dyFHlBn3AR+EOsEuW2QlHEA9YTuVRou5+eKp2FVdQXu9o4x2v2++plw/4qFNJwYNGIZHA==","signatures":[{"sig":"MEUCIQC1mXlYkMWGAwE3klJv3l7wkWFBgFmRur5rKzdlxj3zYQIgBn3EB+1ih2FImsBYLyvWEUzn03/w2lnN24fjdsRFsII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"1c2002cf16a06020ee0aecc9f0035620facb1549","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.66dd47c0"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.2.0-alpha.66dd47c0.tgz_1516302234657_0.8181122539099306","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e0fb693c":{"name":"primer-forms","version":"2.2.0-alpha.e0fb693c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e0fb693c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"mschoening","email":"max@max.wtf"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},{"name":"muan","email":"me@muanchiou.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"db5bf62433bfd13b4d221270916591545130602a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e0fb693c.tgz","integrity":"sha512-VwTtiFwr5ZqgFzGm7NRw2mafoBob+dsiMpCxGuFp3WfFEVd9FBJs3fer1AHrd11UbPRVuGQccgwOUuytV10hmg==","signatures":[{"sig":"MEYCIQDAtPjRwc4VVrQ16Mc9ZHK96URZeILtoshjADvIejEIFQIhAOalB4bvJ4QYJpoyzc1yF+bduh2V1ZZ8jlFJS3pK03+h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"db5bf62433bfd13b4d221270916591545130602a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e0fb693c"},"_npmOperationalInternal":{"tmp":"tmp/primer-forms-2.2.0-alpha.e0fb693c.tgz_1516311733555_0.13834031904116273","host":"s3://npm-registry-packages"}},"2.2.0-alpha.16d78454":{"name":"primer-forms","version":"2.2.0-alpha.16d78454","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.16d78454","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3a645a262e3d184daf9c3a25a2a92d8543f5481c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.16d78454.tgz","fileCount":11,"integrity":"sha512-8iUo3KVNCjDC9iqmhLaZdXuWcBCToWclC3xdmKRK1riYAO7efVy4yiowFEEWlfMEm516mF1Owdd1PvE8BgbXQQ==","signatures":[{"sig":"MEQCICfh3HgOctc+KJUPf01KpnYqQaVJS+SZDA8tcTnjgdwUAiB4wLYrr2TNF0ZXJRgWYgiKHxOEB2b1HHXciUpsf+LkXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3a645a262e3d184daf9c3a25a2a92d8543f5481c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.16d78454"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.16d78454_1517992111566_0.00372976792122115","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d42378bb":{"name":"primer-forms","version":"2.2.0-alpha.d42378bb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d42378bb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"80389a613674ad78f08ca27597a2178aebe9cf50","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d42378bb.tgz","fileCount":11,"integrity":"sha512-5Bp/+gOKsUxl8L0LLW3G+5OgZjvXGKP45eb+tiNh/G+cHKC0I1BeLD1dRuvGHEui0ZweHAKX0PZkObUnXsyDNw==","signatures":[{"sig":"MEYCIQDCBW0/CI7zuFanB7hgDiifrf8akwxBwE4DVJizchJOIQIhAIRvLEiuEzjoZs5L4//B/H5a0Dja3tJweWSX8NhO0wAA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"80389a613674ad78f08ca27597a2178aebe9cf50","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d42378bb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d42378bb_1519689947664_0.5572233029718809","host":"s3://npm-registry-packages"}},"2.2.0-alpha.158ab340":{"name":"primer-forms","version":"2.2.0-alpha.158ab340","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.158ab340","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c70513dcbfff97e8457739cc0ef995456827f4cc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.158ab340.tgz","fileCount":11,"integrity":"sha512-mTdaz+qAqUcqKz6Vhflp9czO8pCJJriyz8upntz6/8HI6j+j42XF0mpJvQ+MZ41xQMkENL5x+MiO8I1Xz8K72A==","signatures":[{"sig":"MEUCIAv0/GsHn796L94YN2i17ZMNKfsCjyY3Yi6DuMDzpKVDAiEAkvaQzSEtXBuhD/9mhVJXu2sMQ/bp0UFT034uFlz6ap0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c70513dcbfff97e8457739cc0ef995456827f4cc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.158ab340"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.158ab340_1519749864253_0.9578966497819987","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c62bc878":{"name":"primer-forms","version":"2.2.0-alpha.c62bc878","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c62bc878","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c82b43ce762aabeb6b794f1ef74edb98ff6f21c4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c62bc878.tgz","fileCount":11,"integrity":"sha512-n5du5FJrYdcsJmezqOrz8iDVdnh6e7mCXxK0aj0uP8GA1N+J6+G78H8FSriLWL2hwTddc8xVj7YEp7Mmk9NAYQ==","signatures":[{"sig":"MEUCICgAE+wDhbg7HRyMZ2rYmfLu3ZAF6LobvzmVSqJ0qAmzAiEA4akGajRRhlP4XWRe6CE0Wafg4tKVOeEeHMpqb4Bb4WI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c82b43ce762aabeb6b794f1ef74edb98ff6f21c4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c62bc878"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c62bc878_1520275160715_0.8341338344697731","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1f08d58c":{"name":"primer-forms","version":"2.2.0-alpha.1f08d58c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1f08d58c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aed44e24241385e7ae62d5ab307e0b64c243ab46","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1f08d58c.tgz","fileCount":11,"integrity":"sha512-VprSL+wnxYQ1lUvTulzrLbr+FKNsyk/hC3NLd4VQ1ZHYFMKiGVa9pAap9tD090J37TS6g25WCkut0d7lscKH5Q==","signatures":[{"sig":"MEYCIQCn8eC3nnAKeo9u2/7d7Ay6Ok4bexcB96f4S3WiMhyLnwIhAOmrUE3rueq9kRAolTiCfQCe8NhYmLCbRqQwaXBHcDgH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"aed44e24241385e7ae62d5ab307e0b64c243ab46","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1f08d58c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1f08d58c_1520276736944_0.10572527496308148","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4633be4e":{"name":"primer-forms","version":"2.2.0-alpha.4633be4e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4633be4e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"26c36bf35203ef95a2b702e46d4dfbecfe023968","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4633be4e.tgz","fileCount":11,"integrity":"sha512-vdGijzsmAP1Q65OUNbVu1ibqjhvs8Hc0LfjwvY+Or61jdRerSwdFi6lFnXHdoE3duMqfZEOEr7OzE1on6dJ6jg==","signatures":[{"sig":"MEQCIDHiqgQ+Vb0sJ3IuoWwrWW99YtLzE4AqF2Do/7lKMGnHAiBZUmG0D/xGBkAWp90FBaTqOtNNAZzpCfS8Qm4vEq8A6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"26c36bf35203ef95a2b702e46d4dfbecfe023968","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4633be4e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4633be4e_1520988066624_0.7105356602534869","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fc637600":{"name":"primer-forms","version":"2.2.0-alpha.fc637600","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fc637600","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6f919cce85ee5f8e4b3c7cfba8f9b8107ea692d2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fc637600.tgz","fileCount":11,"integrity":"sha512-NySm46B/MA82e0lGXe0FHwaByDcOUzUisFz4bgujcYnEZ2MMBtqDKmMX0N1ZtzvvrNCKLoncvCDm1aRCVxzssg==","signatures":[{"sig":"MEQCIBzs8iocPX+NrbhBT4DmT4y9nJpSAYRrRk4iJ88qpzTLAiAbxlpPQHs/SdmKAdXqHjp59LG8FT5AolFj7cT6Tm/5vA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6f919cce85ee5f8e4b3c7cfba8f9b8107ea692d2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fc637600"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fc637600_1522106585092_0.79630811253998","host":"s3://npm-registry-packages"}},"2.2.0-alpha.64d43fe3":{"name":"primer-forms","version":"2.2.0-alpha.64d43fe3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.64d43fe3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"643f4e4aad510de9f4c21cbb870450ae2228a3d6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.64d43fe3.tgz","fileCount":11,"integrity":"sha512-g3aq7J7llQczMhZF4MoOnMtmDAs+alXGn831L573ErmuI2OcX/tc2KvJdS078xBhJ0/24WmFgai6kjUTmocNEw==","signatures":[{"sig":"MEUCIQDjZXDtjHGVsv9sfYQCA2XoUP0BD7vXxpLckOS0l8IBMgIgaZFj2RHopfKMD/G34uXONGajKCOlp1Ln7kGlgPM70xg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"643f4e4aad510de9f4c21cbb870450ae2228a3d6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.64d43fe3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.64d43fe3_1522106855979_0.8903593803530783","host":"s3://npm-registry-packages"}},"2.2.0-alpha.87149739":{"name":"primer-forms","version":"2.2.0-alpha.87149739","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.87149739","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d06b97e4123e5461cc0fd1d611e209284c7b1bd9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.87149739.tgz","fileCount":11,"integrity":"sha512-CJZYfMyuMNevMbnA3SgG4Sv7rG5TlvChCNmrRHO+BZekc40uHn4DjNmGuoVul561T8GmrVcxKH9A8K8r6XFnqA==","signatures":[{"sig":"MEUCICMxaxNEvGtG3TBa/0r2rAeYesq1ElxoNpwMp9h76LhSAiEAp0ywmlX0sLm+PTy6ERug2e1YkP3JJqijRvHDCQpTTxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d06b97e4123e5461cc0fd1d611e209284c7b1bd9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.87149739"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.87149739_1522171432930_0.738606268888899","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c7d94705":{"name":"primer-forms","version":"2.2.0-alpha.c7d94705","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c7d94705","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd37e17c5918db2405597d25999e52e26fda75e2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c7d94705.tgz","fileCount":11,"integrity":"sha512-MgS2yvS4uXjDkN07FjmGtX+WE30xc4LKRJ2Ax+1K9kX5C5OKyy86e/rj+xGPXRLcUBovh5xepDfB82tyJ6YSQw==","signatures":[{"sig":"MEUCIHUGriVdQUUqFXdX0KvpbEyJUTYHZqivWKiNeHQ6OTZlAiEAn/A8jV4OucW3pTX3thh2p1x3SrJWpf/yPkrSJawcf/M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"bd37e17c5918db2405597d25999e52e26fda75e2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c7d94705"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c7d94705_1522172259890_0.08610219398046959","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1b67c66e":{"name":"primer-forms","version":"2.2.0-alpha.1b67c66e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1b67c66e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6efbeff236210be65b5b2645007bc7c6eca1004c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1b67c66e.tgz","fileCount":11,"integrity":"sha512-zZR0ZCBZr5SisPWb1X/IdcI133mRHQOq2wVXNJfKQWMdePR2AW5wQHQJVhYUFS7HaEKtHe6dcmiMS0T/tKg4cQ==","signatures":[{"sig":"MEYCIQDEkKKOrTP6decznTmIRZMtHCFGbpNMhUUpQHs8KWcEMgIhALquMgkCc+cB9fOTO2/98iXx2Mgg3MWFNI+xKwt/ZL8n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6efbeff236210be65b5b2645007bc7c6eca1004c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1b67c66e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1b67c66e_1522191946112_0.6831508927230938","host":"s3://npm-registry-packages"}},"2.2.0-alpha.60a6ac26":{"name":"primer-forms","version":"2.2.0-alpha.60a6ac26","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.60a6ac26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2bdec867e2feb2cceda16095ea2555724bed23fd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.60a6ac26.tgz","fileCount":11,"integrity":"sha512-vECbVss6X8MHpijCvZan+Wx+BmArvqDUiB2oIpdRR573UpgwFKYmbOag/DGSMGYOQYNRGwYvogJk24/edODbpA==","signatures":[{"sig":"MEYCIQC+eaKt1BO+G6utECXULVfpkEuTzPCZXf6mJ9iITo3/lwIhAIzkud5qVx8tpL1VaDW0ebNWXRJZTQoNzUNgaEkdxQp+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2bdec867e2feb2cceda16095ea2555724bed23fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.60a6ac26"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.60a6ac26_1522947462135_0.5174906551600975","host":"s3://npm-registry-packages"}},"2.2.0-alpha.de4aefb1":{"name":"primer-forms","version":"2.2.0-alpha.de4aefb1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.de4aefb1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cd902b6190a3140b10fc79389b3eb0624e4a62a2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.de4aefb1.tgz","fileCount":11,"integrity":"sha512-eovPhCR9VSGMeZ0nflu7+fO/LiV3Hj+oNm23tK3nUlridlRP2ikfgjVbZEKG0FuHq+DSeND2oOFlNVdZtm9FDA==","signatures":[{"sig":"MEQCIHA/qqwGTvV2S833iJUNUJqicnpBaoTvGZW+gPrbE5lCAiB3rKduba8ylp3jg7YGO1VtPQHbr/4PqxuPaRVqwvZvOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"cd902b6190a3140b10fc79389b3eb0624e4a62a2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.de4aefb1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.de4aefb1_1522951006845_0.108668924085223","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8c501390":{"name":"primer-forms","version":"2.2.0-alpha.8c501390","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8c501390","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e5b019baefcf5e62c35812299ec0163e71b77f0e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8c501390.tgz","fileCount":11,"integrity":"sha512-lpQimc8Sy+Li2c8ylCJDQzP6ZgDBiZ4WnB1Axsfc5PyDl4nkOGe0QJ66BFDTfMq+ZRROYc21NTLNsqYEVbFA5Q==","signatures":[{"sig":"MEQCIFLvjS/9mHJRd51c3T3OSLXYXxG5dk2WLadGBMjkB1rrAiAOki/VibZMnPwibkdmb5Sj0h9bxLKyuUXaGvmUrFmNXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4ke+CRA9TVsSAnZWagAAz9EP/j08HJhlEUI1jhPpZ5up\nzx5e7nemPYjHSL0PJYIIXTxiegEnIBnesxfvbwTQgm1+jzNCjhxA0EK3dnVr\nP+k8nPIZb4owS8qMQzJhHPXuTPFugZgHZA2IdBb9GkQcc5HY3SSfqvGBfc2v\nOKyUbiIu/5tOP9+AE+SNf8OAR6udQghuMT9KQ+QbJAkFS/ilHBRTUoU3hN1y\nxqGdLrkGOkoqG2mvJzHsk/lkPEK15g8gyHRGwmaya9li9dx6zgIh1pNHGeIa\nKYtjyUzRS8qsjqXu5mB6O0gfxGLz42O00tt5Um+j5q8HJKIE9ZpxVmclaLIV\nd+fKZ7I9sXylX7lufQ+lohDpVN1VvxvGhBDL5Q46Eqmkor3HLwSXgLxfI/AX\n51Dm/pOQpjmhsrwrFLswCR+7NQkAVdj4C9t9WTZ7Zo792IIBrClhotY1sRkZ\nfWrJeD1SbdNJHMRBhj22iFsUZGKWHeGcCcV1Y3TDLYqkjMy0ZKccCjZslc6e\njFJqT+7Rzo9GuFEHSZWOJGHWgsXPMClhwa/395wGMb++oHjCkw+508/ekzMI\nnIUyQg9riXZzMkx8tdaRtBFHg8nYSz2feSX2ewRxDJyOsxhUri+ObzTpOGuI\nkaLwiS4VV8NgtNMXn2wRuT3KEGE+OtIQReFEUfJ5wnT2oO/IWUN2w0225mwh\n9YdG\r\n=atfc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e5b019baefcf5e62c35812299ec0163e71b77f0e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.8c501390"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8c501390_1524778942000_0.31504035762895866","host":"s3://npm-registry-packages"}},"2.2.0-alpha.aa8e26c1":{"name":"primer-forms","version":"2.2.0-alpha.aa8e26c1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.aa8e26c1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2ac77a5417fe05c8346d4a714fcebfa101fe7156","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.aa8e26c1.tgz","fileCount":11,"integrity":"sha512-iAVARUh2M9jt5HBw78bxJzfdJx2E2jdG4qY3hRas8kk5k43FsdhP2YO+q3lS0ZHWtyjlyhhpMFakedZXamCxLQ==","signatures":[{"sig":"MEYCIQDz+Ik/SUxrVQGPR0Liv+nOl8nm33q3sLE2LlC6IPeU/QIhAOXZsEdNQTR+kK6Vtb9xKorZ6aYKalw2sUqMy3cyg7/g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa4kiyCRA9TVsSAnZWagAAPvQP/Al6puOIdrqygZk/zBEL\nSVheVvcf4XEzHL7UtMPqtMn1TwoV5jFi3UnYtMkYULbEof/H39ZU9yUB4rxV\nFDCUBe9AYBmi0j+3r3g29hVeWFgn7sl8/TUIYdGx1KVxnli3inn4pvr71FeB\nvCbctEuz3+NeLu3lJFRxlxvmPgYMH4VifcxTDbWEj3dYEGfJRV2MJHMPf9vb\nPP4VUhz+lmB3/5FmVSIEQlVQWHyc3oRD6dZbps1UtK8Ui+CJxKV7WMyReZ7X\nFRg1NefhBPoNwCIttwPRXfikp14XfGGXiIM6VCzMQMgOvacnneNUa4tP1OIe\nz4Zz42rGOz3fEMk/DDl/XApnjMgE/LmSP08gVNhwoA/kU/RiJvomk0pRaU8b\npeYVXVQBixWrdLplOpniUGxCraywYbewU0yLPSzpWMHGxjQcDB8gCKicyV1g\nBt62wwmW/3dCvyv2mdviarbb6ebGivVCSRn4CZekTT0qZWz4utjgq5Hx61JW\nJOVJMo2kAODtULyNg+3qywRb/VmE5yqcW5vaNs1nrDeQ5OVX0HU8XJf+IqwT\nCxqpXZMjG8ORhyRyGmzWnG8V7mZOlNYrMouuSSVzCfF+pgR5yId9wNY685ae\n8A1XVJyUeM76vXl/iTySA01wlxt8cKqh0daPwohaNR7HfRYCs8m1ChrwoxV2\nbvwo\r\n=vSD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2ac77a5417fe05c8346d4a714fcebfa101fe7156","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.aa8e26c1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.aa8e26c1_1524779184990_0.6029208992726773","host":"s3://npm-registry-packages"}},"2.2.0-alpha.cef32931":{"name":"primer-forms","version":"2.2.0-alpha.cef32931","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.cef32931","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6af666a524cebf12f3bf75cdf8b320daa937bf17","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.cef32931.tgz","fileCount":11,"integrity":"sha512-lLnAzekd+nmU2O5kdbnaMs0DqZhlByEk2azNutx6Qi8uJ2U1jV3nizSQ+IlrPHR4/RCiP+6M/Vfv/Kv5EUVb8g==","signatures":[{"sig":"MEYCIQC325sA56Roj+WR36v8VutzMCYzbinzA9RpYkN7gpIyyQIhAPdjGuAnEi4CYq5f2pWusMXxg64RU3g8SghB5J7i8Xqz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa47QtCRA9TVsSAnZWagAAA+0P/RnCV6lmkSsj1D0qmMgH\nJ+sUf98b1I5f9Rb4Y+J5ciNAH6wTZQB/0K6UyJq4NnvHoMED7Mi5a0supnnI\nTIk1dgojSrNe0SfO0i5fz8GVRTIkCrYMTRdVmG4GAt2PMRRLj/tCXxQn5Xxi\nlPB43PUiT+s91z0rPAbisgrrEotmRdXzVrg0CzXLgyxRci7+Ej4ma1iYmOrN\nfJlKt6TyDWWtv0xeN7C8rf78uwXcv/0PSs4g1FFznMGAMK+JqC7ZLkeaONuy\nwqya1odvFnQR5Hie6LWCVybfTeWRJMXDWL+6lo9lnaHqNZppe0VIvY1/iDe7\n576D9ovcZLndUtOkpM9VD87Dxjk3/AqLakh++VKQiTKuZZLEjJZNwMl27/nD\nrd21CeEEtwJ2za7C2orl8R7Mj7OFJRqJt0/SquEceuHfnvWAoI3QxhEzIXsH\nfVjhtpsJmKvkjqiK6rWDci44t0m1LozYY14gMRpoFjeAXptkLvT65qu8sBGl\nO5KCVWCigHETVqJ9UD+Ub764tYdw9DZRjI3l8bnAx2e4JpU7UQ0BWIsgQDi4\nUJO0H0D1Ya1Gl2D+clfToHetGBbfBkLv5+kbsV+pv6Ozn1XVYuYsgp+wyH8h\nQicjbStnXF+7GbKA0Je7bw6fSpuAW+UgKm3tef7OIWRZb0hbnYk4qtSRvIzA\n0+gg\r\n=tmmM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6af666a524cebf12f3bf75cdf8b320daa937bf17","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.cef32931"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.cef32931_1524872236435_0.9667578805866108","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fefb3404":{"name":"primer-forms","version":"2.2.0-alpha.fefb3404","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fefb3404","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8ed31048f85742544802eac9604c51dff1309a37","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fefb3404.tgz","fileCount":12,"integrity":"sha512-AEn4HyH0ap6ZiKgnoOgEaNbOtu1M0c65CH14N6H6NQtsvcRZ+Ozer/f3BohlHQ3RQCR4pje/InS4CxicSLWUDQ==","signatures":[{"sig":"MEQCIAVBtHmUpcfVQXAA72z99DROK/5ibOVJ+Rg27E6VsrhfAiBqe5thRIQUby+4qRDd8j3qMey608x4RLHaezeOImOoGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa47gICRA9TVsSAnZWagAAgB4QAJy5j/ZRnzC9Skz6bBiZ\nA23MqwqWtWsP8shBO2pOr5eM5ArCGHYkj0kSoLG67q2gWooz0uiQPz/4Jq5C\nlxnPW4Iz86H0BihIpVso/sOH8vPWpFh2cq6EYvjC/zTMOgpbZp5d7nwxkNLu\nbR49teypmujPPk8Fkf2BWUE3VHHL9w8goN/AJbPK22PJHEDe52vklpBLjwTj\nll7BobdFNH1DvE6gtYknN0UMqc6v9A/gJH4C7wRzBIpp4sm6ESeJwt8iVn7u\nhQ9B+R98F6lBjLr10XXmzJp5gJZqVDyJYRy3bw22hMLJz2hU2e1X1c1mM2mH\nk6oSFSuQbxw931M6m8RypgcHan+nGZ+LWGyf/DgObep8LqfNrahu8prUnbo0\n2caEH5PzfeuA5AjeffasbmSlknm0U9UDT8l2C1nE7p26CkDOB9eA0CcM6GDI\nfy+jQjBlJGsV7BXycjC4FKB/71M3IxwpS44AiJeADAMqSxeCT53+JJm0840P\nFVS1vO9IsgJbZc754Zn8iHoPM44nRyFh6oyjatESb2tgwKe6XcZsbkD5U15e\nlMiTCw35Ps3vs8heiPnPIwm5zteYCC9xV1pw/bXR9ce/Ah2Jgsu+sFwozzds\ngGxF1iMTCBRfyz9XLH7IPpqESN4u1o/FW4+gAp5K/KX0kuKs5rE2huIQMbAN\nUaVi\r\n=2fCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8ed31048f85742544802eac9604c51dff1309a37","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fefb3404"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fefb3404_1524873224698_0.45821939485555085","host":"s3://npm-registry-packages"}},"2.2.0-alpha.06e6261a":{"name":"primer-forms","version":"2.2.0-alpha.06e6261a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.06e6261a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aa26c96f995a4acb20834e9fedaedff01e982122","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.06e6261a.tgz","fileCount":11,"integrity":"sha512-FPHcQZDkFQjgj5oU3nQqyZNIIBpeXQ4Ws3HAb3Xp0OmHM0HQSNJTgCGxX2REHQU3byi5+4P4XIoKYaQ6nRiw9w==","signatures":[{"sig":"MEUCIC5IoidC8pGJenn0d0w/9y81yDT5hAK7P9D2KYlM32/OAiEAvykNn/FrX9IxTsDv3ZSqq9LEh1z+UOpfj7UUX8NkqWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa516nCRA9TVsSAnZWagAAWKcP/Rr0X6nEjzWIvhCm81on\nb8356w0VMNhPSiBWjWcHEadMe0dtjltEuS53rJOIRl8nxFNnrnCdmcIkwbfc\nK5z3SaIsFhgEKwKQkLjdhubyCfQNoeYnlmcg0cga+JmJk42oRpk3S+wkDNnn\neVC4sKKKTO13Qi5W+zAecD+PeZ5TbeRjZFxSYC7mSudPLJHEnoyv8as2BPek\n24FbhC416tyzFLr8JX15p2247HouTYw0y2AgwKsVZ6TmpgueaDjVY+qX9FCP\nvYOkn/AzD6MU+lg8JtUSjHUkPBK28Gi+q7SwyQ4qcfdyEhOn7GtFy6VtpRA1\njc8YfFqi1lGFHRB+6QgOSoo0wmAgORxd0IgxWU1hA9OYvY57sMWrlC2BLWpK\nnDVzAU9shfvmJkdGYP1Hd1mb+RXkvS/wkE0XLIJgY/MpeQh9sbgTeI4xO4ug\nAOzlqJtA9R1NASWCZR0JM0RMFnzOE7uub04mvWSnoyf0vCzcaGImZ81HVmQ5\nKl5nNVA3Jc4RTv3lXmt3RLHcZqUv/vbzT9DJOYfjHrBTZRlit0i8G1CT2BT0\n9dvRkcD4ka/7G/tWd8eoaIGzMCNFUUSdAKhNWsN5d/nFzi/8WUsrnrWOlw85\noa64r/zg+zqY4sGgOhtEoklI+gL62ogPIWAqCAN620qbxbAlA549bW18vC0u\nJKCJ\r\n=0jwU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"aa26c96f995a4acb20834e9fedaedff01e982122","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.06e6261a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.06e6261a_1525112486596_0.870930752137165","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b150d7e6":{"name":"primer-forms","version":"2.2.0-alpha.b150d7e6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b150d7e6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"251abd656627214fc299855a61f4f39dd8abb870","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b150d7e6.tgz","fileCount":12,"integrity":"sha512-f02ilpKgONzZuFCEOwkNNoI1TTkcVdbWoA2vC4n7yIRuDL2dMyORSlLga+RAuvu22Bjf5etDATZe7olJMglqRA==","signatures":[{"sig":"MEUCID8dR2Ef5EO8uqvYpETcj1p8SfnIofiMrJViZHqR7d6LAiEAs5tktLXEO9EtZApZwxDO6zJNjGhixbyFzLmaqY8XU88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa54JcCRA9TVsSAnZWagAAKmEP/006UWwPEXh7XfPzfRvO\nb9JgQCxDv/cD9kRiq/MErj8XH2mqd81LOpbWo6PmQbW8TYqN1cJDawzQMaHD\ni7qjeKzsvEjdUFlVzy2jEkwhvvzhP5BX21AteESxdmhPWeEH7JIH4UksdtgV\nlO2iE99+wOSv47AO+z7uPifoF8CHqQkn0va/vtYwNYSH/p+MWv1J2kw0WGL6\nn3rpid9vtLkDVgJnbkdhIW7pGn+VL7B4XZpYpUCnPZonE8BRFh6CISumv1hr\n4egY6RzdF0qIWdVjR2D4/HN3FK+ZdK1Q9d5ZStsT4DgeTifv/ksy696jIjOn\nSQ1RXpx7Vh01iIr6aqI/U+86eGoCHAKzwkITEfiUg06Jo57YG41PfBPIzkP1\nZ/U2P/gAll+Sxy8kM+KzLh1yHsiQk1uWJtwg9g734SsrehgJa1HvMeFTNOpP\ndffJFnFJrMR2cXP0i/suHcXcjSPknQ1bhLhBfPTjdSseUOUv5ohz82+Ks7r2\nr0uG/JISnel3NzI6oSRLEn/LF0naAQQBcoRxJA0IkP9PhT24W4pv6lxkBSvG\nW8TxwwMaDxZoF4mwFv5GlacPY33GXGRiLpqBsnVvaRYhql83Hsm0BTq81xbr\n2/mc0nLyXIz5/awXhgYw7HoYd6sRxjRSDFrB36CaBTxuCppt/JV/auVHv3Ew\n489f\r\n=u4BG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"251abd656627214fc299855a61f4f39dd8abb870","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b150d7e6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b150d7e6_1525121628200_0.589198298683433","host":"s3://npm-registry-packages"}},"2.2.0-alpha.244064c1":{"name":"primer-forms","version":"2.2.0-alpha.244064c1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.244064c1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2af54eb7b3266e011922a55a9a2eace513586f78","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.244064c1.tgz","fileCount":12,"integrity":"sha512-+1Zu02MPH5tSJ8z1Tp8WHtfuiryQ1LY2utXRviOs8Y9gZ2J2vIU/FFHe/zrYclHyjGR4CbbM/E/WrSeX7WcicQ==","signatures":[{"sig":"MEYCIQCoCKwRVWqVOAoPXfgunMg0lU6cBTBGB2WBAIEISi4n0QIhAKBC/nBF6Tko9wp8ZPrkT8AIbDXE+8GOItoLXy2X8KfG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa54tcCRA9TVsSAnZWagAAqpMP/10SiiNTlBDEjzihOHCF\nWuyjJR8kHCkm+igaiVRj8cTy4pl1L2BKiZV69ZpgPJ7rRIL9vMQVSenV3dRl\nJl4OW0K6JUHD7MnwkBt3povQJF8qnojNHeYZHkmYH9eLep2NBxDEOqT5jA8F\n5VSI1wvi6gLOG8YGLQ41JApQuoTMvDu/Nd6SC0JrDHWTZNQVs74eBSEAH3P5\nPw8jYfmvkFx14D2g3xq3We8DqGQL6mA9+NSgEKSWHiLXv2SEdmqlTU8lcs32\nNTjcxkNYXYiio1hsJ03OgtKAaXIW9G9fyYhzypYxtlxsBfvjGh2JLPMDvMFK\nPgPtMcVVXVYFgSgyhc9hSCgHBOEwNkKrAv7pCAsfASDXhFLZj3+mH2Ikc90F\ntZsF4H9PzhRIfDpLzlEAe3v/F0ch2GNNYYuVyRUstS0X5L0KMFhH2dBspn/4\nezi+7fYpvg+8J8bktGMj/r49CxBEvNfHEetmVXUYommpt1QjJ1S0ad0q18gX\nteuQDeXes7Nq+TqmW/SEVaOwFRuqMSHdHTW/y69UzmVTqM9QZOgEFMYjdgKV\ntuYKvLT7U/ZesY8TFqzf5VjTs0DbDQBJZcul92LWDbAgHbSq2D+Ip57QTrrj\np7o0fJnsHoiZGZPqLfAhzg3dfLEnCRnkK8o+4BAARvBF8su4BvIUT2D8h3uO\nPu55\r\n=WyUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2af54eb7b3266e011922a55a9a2eace513586f78","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.244064c1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.244064c1_1525123932074_0.07172662431745325","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ff72c63b":{"name":"primer-forms","version":"2.2.0-alpha.ff72c63b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ff72c63b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"157f0a9390f8c01402e2001ffc28e9ce963af7a0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ff72c63b.tgz","fileCount":12,"integrity":"sha512-EgS/v4/MX/q7ePwhiAE4a49XR/qDg1pmjanY0AGTPCYl7OzQ/eNXQoGJTpHzvEV25P/6uSwOpED/dM6cSkJ5Tg==","signatures":[{"sig":"MEQCIGIlYInHm9PNiit0XBYwItg2CL07PKcUKMDPlr//sCMVAiBKCx6GNPTrf184c+pIhsWVZLHFwx7X3Gh9Zy3Ob6Py/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa542NCRA9TVsSAnZWagAA4fkP/1b3QBtbzv7scK9AWdGG\n3Awe5jNO0yvab9R+CmWy3mFasfwqnDXnTcRlo1syO7YjqKUkNcFqQ4vME7jI\nhJ7U7Vv1/ScAA1acPBq/qXsQkTh+z+XrGBnvCbxohFr2+ruhglj7e8c4e3Nr\neIVw3ZMnupdMpJYvWkWQrzwFQvK8PL3LyPJgtOCYuAR2ym2rYI6qukJnMrO1\ncrbjRl+WmToCGCznHJ1FNk5x/nPTWzCXZhjkvldcouRhmBhOBcQfSYpyDXH5\nCrrb2LF+EzkPQxDNsflUTyrx/0KgT7Jr2jaHfOhhVvsNFop3LrNY4Vmt2tqz\ng9Tk3IUIUShSDAAILUsqdnDqBsCEUq0aicsdBjKoVLmC0xiq72sbMkcABnzS\njaeBwpDBA5tp4Ej+r3xp3MM2X6p7xl/4l9gH0b/Xp1VZsBmKSlvL/LaFfaLO\nfMrGeTqGuw6MxN58xLE6pVuJVNC2uBfP3asx4ZbNRzn/sPO/XtLZrQfKgCtn\nFN81ioiHyE3t8bfRL1FXSqzg+x91VAT6OES/7b1vdvRZKnLk6FGWm3wBzt+o\n96Ijq7oKqdYFpvraPrntOTDcvKpmVyltNJW22w3mBaQJrYVUuVskNwtcYuMQ\no67Y+uWT33wZ3XsELfhxaaV7N76xm3YR3hZWq9fcBImcWVDv3BZlCm8FZnmC\n0qx2\r\n=0PP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"157f0a9390f8c01402e2001ffc28e9ce963af7a0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ff72c63b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ff72c63b_1525124493290_0.5874195183415776","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e605f349":{"name":"primer-forms","version":"2.2.0-alpha.e605f349","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e605f349","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5df92607cb8b15dde34492c47fa7a38202efa601","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e605f349.tgz","fileCount":11,"integrity":"sha512-inOYbTpIR7/j6YDBKyh1ZzdPlP9ItWeGHLA/fZGbfShofpJ/elznnVBe+2B0T4BnO4FRFXoBruKYO8pb4gCAsQ==","signatures":[{"sig":"MEQCIHOgynseLme0A+0yY4HhbyUryp7AEYLZj5nUI0C4onYsAiA69LiapSQk+oTwbcKRTHzcIVmhpB70oHVelby0byh8aw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6Kb2CRA9TVsSAnZWagAAl4wQAJXlyiUkHknI0kr5lGFq\nsswdDMT7g7yxMQzsmbWATOZXUqRHHAN0xBz1oyi3gcy/C1uSVk4HA1rzb7rs\ng59S+cjzSMvmk5/6ygPWCJwvFy8F7hCGvY4N8eJXSh28f/WAUC+hLCqH7Qvs\nipuLXdBSWPsZah0RYmXrI+1ETbOURyQmgRbOYGgW/ooveJDkA/pXDlqPBFIL\niB8CZ3M94Y3pWEMdXKyjMAsJvkHmAErvej2FHBn2bFCWy6Ctrf7QZB2/l+Ar\nG70XEUsFeVol1wvmYDxtaI7HX3x/V3odmdM0WRYB8qHPKFB79PpGSwcO4sK9\nK8/HRzPmtTUV4cTLh6nEacVJ9cR0dLARK6lZZ/3OmuXC9m/tITqZRaWVx4vV\ncK6n+YMUXKeKatCkTQxzKoTJZh+phZDyAMDbzoVqeQapyKZZc230t2XJKntz\n4WAfDpcf9Zlm0YNlLaZ2Nzl/OF+/74PD7KpPXyC1UksXAFLF73b1zRbnWF2W\nH95cHJa1zkZK/6yD46ui0m//w0l3ef9/GF1RuAO1v1uaJ4XL+Z8fQRCaugB+\nF/0OSVN3JbyMhATm9tkk8tSpKIqKEpvDBHDxf6DgmT1Hq4Vbw8DiIp52vGRN\nrC33tttNBJAQVMNHYzv+tFvOECqjPrWKkly37RLMXk/OJfDNfGOiypfjGjIs\nyyOB\r\n=6M7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"5df92607cb8b15dde34492c47fa7a38202efa601","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e605f349"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e605f349_1525196533721_0.0468276853793097","host":"s3://npm-registry-packages"}},"2.2.0-alpha.55ee9907":{"name":"primer-forms","version":"2.2.0-alpha.55ee9907","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.55ee9907","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"36e565de6fd677a3e0a45cb942ecd1c08e676240","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.55ee9907.tgz","fileCount":11,"integrity":"sha512-hsD5E4tda9ZfVZjNv8CAh3q3efT43GQNNx5JHzRQNh3hbcggd2X31NodSqBnh/k78QfyhW8HT0Cl6355jCwqhw==","signatures":[{"sig":"MEUCIQCqnz009GEq+lAZVderWKB1VoijwyTOHZfPMDanNFv0ZAIgTph6odHeNzE2n0Cf2AQKEZggZNu4VHA+T14DdkItz1s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64FjCRA9TVsSAnZWagAAt5MQAJQn/z/K1naBQDUxYcNg\nAVsDqcTKanR08L4I1zquzdQDY7w+m7LrLZ7LLYbzD4hb8bbi3bedOJUQX5CR\nT/elP0q0oScj0Si0qgwWtvTGxQWQjFjdwMK//ucX1Gxfm5GcexPpmPS851Xy\n8GIJmCp/cwzaKTmYPc78MhRDqFYKtiitlcbh0pd2SdbY2xi5+EE30vK3QKtz\nTN3wqlw/E5s2u5UugwtDtF8sYV/YQmrOogxc5cCovumbfP7gZTZY8IDw8BST\nEEkOqZ89EAt+aaXOD/TdIat9IoAF2MdlkdSygSRcCyDf2u/4hCpldFvC3DvQ\nJyYpoXf3nD9QI8AEh2A/EA8BMHyzJocGX2MEQGMBoMuPK+jGZe0qSfvqfao5\nBLD+kNy/qM5WfxEYo3rX3Cj65j5Hwz7MoyRbuZC9DBQuSWyzrs4vwlGZb+Pi\nw8466T/1Grd9YuVjl6v1vFnsoc4AYSyIHt9cJlrtqiB5OeB7RLUddZzRcz9V\n4gXUUR4UfEyARcqukQjeUVz7KR12BhFUKUes/Pe15irznxe/WLqGgdA/Gw43\nE6lZEpizK4lVETZrCkqGniXrYquxpyAYcBFgOJbQhA+2zk6Ow+zGx98HkGR7\n/+F6scKmpederN4DNx9SJ1zUhs0WxR0ojOnyCX1HxKVcDO4DJ53/049BI/GT\nLoLY\r\n=yZrT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"36e565de6fd677a3e0a45cb942ecd1c08e676240","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.55ee9907"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.55ee9907_1525383523239_0.7885636686801689","host":"s3://npm-registry-packages"}},"2.2.0-alpha.20ae7855":{"name":"primer-forms","version":"2.2.0-alpha.20ae7855","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.20ae7855","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"97a1035cf9a48d8a03018455005a0ad4b57bde43","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.20ae7855.tgz","fileCount":11,"integrity":"sha512-sWpWbWW3syfhj+KjJHZI/wPkvWSo/ACUuLlsacQ66F35wvvRvbkesUm23KRWDI53lhhDybmxULvf+XhDNyMPmA==","signatures":[{"sig":"MEUCIAsVEGn/wbv7zlEGAH1Vo0vwDvO7ZcS72SQn2B+Jjm0GAiEAjiBNa1vJrn+DHxJZ4x4FVVh+3MzTEByIcpw3SQP93xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64XkCRA9TVsSAnZWagAAL0IP/2LVk6yHitwiHFt/cStk\nFecTXfBRgSYguBhSEO06PYKagdc2Bw0D28PnmFOrj9jzXp4N/S9IqnIMJ8XU\npt4RNfJL0gA5VNTiOTIAmoNCCrXOu3qsXfx2xYMbGHaZDP+qTBF1oWgQaXtF\nyM+5tkgFPz1bDdrOD/AeNdSSSYs6cwpaCRLRgrC/T+iNZZ2YlwpCMR7wFcSJ\nHi9wZlxtskU+h/Po/aABxocguehw6PR9qGjEQlVVevFKHldAyXJKKfD2d/eK\nvX1XJQu8NjI22lrQiOIb4+CabFBX3EiwiLhGfiJvfKPiFcsTgzYAuxB/Py7Y\n4UCUebDYdxdgP995F1UjHwegueEKvymXBTKEDYH5uIkyVvCjxR5QzDlYukOd\nJ/MokkmjS6EuV7r4tdI7onJ1rvu65uMOi5PCtGWOIycu8ADuhNzmkGRv7vti\np99fuSCcmJsQ+1KR2J7I0dEDyO1ScxkaC+MpZJD+5hK4UmezBi8bRLBfqW2O\n26OnfBXAP6TcOc44XSoY+3y9Wjb/oZAvY1XFFQzb6XTV8psGH2MYPXuDl+5Y\nSUmHVwFQ/MVbbb8tKZ7/hn4tJQr6Uu8XaK9iJ2gb+lh+SnmtpB3i2Lwq+6qJ\n6ek+LDyCUvZLIjnOSs4IBoGezFuQVc5BeaUXnk1TEhTvMvGo3ibwDn/azECd\nAD+s\r\n=Ck9w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"97a1035cf9a48d8a03018455005a0ad4b57bde43","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.20ae7855"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.20ae7855_1525384676385_0.4512770787085527","host":"s3://npm-registry-packages"}},"2.2.0-alpha.41e8c4d3":{"name":"primer-forms","version":"2.2.0-alpha.41e8c4d3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.41e8c4d3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d610718e7cce6b85a8e8b63c3c61d0fccadf5ca1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.41e8c4d3.tgz","fileCount":11,"integrity":"sha512-ooxWmOcEPxZdj9hD3QULQJW2qaQ9lnDPj4O9EnqsfBO4jfwHLTAyboouGzKjQNfQ1vxAFh+A/SxTPRLjLBMIjw==","signatures":[{"sig":"MEQCID20ArgQIASs8+RwmIQxw4gbR9+fMU0LErmnNOrybsi5AiB/5QFC3DujPm5zOzl9ywN2R+MKN4qsikrZF8NEleclfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64a4CRA9TVsSAnZWagAAfCgQAIpMsQDHHC7FuBBV8iFV\nTtXvtK4uuNKaDx4HkMvAaPL7snXiz2B4DQGCnacjA8mW0JPG4SL2vp1r7FzK\n21nZpr5zNd6NZs9ID9AxHt10MQzh3Gd7TOp4SBzUZXJ5A0T4hoQK7pqQxEAM\nXm0dTdd3BCbyylNvGFfwJ0RB4bFil6gQjDdJ5OvEVJw2R043C+su4yRqYwQm\nz+9s3i+BbVkvsxaW+d3BQf7wnlfQUCcEpRHwJpOQtm+zoOVrVPhBoTi19HbB\nJ0BU9aGIOUkIY4u9Qp29nSNFs6RUnCG2qvn8cj0SeFTv0BKIVgmw9eeNRTrl\nyB5WydvO9pOXkGJAa3Lt9ttrMIo2WesrrJ6OY/0uDDSPCP+x5Smd60kpTDGa\nsmAomh7QseTBrwuTdI+u/owBxwOu9rNUdwkDB/tdBAv/kop/uLPdKsAKEIp8\nZlFmMxSzxKpehZDuQchL/RdW4xoIF/FIuJSNDXlQUAyJuJIPm5cq07SyMEI4\nDE6vAWkyu+ABYcxQXgJy+juqNkDnaNWtaCWhQhhcvLRXmA6Fp6dj416tXBvU\nC5leeFh7RwW/Byl6GjrnLM53zky0XLNs/Ftz3fnSCNN7czOPi0rJfO4dW5p1\nJMjpq+kW3X0R8XNwpg7cbyTMynjEjKY9cgMjLxc4Y19dD9NMfqVX4iEfPki/\nHaXS\r\n=Hv8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d610718e7cce6b85a8e8b63c3c61d0fccadf5ca1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.41e8c4d3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.41e8c4d3_1525384888565_0.29934136372086506","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9115c5c9":{"name":"primer-forms","version":"2.2.0-alpha.9115c5c9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9115c5c9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ad7ec2a350164c3a067e39cfbcd85fe1fcae052e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9115c5c9.tgz","fileCount":11,"integrity":"sha512-gs36tfqMtGZDXP7UlDoHc7CQRYnMktjqCWi44D1C6r+X0OSmF3IaDWZzAOzFq4Ur7xODBn9XkTfkQos/kAAloQ==","signatures":[{"sig":"MEUCIDkt2DX+qOizc8ee/TXHrCF/N6I1A6yh71/Joo19t2gaAiEA83a5Vf/uV1Gi8QQ8rumoUy4Muk+yyDSrnYPQm5b1GcM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64rLCRA9TVsSAnZWagAAgBAQAJNbWS7QK1sTTHq6ARHA\ntPIrrc8TA2pzehxY0v2BB1VHwE6MbN6HXOgi0B8ouub2dI5gc7H8xgtEFg2w\nDxQ+EI4wTPmtSCVki4+BikzwVdba4BJKcA4Ce4dIzXlHswX7YfUIJtHpttYb\nZWHXJscEq7VrpqCi8X+MBJIe7cH8jexJUSDGFtWiQVx0Gq3GVmQ7YKutxP/m\noHpaUEyR5Av+WKWTZcf057j+OlvBSoc4KvNXPpmjk/tVIOrMzV/Eg2DByibE\nMhii3hnXOd6U6Pi+sEsqUGBOq3QNLTkAZ2sc46RpTyqdgU0M1Y7EMpvXfcls\nQnFk9YEUOcV8nrJU55f5iYtzBgUcy2NfnNPi7xA6483RCTwEQLM+OWMRW43n\nRr4AtIm2JID9hGCKq6K0suRPm+s+uZGHGNitvDDGpJPAtL+L25DWEBWbTO4D\ncpVFWWoui6ad0ZsvdayIy694QvLaK8xF/kgVLKOHVpqVZKREHR9+Dk+EFdqL\n4BBbWK+5h69rEbIxKWF4QGp4TFjK4e9cnOwRV/f/Uplof8xGZ85ymbA+IJfg\nEuHS+bHlJgso8NbR+a+i1kaUoCKJBaao262Hl8dM+BrN4MQJhgbxlAT4MZ43\n7kv56MgNQz+uP9Rzrh51lEX3ZpZUBDDMtJjP3FBAz4Y9E74OLGOHryGXXnBY\nN3v3\r\n=tNYs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ad7ec2a350164c3a067e39cfbcd85fe1fcae052e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.9115c5c9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9115c5c9_1525385930624_0.9252106011927259","host":"s3://npm-registry-packages"}},"2.2.0-alpha.942f15f1":{"name":"primer-forms","version":"2.2.0-alpha.942f15f1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.942f15f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"55933d84c82b80f23604106ae5b751696eb91d64","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.942f15f1.tgz","fileCount":11,"integrity":"sha512-0TUEZfZ2dG+Wjb1ymZSTtx5psQAQsHOq3cOnl4lj9o7a99BjSh4sPu9+ScI43jb5Rj56Qb25YZd3tb6+CZwQLA==","signatures":[{"sig":"MEUCIBtp4bGol13OBMh/HigrTgLTAVAmiX8YbqDhA+x9nF0TAiEA3u/ESh4uRNmrz91tLqT1WRU3Kk/At2w2ZIpLL3zS0Kc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa64t9CRA9TVsSAnZWagAAq8IP+QCCmFQIHqN6/1atzsAP\nzWhs+pOlaDfU9ONWZgMnNAbVOn0r8ntZCANt67wFjW20lX+K+p06bpe5ER74\n8eB+o2yekglYcmP8Hlsgd/WX5gKRGzPa0OaYND2A982WGXGZQa5hwYzlh8D2\n9rcx6QdeebiUVTR8Vayi3aiDMUgbBC0MeoHyYaksycMGcJ+PGDA0DUraznE9\nCeaGxDwWS7kdRQOIBuFIXDeIf/qgo8G8fG5AJhIkciYiuhkRZiE12Um32/sB\nkkT2J4vV4m9M3piCaVtPA1vVp9D/1VQmpOW+IxXFOahfaFWrWpt/QZuBGRno\nuZX3VJyFD3ZxiSW1ZhvCAQdyK6pmaehHIFZbM5E6nbnSjXnjNYaqQSECzIQa\n+fhPAKzvWnYdUvdj4FNjeA7gm6M08s8YnZNpJNV9Bv6c9NJPpwcNdMQdqaGO\nLMi7CAtyj56mEkDN//eXbvZtssoHS5w7Mdhe6WCO7/QU+b4TZJdk1VEhA8xe\nqg9fuVjZY/EONqqAOhVNtd/UAY8zY5DyuSc0VRkVG9O6B0fXFw3L2pq9N9m8\nPVVlcbNIvhPC4h8T1m0L8hUx6Rs9qQlt4Cfh8xUjnhNmJUmDW7z+8GN/5W8w\nSU8P3YnEZMiaBHrXbakCP6WcI/kqMVrk6fdOhhCHHlHs+K07xrA3Ycamuac6\nUpgn\r\n=2Mo3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"55933d84c82b80f23604106ae5b751696eb91d64","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.942f15f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.942f15f1_1525386108985_0.11957075341879753","host":"s3://npm-registry-packages"}},"2.2.0-alpha.07e8b001":{"name":"primer-forms","version":"2.2.0-alpha.07e8b001","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.07e8b001","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9fb813b4cc72e5657dd922c65420cd5b2d2119e8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.07e8b001.tgz","fileCount":11,"integrity":"sha512-tJ8m3xPeawF6U/GelO1eFOQNeaRXCqedghV6syd6S8vMSyaHWuVbAVcdUPLoAGTXmYw3ZxUq12O6YinxeVccrw==","signatures":[{"sig":"MEUCIQCbABEsU95qOQGM/9fPVkBDEWkcahWCK9aOiITu6l9zywIgfOec+sO+uaB8PbiA54Kjt1a0Y435buriieZsugH4tMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7MwTCRA9TVsSAnZWagAArQUP/jwdBiavvfqXx/Us791Z\nkNEd5hE2vqMbMO6JuMETbgKUYzQVlm+Okhpsb7Bive+NcZIjFHE22yeuPC4Z\nmX8n+aoJ2b2qrGV+w9bg62fO47/np2THdxJYHaquPZ/e4JRNBiQephpr9aZh\nqfhKGxPkQxastvJQ7jw0u3oBIhEeNnACXK7tVFVpKa8YJNUqzuF3o4RQRVcy\nNKHzN5VRm4DKI6ur8gGz4HdoQyKURT3arBeGM/GNs272VOYxGJKVtYTwO5ao\nsdfoeYNYEPAQKdVp1RR6+d5+9ZFS0fWyPZTQ7pvFPDFnVwfB67jnXPbV9jne\nDekFwqGZ8We63C/Rku+NU26MPU71NS0IhtgPkAx7OyG+455otYvjn/HcxkCa\n8taa2hf1jVYwo59xpmn42mWKZ5z3FN1ahYrOcsuXjf0V+l5X2FPJLLzKIi0i\nCIqxYNjuCTPOws/9lqns8Ob7MsinnRSZqQ6bphkbCmjgGLQuvE906Cf1Ofi/\n/GhqqcCRljpVQuDsIZdJruTrb/ZXy7LxYre5urZmZkeq6rVT2VKaVU/3Xi1d\nJ5WyLV354ps7EDnGFa5YR4C+slU0B3Pk27a4cnIq78wMQM8FAGy+1z2HgQP0\nAFSWlHCcLwbEx6c9nnLf24mtBtNVCWkb2tCcmP9eQTgG0v0dkaegwKL3au4Z\nmEKT\r\n=mVfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"9fb813b4cc72e5657dd922c65420cd5b2d2119e8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.07e8b001"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.07e8b001_1525468179108_0.8121213860113012","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8881b8fa":{"name":"primer-forms","version":"2.2.0-alpha.8881b8fa","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8881b8fa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1520937e51e5d6c24518f8387b27c34ce95394c3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8881b8fa.tgz","fileCount":11,"integrity":"sha512-eeZnvXrEu3QgIiJWTtk8+xeSq1jJivZkx7OoJSmppd3EKndCsDFJv7goWxtPfvq7J044ETrzkaj0qpEyF6mDMw==","signatures":[{"sig":"MEUCIDbCElZELWTmw+6iN4FwZ3PZPLNB/U22DtX9wI9BMgxmAiEAzRejSEZp8VdXRZJKIYnugZTntJlpMxdU79foRiU3hC4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7NOPCRA9TVsSAnZWagAAYqoP/ir9jZVq+caxFARxxznc\nTw50BB50oF14gzDVN2tkdPwLS3PgSgadgWxLngLdK9bvZxxS7/6IU+EIKc+Z\nGbFpCBVZij8jRlCXYhrRfPq7jKxjjaMn+QW7kJ8ineTEdouoWGl0DwNmHKHX\nLIKYWMfAx5LrAdFHxZjr//JBqRfijpamXmyeTtG2dSruavBiantVfOC8tIbL\nQ2TyQ9RXPX09jS9AJ+gRIWd5Vxdf/gpA9esHZK0stuXyHd+Jj+Tv+fQf5wJF\nlhWMp6fwp7O12IYpKHV+Bne5ZbosAp+nYaplgDFa5ZFwqicbhlERzxSD1RcQ\nBgnwReZspVn1NGowJJIAXIOUHFAPqizfpMsC2YjlyBZDO7kZPUNVBsoBF7Au\nm8EfQyzv5mTuso+kPpC3pWRnm1IMJA4/TI64LJa61zOJWqF1es7ILR5Ak9n2\nmhi+zYTte16lOk5n5t2v98c0wweabIRD0+Ejwz5BCMxFyIFPa+C59KH1gd2D\nwenIT8qTAS5KM74vP1wLBwigEtDeLnkwpykJPtzena9sHuIYu0ieCoJUph4v\nDl3rKi1LXYnPO6IZHr6QAubkYvne1sT4pMQ1dQ9OZKClriYPZPCOmbbx2/eU\nsGbHJW+WfzlmNLYKuijaAoz5gRbsJpq5UVVLOBTPHne1zqeo43Rtm7/IWT83\nO6TE\r\n=XuZc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1520937e51e5d6c24518f8387b27c34ce95394c3","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.8881b8fa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8881b8fa_1525470095513_0.4394641774151111","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6ce8e0bc":{"name":"primer-forms","version":"2.2.0-alpha.6ce8e0bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6ce8e0bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d5757d8628d474c92c4d0cb1e7f1606e704e3bdb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6ce8e0bc.tgz","fileCount":11,"integrity":"sha512-sheMwbVSVIA3dTsU2xQ1q/QaeIjjOC2RvORxApWiXUOqOvAxrVfEUcP1C4UxTOtst/VM+OPu7kiOOnzU3hEuyA==","signatures":[{"sig":"MEUCIBAwzQZzKuOWrHhEvTvznbjYqEu/YKr2GrGX+nb57Q/6AiEAosAx09QT6hVouVhPRv3T8HbXexQJ10OEiulVBSWNcyQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa7NgqCRA9TVsSAnZWagAADLkP/1Bb1p8EDvCp4/6r5PnB\nOYvUSajzGfZ2tdHm1MuYjAfPNUHrFGdHH0cVN7S93pNsnQhzDC4UY5hvewlh\nivAIUICEkBokiuzmbVnfQuc+IOBf10eZbJRBuben3BpLBodl/fZpBhfm8qs+\n2WymRgeT5QMjdwh1F5UUMmzt75AZr9E8HLv9OpIOlP1ttZLUuvauFHDf9+W5\nvY0YlRsQcKW9OcreoI5V8OYPUgo0DP1zUrQMgbhE0MATSsMylXNxmsOCQtwg\nxe6ludqcMjW6eoIX+NTm0an86chGKxlIJxihW+gc6M1lR+R+HeG7PxSyqdQ4\nkCJcUSeF3ixdznuQIYGKDS92NkZMzKQyjTkv5iyZi0ea10p9TK0S+CHpXZtG\n7DCC0iuqaLt6tOOLlWz2Akz9D210bcmJOItWxz+xjebeIWFYL/aoP9kDosi7\n3IRioMHi9KS+/2oJ6vJOpkUppX15NEiR6FSN9oFqRFfAyDhYzEdPAxWCFv5Z\nIvGpmpNMrts9OcHTqPXcfoOgh6kuOnatNOD1dNbYEfsXejb1vDOJi9gjvmGQ\nrLHV/so3lCVV0fgkCiB5sWbzp1G2zy5utDBssh/RlV1NXfsDyz5JaFtUpPrd\nNdUv1UKLf4GkwbIvsTJrkUcx43PrCy/ge0n+WUgqu9cerzMQ8U/hHdF/l5dc\nr5Ku\r\n=URq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d5757d8628d474c92c4d0cb1e7f1606e704e3bdb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6ce8e0bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6ce8e0bc_1525471274114_0.8101369901948221","host":"s3://npm-registry-packages"}},"2.2.0-alpha.32b59b4b":{"name":"primer-forms","version":"2.2.0-alpha.32b59b4b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.32b59b4b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"83cce78f3d4b744e51ee844bb28b5da6256f6669","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.32b59b4b.tgz","fileCount":11,"integrity":"sha512-xQgtZZbU2Jq5SHcN2uJEZOprvSljSjK58gkW7t6dPl+AGL6xfQizKgW7gxXQ4Vfy3yjrd0MI+VxwFuCgJGK5og==","signatures":[{"sig":"MEUCIEXUb7PbG63yg3Avs0HgT8nuOJLxaLifseQh/nLqECntAiEA/H1SvmvbuELGBbsaWFruKARauL7oy3q/2oNgfPLH8RU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64129,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8IAMCRA9TVsSAnZWagAAfRoP+gJnlNCG3iribV5kQYzU\nFIcPbZEvLCSmzMhxfNTP7gSK0zBUnbXvAtMeOQSQy5jS4wYTkezGJxIvQQq2\nyzJBJCgPXo+62SGLkb1bXIY5uv/XOQz/CkniTcnhBG4NdPGIQkALepSoLlFe\nHyVxWXlSXnIo1O6iTXLpS75HuyYka8DM9+f3Sqja9CdJkcKY4Yj2lSIMHdSA\nvddKCnzKOJIKwOGwAHv+KHd9I35f98gnsBfiOl7lsWt6XA+c+Z4fGQWSN6wd\nS5W20mvxHk8ZrxLjNpywpD1a/ngbq7ksP5RsAEBriJ9Y/8vzMRE8H8mDkZjq\n6qmt1blVgGEHEI79+1ewu/gyXDXYCTla2u8A5u69PMyYs3pzAgRwadQXjIBg\nAOrg0sjNHOBvkqWraEGoUDeMA6eyZaU6/JJkT52w6XQUmnky4cDKdXtRR9mc\nptHlsIXMT9Znx0X7ScKfhHXIdPJqHAjsyXUVMYGR6+dfxm4grN4QgKbuWJm0\na+nrzJV0dgoTpb7a7r+rCIdhM85G+wN4s3+j1Ri9yxTsirw+FhHx1awBiG0h\nwmnqwgNn9l7uZUufH+m0vfanw5r+2lpv7tr450tvQJPl4UdCmD8+7nZT6+jk\ngGxGnHDvyI78ivDk97RH57gLhOv7eUS1L+paIyWJuNHZOJybIR1ZoEVuzXm2\nnowa\r\n=73pG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"83cce78f3d4b744e51ee844bb28b5da6256f6669","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.32b59b4b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.32b59b4b_1525710860400_0.8291220635016223","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ac4b4352":{"name":"primer-forms","version":"2.2.0-alpha.ac4b4352","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ac4b4352","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5c2f6866a6ececdd8098c85a6562e18755feab77","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ac4b4352.tgz","fileCount":11,"integrity":"sha512-XqEInTfe3QlvA5EV80oP5tN1vsiuZ3ioSKLISytZGMVKxKwISHSPd7gXnnDkRa14P66iJzucpOhfx18RTX+Alg==","signatures":[{"sig":"MEYCIQC6obHpcytkKScC1X4pVGJDsc6s78phvZQUq/QIAcvNZAIhAPrrvNmZfhRlmzSJX0A1Q/O2AykvxQMG/TYwd0pD6/Cf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8JKhCRA9TVsSAnZWagAANh0P/0DpbbDh1/lJAYh/9xGy\nTJ4qZKgNpFbuD3eqgm0wxiJGPfilNoTE1lqFQD/VJkuKf5Wa+8s4RkUSSE9R\nL1yOlEKuMmklzY1XH/Iw5ZMOcPmUpPiDR/D76A6zUCwOOWefOfKewNrJZaLl\nxZBRZSzZD6l0GTn/V8o5Yi5+1/2lxBSYwqVkFsj4xxTN0qBxb+ZkV/wHxAqF\npms7BuV5Yvi8eFDPwCrV1TEBxofDAaxtYyoYcfceKQNsDTih/oSP0kBjTJtj\n0s3A8y+TEm+HLJ4ypzPmXR8l5HDiNXB8MkimmsZq3V1dTT6944iFsaGqIitE\nrSiqZi3ch0WKtyYzWoWK4DuDsW9NPk9tlM2Xcd5FVbll4Y9SvqYr9vHY3LtP\nj8O1Pon9689gMv3hdOhDOzHJZ4mmO4f4K1nyA2A5ufUbo6bWHihmyDqJshqO\nbzUnITFwUUWbThQbQeVr6FVIjHXrfvnwLU7ywqYOCqsTMvQqD9H+oboBnHyr\nxnD9sVy6vvzXm28cMq5ekPcTkKNsz1LiSMxOdlaq5YVrzXrvhfmDlvKeLQCW\nAX03c5Lyo6/zfq5LRFl6ANkvnoggxaE3IOoL6xrC1g3dyqom3g1Cr8yYnrRP\nQn2nPjiXBqdDlXbcZWdhVU1eNybavqtecvTvUlPammcNPNumOXbx5GR+bcUG\nKz1x\r\n=nlqW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"5c2f6866a6ececdd8098c85a6562e18755feab77","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ac4b4352"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ac4b4352_1525715616119_0.6635262280369152","host":"s3://npm-registry-packages"}},"2.1.0-rc.1":{"name":"primer-forms","version":"2.1.0-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3ef76766f904c85e279ecae9ed3fb958d24e063c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.1.tgz","fileCount":11,"integrity":"sha512-Qs3H2Dwk/LihTD2oj1VvTJ19Rix/g4H+kgybA9jjlOHdxTEk77IePMtfmb+d51OAh3wfpXURLuQKhtTT8EBkIg==","signatures":[{"sig":"MEUCIDUce8APGZVEhCm7xPZFuyJ9KDMhUdsTALpaHLFEcR40AiEAqbDIeRCnz3wKGpVRIBSKvR/VdWROAdh1y7J0hCQR/Bo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8hqpCRA9TVsSAnZWagAANBQP/1hjHBQuo52tC9eR5i5O\npNlpKBEDzhwbe0WOaVg0LnqtfDTN7l+hjUdjndaJF3HmxdVOhixobwNURc7i\nqgohvJA+kD7CCQI47EYKL1ncq9aw0uFJF8WyidMJXUbttrTgCSVByqkOtpbe\nwuSzaouQJsAT55K6qwTcQNOGjYtehWHrL/1cUl8Md4gBB+QNAyLB5F6a5y7j\n/IQJh2/PFgqGzfB4GSo1Ycc0DlcyJEZPA9ago6cwbGdFruGx0wD4F4ETNGNR\nmCDqfjOVWx7SWIJaA+YRd/hqiTmIxKtMyGfAgPKbOZD3WhDxjUewboR5H3in\nBnUZnIS+qQ/h817Qo0V8BFTPGcWoT1w7xkBu3WpCAju84yXJ0KCjtlIo0Pa6\nXSpBqa1WyW6YJ/WqzkrJlPFIs5mMVYEdqDByAqdRUuYD/JPRxarHDJiOCbE7\nJfaJnm53iCCG67CINJhKedc/gKDW+0dhqIN2BuTwrj6aPDDj8CrHSdILQ3k+\nCcDTDxMZfX6izET+EjiczwTUUT+Q37o5b6dzJdSv0RTvMzerlEmbAGlWmPnd\nOyLYt1bC22p12ftQ4+kLhCssmQiIuQb+0t7OrzXRSwJPhDdoq0PS7XeLQGXu\nVuaL/IiUhng/HtuogOeNih0HTwqfJgpbVji6avpcGbwd6gmAqN9xp3sBl7Oc\nsBLo\r\n=ORqR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3ef76766f904c85e279ecae9ed3fb958d24e063c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.1_1525815968736_0.5157458833775628","host":"s3://npm-registry-packages"}},"2.1.0-rc.2":{"name":"primer-forms","version":"2.1.0-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"80b8af6199c2eea76b105fb3dd18c6d3b2d5792e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.2.tgz","fileCount":11,"integrity":"sha512-QSoYGdfIk33Kanuc1R+Irm16mRfN1bMwjRA1hp165bckTkstO8vA1+qNk/y/lpw4mE1G3geVXok4Tz6QKFCFaw==","signatures":[{"sig":"MEUCIBsajZDGX4XafSdx9DqQeXcqXH94Bw8TbYfyfN69t5DMAiEAyrz1Af/Ddu+g9LDPOiJxD2uSy8yTN8uIP+iV0RU1h7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8hvvCRA9TVsSAnZWagAAi4IP/RYOeoE8EFRX8XzHLjGu\nsYgUVYKN8KJi1B67i86B/vFH3FW6+/NtNLhf63s1c9DCcFigvvwt42thj5Go\nCitIL9O5WTf4GWHqxVP0qChfo0urlJmaKlu9m7GM5SB+1YlysrVBsa//XDVl\nwuVc7EG1q4npVyUauE5NCH17E/N3Jntj+lbi9qMa6h2K1vgMhB8Izlf65YYS\nri4LtlgeazOjUp6PGYMYHLOGkIEczhgFeuyPs+iYq+Rji/tIJA4lNxDlS8qS\nxb6wHs8VT4insZ6xp1wmoKa0tRH0xANJzxZzht8IUiltR7nK46+rNnVSzLga\npGZCUkdH72uu1nIr4fk1jVJ/A5QQgsDqNtsNSFe8A/foyQZ6voDNVeRlyZu/\nXZM63TFeiRYLmfDEjqv65EoMexb2n4sscYC7W1DxdzLZmDW80ospzix0Jkoc\nhEed0mtFVuBE8waoa6rLGEfFOD4VQjNLdbOTpG8+ItLvE1+Fi6iJp9rTJI6U\nmJqCE8NXBRqbV9IRVzuKJQBERavMqsL468TlEs8h0cDazcHWAFqFprUs/XSB\n7AjKTT+Sf8etPTpITZJYOkSOo60P3NhcI64PZfufMXgmeaasCmrgsseR/DrU\n3YbBBlT1teUeG/zbOdxpO0aPDBjBbJHZtlcc/rnmyc54sNWGcOQzhsgeMq2+\nh/Ol\r\n=Q6Le\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"80b8af6199c2eea76b105fb3dd18c6d3b2d5792e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.2_1525816303021_0.20850811404472558","host":"s3://npm-registry-packages"}},"2.1.0-rc.3":{"name":"primer-forms","version":"2.1.0-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"11ab46e95f3d309dbb02d8a38e0378655ddf0d14","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.3.tgz","fileCount":11,"integrity":"sha512-Hirr4aPR5DV2M/qaG+Ex7ycXmHgPcUVzw2sADr973GySeKmU9XC1UYPG7CLC7Xjwd/KSUCKADIa/RSO7v0ZOCg==","signatures":[{"sig":"MEYCIQCi+hW6pamWbKulDf6MokoGkOEZ+ngRd/9/nkT4KYja1AIhAKUU+fBbsl/jTQW50Tevi9B+k00gfZTbhN9rn1FY/Dg4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8h0mCRA9TVsSAnZWagAA4UIP/1+VdgOV1tCtJk59AWcm\n4IOyrKsNbBDcwUDizbTe/E9cJAeI+GqCMMot6PJ8dwWBxZHph/xuWQRbrWWy\n91jSuAJtKUgbJ7EFAM0sTgqxB/HaQ3g0h26xrCxPIipoTYe8d+bZfMeJRi/+\nWeqN4QBi/hqNQoptCjbm/MtNctYOzAw7FOL2ZYj6O7dLRteKyVSbo3uMpxtW\nnn7Lx2failtyjhU801tAzmup+itWFRUD0NUGUsIxU77B7Nc5FG+mtTK9BUNF\nvxNmQodjFl9oJgSz2a3NThVwSCjofbwH6NLRCwyHiYzLZxvocmCt0I/JDk3u\nMbwYc31DBTz7hI2A/4dpHVu6lErmEPT28RYRaGBI6WguPhfV8YDZcI9yivn+\nh1PfnSJ6JukSB7ro1ktRIOSGjhyuUDCh1FwNFMKeVQ8CDMNtbuXfnl5DAvlY\njpr84rPtjTN8kfH2sYB3FWpn5M+NzruZVhC1qcf9k9zT90lESH5mb92UVJ5t\n3RmQmRILJkfGq0aknLeukawxs3LkdrQe8J2j/ZGFRi7SZgTy3CZ6seZBKrzv\nx6zgifvclkDLCi6sMvI4DtAjDNAADREPBNM9uChcpCgJIEsMmEjnlYal+MCt\nnnTNzAPoTjwyOXSAcT32veRmDMek5BIsFzpEoFU39nzr9Ffj/T+l8VpJ5Li/\nAbDq\r\n=8tNG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"11ab46e95f3d309dbb02d8a38e0378655ddf0d14","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.3_1525816613301_0.6055607570807717","host":"s3://npm-registry-packages"}},"2.1.0-rc.4":{"name":"primer-forms","version":"2.1.0-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dbbc313e499d502b4a71ea735d36787af2f1bc55","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.4.tgz","fileCount":11,"integrity":"sha512-yqxK3vpc60D2ZksTJDsvY0FZAle1UCKLZOehJtHaVnqQJPO3kjgPXyquX7TN9UhdeiWdaDFBHqOsmeBFZ/Yqdg==","signatures":[{"sig":"MEUCIQCrStGHMWoQB9cfpqUrQUIOUap7+fBpmLYmrKU+aIZIaQIgI7y62HXYI4U8IkpcIEbHGEoxs0OcqjtfGY4S5VTREzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa8oA8CRA9TVsSAnZWagAAxwsP/RBOyt0UhKVijHsaHNBT\n5lZvjIffgeSm6t/EPdw5Sgnve/Q1LsRssWF1+RgE1HaFKSckVYEAKTq6l1ho\nX9riyWc+sGj3YApmnBoHYkQP3rqA94APFYyZ3ga9kSTRZuAo396ayKcGR12o\nYhcS1jbx9+WAb/nc4tmNbbqpdNVWE0LEzhSFvdS/R7pck5SR04mi2b5KYihO\nXs7UJbycOFl8OziDFz/KNhOx1l4ncnLzBDBRSUbtDtwoK2d7BXYg/PQ+47Ei\n6mVpfYmknozQeVTxfXeD/b7OYVnCr6slr2E6AQUnHzfOGBJ0DCJp6wddR32R\neluBvcIdXBF5Nm7Zkbwpw38uR+M94YakNOdk8TgT5pqqGvZie1I9NozCFWXO\nhPJW5TPuYyLm7pmFHRkc7PXs/NEvzlOc9kRpPZ7TUpFZIfo3jm9BoYJjlBX/\n8TNVkjlseN4e9dlyVsYS0yhvJwknjEF0bnibRobJf9wEWmmBBKPU0okkFFyb\nI0EcALwudP0rua93COuXKc8g2XAP03WAtZ9yJKGXBRPpjzN/YdkpVYc7YqxJ\nNNow3G9br2Akt1x4LFeQKDyAlSNFb7NOedJoZjqd5tpEbY76Lg/oshXrWbLS\nFFAjKqkYqpRDjSIFpS+YFQ+Xd9QB8ADXdFA4I9PNPK1pID7oSybI/BmCeW1t\nTiU3\r\n=0Grl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"dbbc313e499d502b4a71ea735d36787af2f1bc55","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.4_1525841978512_0.1934031629764481","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1e956978":{"name":"primer-forms","version":"2.2.0-alpha.1e956978","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1e956978","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"48411e48b60f08883f88bfa48acde3a369d88c4a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1e956978.tgz","fileCount":12,"integrity":"sha512-U6+QvlFdosyPsA/pPMLs6b2iMjl74J5ttSSxtt3Q2G6ELuiW+76iyfg39ouXLzoSPHoa9YF+eFlDDwV7IXVwMg==","signatures":[{"sig":"MEUCIQCMG5WBx7AoG0Cal4SzAksC3v66PH0bJHSrW57n879f1gIgJytvrELoHm+KbrWNu57Axx4Ozr7VeYyb9ZW9KI1q0hs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa803UCRA9TVsSAnZWagAANdYP/0gLEeqYKTh06rZTAauy\npoMBdzMvypiLXdOhMixVS1hbBWJmpNQHKZNxQ4aQ0zwGvD+rH6fyk6KOuMlI\n3sfH/ZAGDDBHCMw8Nz9ajjvPJ4/Wzotylok1DpBbLmX3hd59kbtcMi83OQfW\nHd2Ig7wEZk9M+KOcRjWR2INjXntGDCv8VSng/hW/UT0KzFfR9fsqQOFSQbcD\nMIJYFwRFrz1eFpMeXJNaVd5VNShwCAp0gOHuJmhaT86S4LJEzWEjwm3zbmHG\nPVCaHSCMKMeRR5U5cjmIgGgDUTVsmahEKfiYpAOv0hqq26Xr6Im5fbK7oJVL\nuWrnix2ZuCN99HtH/7WHXJ854XpFJnRmswkqIJ1yfGxCoLnjMKP2kdmu2zKQ\nn+3z1rKwuHbeXp6Fg1yI+lfTB1Ms9FAWZ9SgxsyqCDz7yDUJB5/mvL/Jzn0i\n0dqMiw0/9mbWYcbcUjzNPqlF9IBe0AYkdIRq6yAEarfYBpcbM6IETGoxjK2V\nt8Ha4yMfUcGAq89Ph+EEyWyeUde27b3M96DjcvBLWrrFqFg3YCKPg8cdJs28\nbjgnr9VVtnVEnjd6KBSU80FMGEtPtPYzfeMBfIfXJ5ZGIwfUUWk+lC+apUkI\nqgG3PmiCaumxHz0HU+VonKzb31MkKkzNpVlHOSIIg+CnbVf5r6KWiKUQfb84\nyqWN\r\n=iXwl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"48411e48b60f08883f88bfa48acde3a369d88c4a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.1e956978"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1e956978_1525894611819_0.6685899433713076","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2f380714":{"name":"primer-forms","version":"2.2.0-alpha.2f380714","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2f380714","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"700ab88150ad592cbd58e0736b93ac0add0ddc6d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2f380714.tgz","fileCount":11,"integrity":"sha512-sDLqqp/Ko0Z8RZSr4rk93s+D5hT6N/D6SfMI+hqf/3ruXiH9OnAkWIxxzwymVEc7oMnYKKEqfI4fSULBpNmK5g==","signatures":[{"sig":"MEYCIQDLCQFAlUqfpoxrjFTo7L/xbDCgB/yaum0ktXWUx6s3uQIhAJtMOpNb/ix4AC0jYs36OyzjvvIMQXDIPoPWJIa+Rn5K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa82y7CRA9TVsSAnZWagAA+GMP/3LVg52yolG2pNvfFHUN\nabQeOcAnRL/I4dUw0OFZvpjFMXc/Ry72xVRxVphKol7Nklhv/Ql4JZ44wxsX\nJlS7ziEZciMbDQbzwy3NidKirIP5Ffwj9oi/Pp+7jdr/PTQ2mmSmyazZfYSj\nAMjY1sYUfF7cGTDjAG9IlFHCNeyHWm2mKMiyNu+Qxh78SIdPmZg313wtpWtn\nw1N4YAwqqGwk5LzPzLF6gLm8bUZq+bodb3UsfOlVHQ5PAfYC0yn4kT5L4tDl\neSCfaLqnTRI91j4C2gzFjgqP2HLNGLeG6/lGuQaQFTgTenwWf+QjpOSkrzBn\nG+IntKW2wkQjvHGKEzHVSBXb7d29tBbFs+/Y6SPI0i12gSnCbub1Tn0WfDm0\nEl5T7HrBTsDLo6xUu4Dc1q8FSW800aq59uMwBbfgnuRjoDNrYsgQkduWfd6H\nm+Tbtk2sHtPHxaojOGwqrRV6WxCAKW2UuErh/iuoup6HKk2PZY8zvCadmQNE\nNJ5i1dRbxMG+CLkH6u38rCvOi4smL4xxcTRpR+hHZE7rJel9UuCAzHxyW8WH\nrjtapN65q0uErsQpwJyxdIoVo9QPXiqmjZGMULBZh7cvGf0WR76qlHrNk0yX\nUoG2SZyzL6rc5YO6cazG0+1Q84tctazbvcuV2RgDmaKje5mBBD9047Rcrldb\nOJFs\r\n=HyCc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"700ab88150ad592cbd58e0736b93ac0add0ddc6d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.2f380714"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2f380714_1525902523150_0.5987871914513745","host":"s3://npm-registry-packages"}},"2.2.0-alpha.51cfc597":{"name":"primer-forms","version":"2.2.0-alpha.51cfc597","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.51cfc597","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1e2cb6a731528ea944b38a412f1d52f2eb73e868","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.51cfc597.tgz","fileCount":12,"integrity":"sha512-x2XcxkEL6tHkjQ71Rc37K8h+qaUf/ApwTVaNTohcFqriHmnMM8JiwAdZC7lSnBt7V2bDo+mxww7WK2RreP5qbg==","signatures":[{"sig":"MEUCIQCZdwdJl7TcCpqTrtPIjXrNZWFd/0+Xe1VH8ymHowyXdwIgcoOd91Dkkoiuxd0PF8PMQkG1PpkQglaesRtKQ0CAByg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84NPCRA9TVsSAnZWagAA+M4P/RYKCtPzR7LQTZST92y4\neOvpbIzVGSWi+W+XmJ2zCRAqBNETOTuMe3fxbNtBoHHCvhC8wfihpfdMz3V8\ne9R318ZsXH0zfO2Xf8+tFFRjzwqSVZe9tZNUIzO7tSqjSg+nqYi7OhpA+8L2\nALxAd/e8jT71TrRMZO0U3nc9OSqwFfMj1eGehcTVLfO/8vPy1JewF7uH+AjV\nTTzEFQulH3j2N3TY6ZK3AHltbvz1pMs2+xzUxt1+SOz6tQsd82GspsJmzq9U\nC9dzojIqMC+knjUAp/YMhXTZ87dbmgTE1ewK7i0JGbx6maEnIrHALCs5fwZ6\n+my3TzYTO0o7u4a2a+lLDGMnFaLsqnJzw9rLt/byr5AONYzJI68Tb85tUgWL\nT9dux1HYllryYccKtX/E0fzvEMliupeCaWCuO6nx+tYKvko9MrB7dnN1TqQ/\nQ0L4JMqJkowP+KKdz6cTYxObqlTgpPS9NMMVPOYiZgjyxgQ1iqpzfHDbwcGQ\nKCiSMYSj0kKArGQG34Y5OBmNsCF05wzXZD43g6ZnS2/PleswrIaf5/w3j7Ck\njpTwE8zrNvm9y0zMf3CbASmdgUeS3p7RuAKkZQe4ucjZyR5PazQwS13+GWr6\nuxsiW7/rnpZ/j4aOcDa/DtAvq8zSMdH+ZcuF1907CzzrlzPlZYeVpMfUF+8e\nQqj5\r\n=tcEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1e2cb6a731528ea944b38a412f1d52f2eb73e868","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.51cfc597"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.51cfc597_1525908302081_0.02379199849777547","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7e6aa5c8":{"name":"primer-forms","version":"2.2.0-alpha.7e6aa5c8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7e6aa5c8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"79826f2eff523434fb0044826ac8427c8335ebcc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7e6aa5c8.tgz","fileCount":12,"integrity":"sha512-WLTvlt/OHYL7GUI7hEX5yI5OKIgrK3bTviNzKeVAGnTkAtp1R47HtfNfpDFTKCBD2DXkcUCIsU7XP4Hpp7VlqQ==","signatures":[{"sig":"MEQCIEB7B1czSMiuhRtqtNjU24M3ySqRfx91rL0VV1D7fyvMAiBpTTH/nEfTHwV97UttNgtKNSNXXrqhfbor8RTTf5xCsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84VRCRA9TVsSAnZWagAAHRoP/1hn4poN2PSOnaXFbZws\nSjSOqM7dWlISndDHSuoUohIMz8kNCdRDdvIkfY8IsUypXuR9V3TwA3517yfL\nOVI4GJaEsT5v6nKEfz7IfQgEiHFN13/+0YYK6HMdiWgWHOqqLWUHwNBQq1mn\nq2FoMoZW5qffg7i1H/8iAd9ypDHHBY4otlrD63AZIlKXje4iBiifNhvaajGa\n7LwKD7bP+4k8FKV2pm27jhwZTLV4qGWxIZ+5PiYzbecGCOo+DlB1WfbvH7Od\n5UxPAAkwTZAPyvdIUKhQXDBTk+xD9WgxQ0NeIzKRtue40RIJioVdtyfRT1Oo\nVzr5uCTxjpJYO+JNLNdBI+PncLtvUX5rV9PA/Ny8K9lynvzz0go3oDniGAa5\noiyDwvmIlWUVBkUSnp2jW+YhVYiOk6W08clwaFtAZCcxxolDTNRUEbhsn1C6\ncIdoke6RuVesh0d1LvcyuYihcBhGcYV/XjxBxcDqGdvto1DOgy1B4zQJk+4t\nywkstNqDcSIyjcG81ATazYmRov/pWCBvJkk4g9XZfFIda2xrk94rSv+y0lwS\na/yDYiOZxWLgpgEQic4Wbmqi8B71hF8K+wBu5LTC0zI8kkY6P3RtjIQrLhuu\nkYJDjikMXOTO88Sx9ZQNFlIU/vEaeemsUIPUX53XbDnxhjfPKqrXsoCA4Aoq\n0MRg\r\n=5UAY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"79826f2eff523434fb0044826ac8427c8335ebcc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7e6aa5c8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7e6aa5c8_1525908817191_0.5173040869776753","host":"s3://npm-registry-packages"}},"2.2.0-alpha.68e2fa59":{"name":"primer-forms","version":"2.2.0-alpha.68e2fa59","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.68e2fa59","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4b590f1471a8ebbe64329cc4e1e54d36c93bb283","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.68e2fa59.tgz","fileCount":12,"integrity":"sha512-j0c7ASZhUozYrSkHTSwD33J/YhquKJQzohvKHG/+8yj6jKH2YqrtqRRqweoPi0uALkSh+LMV1k+Qzs598PoqEg==","signatures":[{"sig":"MEUCIQDnhSj07yLxQLqfFWp0ucPier9qPfAxwWu1Nw36uU3JugIgIKwWrVJreqc6bNYRfAkgFQwcIoKvk5N7k9X9Isuo/gY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa84auCRA9TVsSAnZWagAAF1AP/j1dMG0Z4ChDX60+Vqde\nS4eaUEhrx4B+9Q6IrT5lvwUDBdSZUif6yQsnVV+K4D8PlyVa9b7eXHrcDKwP\n5xzt9QpmBY2ZcgBLUPmZWuMcGpUZ5WpPw5R0b16yhpebt2VnG3PuTt5hnB0R\nlE6/pCpXxL/I0Hu8yykl7Kx22/c7aIzdmuaGY2g95tdCrC5zA8xrXNVotTvn\nAYB2SbCYGwh72toAMtVAxkb+WWBzKH4+UBfIPMYecyPqRCz94n9SIdJm5N9d\nBk3+akXVlxbX/AtsAt56L3FD4geuTNgxmtknWWZkHOEvTA8QjuLoZ9S+G5lI\nNgfAb0Pjl7cOpHklCpmHxKepPE8CncGmaeErvzQ1cBVw8kEtE1NgIudAZ0EH\nRZZcpXwz7btzZwWD/VJ4qegg8v1omBiwmZ7kH+JQ1kVPdBHcTt3Z6bUfIT1i\n3eVNHXXsLM+oR+DN8FyCi82k0e/VVcaZN2DXjUzaztgzzckharsC6SgdSMz8\nSDHXZ/PkGjAvRZOD5/kAU40ybNtZroOtIRmBzAi6KRdMVQcpCKcbmHiqv2qc\nZfHaN4z7KUYbQvrHCoNx34yHsQvrBRsSZOQd2ZjeHrUEr2Gd+ryzdYrXSWXI\nel9oFVctYdMo5LQuVAT9xiM3yQu/WlXwpYz/ulWq3dDJuXFZAfkYhL2moWbG\nS787\r\n=PFTz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4b590f1471a8ebbe64329cc4e1e54d36c93bb283","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.68e2fa59"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.68e2fa59_1525909166505_0.5016057844824608","host":"s3://npm-registry-packages"}},"2.1.0-rc.5":{"name":"primer-forms","version":"2.1.0-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c021aadbf810b64011535b687dc856e8fdd9efbd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.5.tgz","fileCount":11,"integrity":"sha512-kkCVsKVvyW4Crnt8rVgUBfa+wncFaUN5JmUbL72aTCSDl/NUGKpFm9KMJZWWHZq/Y6226ybPFU4ll0oLJA3i1Q==","signatures":[{"sig":"MEYCIQD4ZB/fNJtv8b9X1vCcLLzglYDRgUoafAxn/sWS0197awIhANDx3eoRaMQFWJWbL8Y9kiM+aljzOl2JQVHIoo7am0Fg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa88rhCRA9TVsSAnZWagAA4CwP/25l45ovHlB/T9uS8gsr\ngeOvOrirk58umvjFcuwGJ9R71h3HuElCq+GmUmgba9jUv6y0dfSobS1oWPy9\n7gB1YUhVJ0SLxwFKY0TLaWs/tbvSYkSPubbAMXI78WALDXuNiCpZfgfq7vRl\nGpiz5V6pQqBlt4SuDCIEWtdZuW6hqMLX/C0ID92y1PRyhBq/C85mU4ASwHso\nSq8qiCePLNQZ+RgUMNEuxX4jnCDFvAh/DrOPYUlHihrgGgd74I5qzj10UTX9\nxIEEi3OGU/EvyNhiK/PuCPLRQYDb+F/94TATWU9Cm9GZg7O5Bc2FdtQojJSv\n3nzNNawY6EmhatyIOiP512oHC5eEMKnUri54WnUwwt6IRh2Qb61FNtfXmazW\nP1IyeGm8MfvFlvaN77zE4vIxQv3ybxqerEh3yu1gKmX+rnG/oCnK7lLbww1h\ndPHpwzOR1Lx29aBytM/1tYvArBnnDMf6MnOwKi3go3FTEoe39fVqSrDvU+yG\nUSD0ehuEZJCpGFvLbMDLtzFrkjgiWndslh8SgNjtj7xapntlOJ6QitC89ZQy\nAA8JopFxdpfbe+TV8CjGQ+DiPC8+DdJZCkrWcOj/xLyaBrGAiaNepBsCx4BA\nhKA1N8Fi2WTY6O7QOBU64ZUo0i0gI2B8SIHSlGzcf2BFgHUccGaQIWME8Aqj\nsL48\r\n=BQ5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c021aadbf810b64011535b687dc856e8fdd9efbd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.5_1525926625161_0.13728252635504634","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5f2bfac8":{"name":"primer-forms","version":"2.2.0-alpha.5f2bfac8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5f2bfac8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ea7889e4caab37e11cc45633a1e6babe1e715b5a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5f2bfac8.tgz","fileCount":12,"integrity":"sha512-L3Sn8DFK6IGDdqS1I/OGEJgTIUe4L/bX46MzsqXJrmU8jsfJYnjRwL/DQ1hvp6hqkNlEjcfWXqJ98Fb5kARYCg==","signatures":[{"sig":"MEQCIBLoo6c3jtUyZFrt+8Im/D8XaZPNE/fyBUs+9CnhtCmGAiB6zIgzcPPW2LfTd22ghz5lzsYkX3/0HQljpc394VYocA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9IeNCRA9TVsSAnZWagAAP3kQAJqFxcxU5HjZYXQUuHJn\naBy7EPsW3Wv+JirWATfriteZ+YWf5SQWVSDCCJf5lChynRs360LlJpTX6q/u\nc3X0lsDllgM8XbxEbDbjmXVOpwBumyqpxrFtf4THj+rTKdliyXTcgRA7ayRc\nZjjQIBB4MVSuBZE3kagdvyomCgl+QTMxtNr6bZ6vWUyxHjHG3p4X/QNsGq01\nQduHx9N73MN164Lv21QsySvzWFYBKGCYw8C3cGuOLK6Bu52tTVwDZA74TDLh\nl/IkI0d3pppvzZfurYV6PMzmfNPP1f+0Ebm7TQYx6+qXA2aNdiAIVibZQcWY\nCRUspQjEpTfgPbYXSmCxHnxI2xCOhKDy8rFyIKynRvaRmLBxiNSIOtbdw3+0\nGrn0Jm+pgNas+i/yVWheq4X6Uzy8OCoPtSdbgx/9Qqc5gCv9/rBE4RwTqKJ0\nn8k5R5FZbfqVj1A6+s5SKtNKhPNzVbuPpbIW5DCEZ0luaPzq6MSkM2u9c+eT\ncM/lbvaRnbIhrtjhHjw/VPbJbLy/ml4GBHDBC+/Le2CmOo5EdgZ3uwneXn1N\nlQDE7px+EIULF1KZxn5o3jTAWxG9wfNfYTHRJQ0b39AR6PuXIwSI+fkP/8nt\nNySV+FsYVz5qSLe1jBEnoyOJzlQuFCSR3oLeCT1eZmlyQo/3ocahX0DzSuhH\nRuQi\r\n=PL6Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ea7889e4caab37e11cc45633a1e6babe1e715b5a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.5f2bfac8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5f2bfac8_1525974925375_0.91196926757906","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5c3ca04a":{"name":"primer-forms","version":"2.2.0-alpha.5c3ca04a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5c3ca04a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"602354c8c34f26424cdb01794ae4316c2304393e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5c3ca04a.tgz","fileCount":11,"integrity":"sha512-C3KWM4bgIzqJ10PFGl5Zmfwqa4aSoNodT/rtEfU+11wqtFJna4n1AcEJSnBZpq/EYYOycrhNZSebFkrrnKtwjw==","signatures":[{"sig":"MEUCIQDsAJXYg1emw7U+bQqIbEMrslMuQZSC9DzcXrVTZiDWNwIgVIhefAYQdEH8/yYhpTXs1JCXQ6/HW1uVxYlofadl6B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MHiCRA9TVsSAnZWagAA5YsP/2glQ6qH5CqZg0y6vqb/\nSCD42AVYRU6PV0/e+xtnb6P9K+28s8U+3g77itz1StoVNutFBiXeK+EJdLlZ\nZaeWqm1ZFUH4F/UNHjaCI6HGjsgR+vv60xQiNm7jLjvtqywf8AVgLmPDVgPP\nmZgkdgjSJRAUT8x9lVFyDFk0CIuuHw3rdWuvaB0HMIgdSWPGze6/HITkJEaP\nNL9f0QF50lc+t6dNIJfmq9FC7FNbpnjPYT2BXBXOGW3D9L5pqVQUjwudVxrM\no6LWcoAW1lLURMFnBGUavECtCvT0Xfzl8F1TfxQ0DM0qs5L92sKdvW9X387y\n/Xk/nNVs1lqFBvhP50QHILhFXNAoqyM9AOuGroLWgyKSgKWO1LdWI+w3Gde3\nS4GlPefPfnUAQht5MixYDeHH0NySTyG12DkAWs6OjHtU2BQykxS0tW3Sa/ie\nNI0F2eiSTvj9oyCcJQ1ZazB19OMPX7ke7YIVCgtz48BOMplA/skDEEvnsJTU\nnVUKD88PBrUqSLWtEqvh3MEd/VDvd8NHSHjVCp10wzF8Akxx03cAb+wiTkc+\nZDvyS5MH76uijUguKe98KgiLKH0oGn2c+45gwBNqRQ/rH826dvHnm9Wkyoq2\nRCQhkKkY8eSkJXZzJNhvQn06HpPtdKak7WhgKGbEtUmT0+6hzRKvEFlNXBxe\nk5Pz\r\n=Xf6W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"602354c8c34f26424cdb01794ae4316c2304393e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.5c3ca04a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5c3ca04a_1525989858052_0.0677204309972772","host":"s3://npm-registry-packages"}},"2.1.0-rc.6":{"name":"primer-forms","version":"2.1.0-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"333a4955577eb55bffa61b14d0ef853e35e99cb7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.6.tgz","fileCount":11,"integrity":"sha512-d1VRijCVgIEF74Nkja0zgxrDhhYERn8uycJTPBQnWjPnVh4AdQQWxk/NVGkP41kvdKwG0W6DjurBXRXUgILsxw==","signatures":[{"sig":"MEQCIC3kRQIxoBK/s5/+oQ5ksNgSW2erdKa628U7ahKN2Z/zAiBgLSSF8jYkNtFfOVfXm+4NPCEdbFkkw5XPoBbsssogzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MJvCRA9TVsSAnZWagAAtPIP/jEtXBg1QcAXPv6YLwLC\nNafr7zHtbf9gKjfayb2tGV4GztwgJUudCnFm8E2kArGvdiZ+neLmeDeuB9da\nisW7I0s81JVTp9iUiU9maSgcUYwwJ7W4ml0UnCWdjEuOPXtV3f+6Dq69smFk\nniriQuSen3b5JWXVYVlo480q7QQQNOY0RLWxzZPpf8GR//skngMFLFNC6WQV\ntoWvQ5eeyrp5FMRfB2TZdzF3byjNWhb2waWEVC8fuuriOgMEDTwt56Z6x4wu\njkWRGAPJw4zlBUusaE56TSLp+wBS4h9YQeLUlPDEZPV7kG/SrRsi7rkNA12q\nF9cUwKVgxvlGPImWQYqFIBUZ5p526Bhx83PnAE1aVyrW+D6ThQfd+DvCaCFF\nEJ0GkhC9p1kpsiG4lXxlwRAhmI9+0PDqAaqu7GZknJ6SChCHLlhOSsTkpR4k\nkrNYoIOP1dxubBpJUrydzu1k5kzhfAGOD/2CT2AZxCl2DM7ts83Ehbm7SXp9\nFmJtoJRDJXR3S91jJYu4AWrrmZ5PKRF7gj9ZXIsEPHue8ceS9FMHzMbi5kzh\nXS1Bp4pAjyiSOtzTwNOilY6qd3djW182EUfCHLiI/VBvPzEfQVu1ECGN4f9C\nck0iqxU0YJjAn+YOvP0I3+2gQ1oBlRVS1WEn9xDa1zMOW/Bhd44mcHTqVb+o\ngt+H\r\n=rTVL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"333a4955577eb55bffa61b14d0ef853e35e99cb7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.6_1525989989459_0.7361561186429562","host":"s3://npm-registry-packages"}},"2.1.0-rc.7":{"name":"primer-forms","version":"2.1.0-rc.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.0-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95c3d3ebb763ec05b4f6998a500745c1c09b35f8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.0-rc.7.tgz","fileCount":11,"integrity":"sha512-kfpO+tFC9Z2VVZxL2sF9JXs4z67beTO8dMURI8s5Ak3stj7vvTYmhWvoeex3uM0oxKqIuDrYu0nEU+SiGzyPhg==","signatures":[{"sig":"MEQCIAz9qUXtiORL9H3feu6fOyoBspJlFdwIL8LWm81b1BZbAiBKr2WQ6pVM1Ct8waVIrryAS5GYmWtg+lg5A5jjSsaGYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MR9CRA9TVsSAnZWagAAZGYP/jOxEc0uGWKrVQFApDTt\n2wQ8jDQmv+rdD91gyaDXSyqzuz86SyNY3OkJYF7cTNK5qnViPCeRLvSVTaMy\n6d+lzuE+q4U4KTOWldYPo9LYQ7O/bfhrp0UiVT09WuZc/benkIVaLrk0pODY\ntykjGaQR4gzJuf6EvG2KKV0p+rWU6edyPfiKAruuBESZPt+kbbhzf2oOG/9i\nHfN8ajaYxy7HGiOkRwKiby+xfuHL93/AxCsEJZx7hC9hEEgAWsNi7hgrZsoF\nhWQBm8aD/nSrMxZ8Hahx6ufwj+BgNHkoEiNyi7BInl4voOIyHMITshO/Qchw\nk/0B/jQwK+Yb72RzCNoEarr/HcXDShR+Eydz8S2KaJMuDpazB49o9ZZ2irlM\nqaHn1Oa2KwBiLnTntKnSCsdeavA3zBhKF8mhO2pYWQltWpsLUA+bIIyY2/gq\nWYbctcEhCVO6ADWG+mzPoB5vidctEw7UeXVd4fE84qQFA+Qn+9DoHTfTlrNf\noAzdCD6RXVRWI0C8/wfE+C7x2UGx/oWAQWPM9DQhIp6PlmPBqZI+7OGUlJsb\n0efoO9wiBOmnBkIQ8T0FnYuocl/Z+mHiiBtsHQFHeE51YsrWUjhy+eXWQAlP\nG/X8nklXqWuIHzSYPPA4i3XYFs6MLwh5XxV5M5v0Il0ykYCajkHYmV7/WAvQ\nqgce\r\n=a8jm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"95c3d3ebb763ec05b4f6998a500745c1c09b35f8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.2-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.0-rc.7_1525990515498_0.925514503239736","host":"s3://npm-registry-packages"}},"2.1.1-rc.0":{"name":"primer-forms","version":"2.1.1-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.1-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"70c2d64b37482857fb0e9982e03c5c56d5210f4e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.1-rc.0.tgz","fileCount":11,"integrity":"sha512-n/WEEcZHG1Aabcv0PDKuVlCKLpC+m8ZE5/MTfC8R1u8wGf3sMhm6WOP9Y74jsRX6KGqDMVBAQ7S6p88GHUgt7g==","signatures":[{"sig":"MEUCIQCaAyF5HEn2aRFeIWkI7yGzIMWDdssMJ0sxuDmgrsfNygIgQqrtlljTLfA9s0XPJZLpTtSeGZoO6KajH7jTwxoEJns=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9MoSCRA9TVsSAnZWagAATCIP/1TZYkcouxts2ie/4P7e\nMd77UhoqHU/RNh9fXOxZk02ewPgZRva4UfoAu1Yj6mp0UjIb3sZZKa5bLT8m\n7rksLXtQf0JtT8wbUxASvuyt0hiQMVpwj9sKMVGplcc2CIDsPuuAHGugZsdh\nJxrr8wp2dzEQoxlxfFWk7kUlZKgvcSfLGLMfLJEFlSyHgMCBLamnX+U2W8AE\nx9myQf69D2tbdCSv2SYSRg8lUS416aG1MuwJ1O9FXeiMM0NeKuRaZrbitB9x\nuNui39j1ziSmunhBap0zOeDIV6hkTP6Hk79PgkUuaos/xIKTyg/qWwyfcMo2\n5kKUD6Y2VFsvD44UGbUULo9iQqNNWrX/d7Tc5L1hqbDL7nAJ2x3YpSae+5NN\nXzkkYnfmjEMMOP0oRuu+oyiDnROR62f8iuOowUzyzSGkEZUHZ2ddifKMzUnd\nWQrpSH+EisifaMEc8qKbsXa8sflBIGL/uxgqkWC5/npWpXR0AzZZTo10XaSb\n2PoSzuhCnhdBV1UJsApMfhtRJeF8rTp1Gfsr1Fonb80dqPSXTAxk7D3mzYn5\nL+39U0WX9IzKuXvInfyWvvpBgPNsmOCt3AhmYwPHWAqZPsfnsSLnBaKCLUYD\nOZCZBADztcQG7qwA06i4M//2MYS4rDlkMjTb/f3DTra93fZ4bXB4VJNtuEYM\nv49z\r\n=QgUy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"70c2d64b37482857fb0e9982e03c5c56d5210f4e","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.1-rc.0_1525991945830_0.36468111469667064","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"primer-forms","version":"2.1.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b40a149a3bb0d684e225794d147d3a6bed3a5f2f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.1.tgz","fileCount":11,"integrity":"sha512-ikknAJ/6ewMf+G+JM7nb8igVn+YN5fg6uB1PyOUgO0tdk2tspkqW1gJugr6Oq2QCTppw9ztt0ISnmOz1VuqKDA==","signatures":[{"sig":"MEUCIQDC9ihDeTfpJHIn2g8k2TdtBpmfjQUNi8uTfgUpabHIQwIgdES49QU4myiLrMtTo+cuSBKCGe/PhH5IjxZbXn7PaHM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":64101,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9NDJCRA9TVsSAnZWagAAFJIQAJqZpDyKmw4FPrXrqgbm\no9EGXkHtfFuCfKOtCHyzcPkvfnghCmiYubwJmBCc+FLjM8Ee7lT308QLbwqh\nx7a5TKwQ0La7nAEcvjgaTMsEl+DU+38XAeDM54NpMl0X1RhqXWPCfbQqUuic\nvPKG3Qy6O8QZQeZZmMEqWWBx2nABnIbtBkYWVJazRClNf4R68phTWhKMkSDq\nXdVYZgtS9Acu0UYUGHDpuYum7t+1n96VBPchpgCKQyqMiksXw6cocIYcsaG1\ntlWdIrJzbOCR/H6vGFM5vWoWZcHOIeDVJbSAV6TPgyfoQ7tV5ysc1MC7WGj1\nvj58Z18ikwBjWTD3sDqtYPb62wuoXDYX7YgyIRMaMjjgQcWeOZyXt+cWveas\n8jWlCfLw7KHjiuzOYEWcIerJ/13olLb+jSG2yFwubFy2YVLpjMkNIIYF5mDk\nhyxL5fbq91sbr9wWXSd2JpytE+fcg+UcOxTZScQz/bfbdaCtMBCP8IEHUpnX\nqmbn+TFIgvki6MNa10w6G5BfiuyLttZwOLscpZSnaddThB0j/KK78LZ9rHqF\nQL943JknfCRUxuKoZAWyT7m0gzsnbwrNKJM9Iwo3+anL2ltEhoSo9U7ZXj9y\nyhVgJSupd+fySqGIJ54JBOUjB3agtAlZuRae2zLSWBi5M7gOfqlka3FwfJ3t\necA+\r\n=1X62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"b40a149a3bb0d684e225794d147d3a6bed3a5f2f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.1_1525993673543_0.7757188657486744","host":"s3://npm-registry-packages"}},"2.2.0-alpha.62c2f82f":{"name":"primer-forms","version":"2.2.0-alpha.62c2f82f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.62c2f82f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2d4c96e57b20b6707f59e81a6a47a634bceeb238","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.62c2f82f.tgz","fileCount":12,"integrity":"sha512-0W2cburv36KWkeRHf1xdKEt7HB5BwdPxJC915xsS90SrPGV5xVGRn6umm+lmSetDEbwxiDseVsAIR3V0WphQxg==","signatures":[{"sig":"MEUCIQCSrsuwYycIn/k7XrLR3L1bE64QhZ9b4ZgiOmapvIHXmgIgZAzKXi7qULqfeVTJHBVEOhCKt249dTYi/GiZT+ODjO8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87617,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9dssCRA9TVsSAnZWagAAiHgP/itR63gCEmGdybu58jmR\nHrbntIRLSBWVY0TVO4EmHHIZNgOq6c7ER1PMQbPC8fRgUfmHQ+zxiqD62ON9\nhAzrpKGpyRb7+3vqErIAAD6xTheJNY1GO5EuCaN1UoUTr9IPpf0RPqe1eWhy\nB2Zg1EpBvH0cudVba/HrvvBr4E3n0KNkJZPW3cc7oLrtUYZBYNOu0wOyGKCK\nZfe+7H9TyyOyv3AwKPpfaJtCK2QCVIuTMJQR1mrW5cKNG7b26JRclBPTuKmY\n6El96VWbx5lPOk28RCD68kSABjh1OBSIj1GUosa+4FL87LHFYBvHfiKWbyBS\nPcKjNfqLUguRn9KBvdGzkxBCzCO29uuo+eXrZqHlXISov/aG7Kaowe4YlchL\nPMuXW7Ff2ZJNnby49oUsh3jqWSQRA/3gHX3ARNG8Twyucx0QwN+XKv0ud93g\n3bPvWx7Hq6fp75h682Oj9581dgAT9k+xW4zyrMsy6lrrFeVySTMWgehXFEvw\nFsOEBH21dsLfHCRGMjLcJCQSRtj71/tAQzARi1/8LNt4ojl+jRoBdc1g7WFZ\nG8QhlbYxIsQo/u96mTy7DiYS/+c45nvDMhzpgUyrqPiT+K5f2p8MmeOo7M3y\nZ6vD6TZFmuZOM51CgX3tVBNX8vAnmhi5BrCq/tLqG360Mk6vo02P6DVQHwVm\nY2Wi\r\n=j69J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](/buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2d4c96e57b20b6707f59e81a6a47a634bceeb238","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.62c2f82f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.62c2f82f_1526061868383_0.8790982702363315","host":"s3://npm-registry-packages"}},"2.2.0-alpha.749dd3bc":{"name":"primer-forms","version":"2.2.0-alpha.749dd3bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.749dd3bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"535d2b35966ff57e9268b3cdd72ee76d9d560cdb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.749dd3bc.tgz","fileCount":12,"integrity":"sha512-9eA+aNWKqf9+QbWx1Dv8xBh+eY3an1YSYWpXqfnoZx+dsFsMAbnzXTnZy7ZbbseDQKKdvRDUvhZSBh2sbjbZkA==","signatures":[{"sig":"MEUCIGqSm6gPaMl0jTY4gmDvQ8epORw3ZJ6UuIibhsoYlVWTAiEAgxxcrDLM2D57LLHwaChWwA5gwIj1YkY44cUxvtg0ll4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9eZRCRA9TVsSAnZWagAAyfgP/A07Dc8rhiqbaa+x7bHS\n8uvqT/2thev1jkRLGVwho0HUDy4rTHYAPDJM7MAzVPydfeDWd43AJDbqohrN\neVwxYygGlqy48A+En3Ab/3zDrKs5vWKxK3scxxgZhMjt0ekYOxKXHtqwyAp/\n1q6td0SVEdcv/xwySYVVigAb1s4Fs6HmoPVs1/TLKPkoYHzizPQM0OyHYR47\nJpM/tEHeza4JzoE3sIi3Giu2n89F5qt5CEK6Cgljig+qTQ9ntJIp/ZJEjJQm\nHiH/XlnJ4g87x03ZGJ5V0lfHYrALDTnEHYE/AF4Qy9LOL0+e/8Ekqkq+7Iut\nZz2bhJ4Nxo6xigErcw8u3XfCHYjr07fKypIwv+uDdLQyR4RPR4MUfvmgWexz\n48BzxNcda+C9PWhqmUc0sYt80Ihdbt5l0PcvOSg/Sp2/zS41axZvpYwA0vLT\nKDrtkYNZ0ph0x23FxV4mymjXfHIX3+5pmrv0n67eWMQucys93CtVcgkDc+yZ\n9b/45Et4nkDjRiZ5/2AZ7u6zRzqqJ6kVTnwKpaBxM/0WPXlYwF3qT+n2l8iC\nLzakQYFXXbPQ4iha3cAPOQnqxdC4AHhyHCZNFeGfKVuahcnsBnvjTB9nzqET\nZWwwvvHs9q3ukDbjpWHcfzPfJSCDfe7PRfwB9y1vjfj5E+57QWEweXb7hMaI\nd7Ez\r\n=E1Va\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"535d2b35966ff57e9268b3cdd72ee76d9d560cdb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.749dd3bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.749dd3bc_1526064720735_0.500438459257402","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8673492":{"name":"primer-forms","version":"2.2.0-alpha.8673492","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8673492","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c98079c835706f035ce34fc4b4814f755fc91154","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8673492.tgz","fileCount":12,"integrity":"sha512-WGNFuGejmGBEbjzh6irtV4PfXHaHbwr8K5MwYqaEdT3eg210bvBezQJRFK8O+Fq1d/Dw6YkTLKvyS4QIXXVXog==","signatures":[{"sig":"MEUCIQCHfTz2kx9z3tDT97XMhtkGne2aGyULqBN1ULdRrzQNsAIgICoESFHXCIZ14EN4g78FTTh3b4bFN9v1m5Psy9Dlvms=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9ecsCRA9TVsSAnZWagAA+x8P/A0siDrvmKpbeQeOZ63m\nqoqBY1WQOO1bcr6p++6/Xxj1iz+yNQtt9YmvE2+wtQZdctbj+JPKJqxt/NKM\nLwZU3aevSqfGAtX6upkgou/6gm/uibhm4HeT0yDX3ooEbkTfA8Xvt2if6Sw2\nueIlaSY1hTYib3lXuVVc/F8JDkUitf6Oj525gsCiHT6T1VVNOv1mbFaY/qgE\nTXU09+t08lxhuvEx86eG5bFj8KJ1M2dWzhjssvYh5CoGwu8EiBjL9JZU6ncJ\ndjVwr5E5CJIwoJ3K2eJwDMQzrAKDdprDdRzu/K2tqSKwGoFAZ+ZB7IEFLX2Q\nY/FO2KF1ys5t/5/cwDJp2lc0nW8tWPn2WpwyUmsRa8VLT94zY6MpLq1Od3a8\nsc/33z2z25yxdz+j3Z+JCI0sekXNjLPUH8urCmvmHw/mkHEKis3EuTh8SAGd\nNZhwbHsPFNGNysSatV7lrTCu/TRYvcXsw/bsbRk7Ugk66AYWEvPUkPqqE0Rs\ncfhFezLdbdnttYlq+xFzZ8CPOwxNPaVz0hTUEEuv6EiOZfIBmyBZ0it41XPz\nSqEeXLxNBbAfEdWzPj+dSCvOGlrz0S2SjyjAniDWwxCqd0pgr+luqwZIErU+\nXoGv1tYE7n9ExO91KKvTSos2V7YaArwDQITJDYMxFjFITaXUl7Z0lrRRzQQ2\nYTRZ\r\n=Thq9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c98079c835706f035ce34fc4b4814f755fc91154","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.08673492"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8673492_1526064940053_0.6214471442071956","host":"s3://npm-registry-packages"}},"2.2.0-alpha.dde66593":{"name":"primer-forms","version":"2.2.0-alpha.dde66593","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.dde66593","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4e31bc269f431906943fee3f4f4e13e1509382bc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.dde66593.tgz","fileCount":12,"integrity":"sha512-gPq80TbC7VRj7gszh5qyzAq8EIf4iUD6XHVCDEKjEb4ILJrwYnMf1fSU4LDeA/ChvLTpj+0ySz/XZ1n5m2uTyg==","signatures":[{"sig":"MEUCIF2ZZockNYgbaKe7ZEgHgUFjwWoCGw/XJBqZpaVkuG4/AiEAwTNPSqhZRNwaf3UMGAZgMAF8aIKwYoqmvLtQWFXBKxY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9eobCRA9TVsSAnZWagAAfe8P+QB9NC6IR3m28EmVJTlw\n7HZ2qJssLwiiCN2q7GaHeK+bPVS1kv9Mz3pPxult8UGz89TTfyYmyuHRaIhG\noDufVBJDewjsQpK7a3N6aQcHs3Xa6BdlbikBJbZ6eJbezoNbodoiswaMiSVw\nfHuEH884QFTdkS2nNs8/cGNkANTvMotwEdBdt8OJedPCT4sNRR70l1UyrI6u\ntxNZ9kFdqUfstg+3UOI1eWzUqUFWjtTkEimjS5ONg7W7HZqP9PBE008UiH1+\n+nPKPtqauXs83SY66asre9Io/5VCn3Y2N4uzomM/joA1hD9fpKmTSrpDtk0Q\nxpLnhI+4GErE6wZlBCfLbIumkibwm4NdZKcSSLCMlOtTB4fwHeibImoLdK3m\nDVVzi3vRtUBPeomzQj1kwsi2wcl1TzOZfiUadnXQxe5DAWdJPwTQwrI6k+/B\ny5bVJ8E/mwtRTpawvKmp5PgyWPwfbptpEYEbMGAXo2+RhTmdW/9onged8Ohp\negc+4YD/HCIuHFJ2UR11d++x40QxkkT/qCymPpC/aEQJI01GVB2On5vfcuwm\nZoBtMJYjrtQMbqdLBsNYpoJ85E3DjfMoZhAhNrIpVQ7JZWO3vBHGbqsZhUoe\nF16Pzv9hxtO+pbaKpZ6NUD8DH9cpEL6k7yemhR0sEWaskPagjBTP4I3P039K\nM0ts\r\n=jIGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4e31bc269f431906943fee3f4f4e13e1509382bc","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dde66593"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.dde66593_1526065690957_0.20342598327773675","host":"s3://npm-registry-packages"}},"2.2.0-alpha.653de47c":{"name":"primer-forms","version":"2.2.0-alpha.653de47c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.653de47c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4f3ca8bf7a3b32cfec6781158595bb1ca8f5da2a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.653de47c.tgz","fileCount":12,"integrity":"sha512-TiMnDxUpsqsBsiWXl+yW4piDI5G3LXI56ixSLNuG4FDYOwaZgZINieI+u7WTka3bU5jikYj+CpZL/d0teSwHaQ==","signatures":[{"sig":"MEYCIQDuX1+xnmIy9VOh7c2LeSKdtYbAWM/zwtavjfwpzmFt/QIhAIhP4Wl53lclgTbBJu7FfM7FQ8U1pmMIYz6r96Ul0njQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa9e8aCRA9TVsSAnZWagAAeHgP/AoshAyoPTkevoGsut+8\ntpSZ1xK6hjQ1fjB/L0x2P0663uXvUlTcxlibKMR7oY/3ksLSX6s/6t0xviuI\n0prDaUC9CHKZfRBLSQFEjUz7V8QXwGV435errmCptMrGClrp+GhPleS7gZTX\nN4tnkVq4KoHUOv/buKTR6GNbWeRAySXXldvMqzCr6JSvSDLKqBC4U9Cs+B3R\ni1FHq8xrbh5CbfbNC4PKskOa/5dGmgL3Qu+fWjGM0EiKa95V5YC3nK7mbjjM\ns1IoUkGh+7+3EAaUHWKLjJgcqOpHbI0pX7zDHuR0Qgdwbwro0gItmTdfbp5Q\nswKf9n9Eq+yBmIso8p0CKkrLiZthgEmQdgS4I4euD5IgZW35MfmUlro3rV0G\nGanDdq6AUXqwgt/q9RzaHrJ9lO3St294gRcObSbiluCBJ7dQd2qf7irIrGRv\nrr3g+1Irkhi6o6CFQOJ8ud/TEMsU1fANZiRgw79MXa0k8F9hbBihGOlm6sID\ndnZufr9pG1iIotn0y7pUh8gcAbBesnGBIJFF7jHQdYcJdA7lJFgHgAiC7064\nThL/lsUi8T+ELxFgrjHsWj8LydiBR2aYEIL1ymMBWUPomLrjg/I7HrSFMtt8\nBLaeGmJfRjt3LqghsiXjW/Dv1ZL/jYmQpBchQqlZrFiFlZNhJMblFmwsZNE3\nQdw/\r\n=C5Hp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4f3ca8bf7a3b32cfec6781158595bb1ca8f5da2a","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.653de47c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.653de47c_1526066970037_0.8006402278531706","host":"s3://npm-registry-packages"}},"2.2.0-alpha.73ea74e2":{"name":"primer-forms","version":"2.2.0-alpha.73ea74e2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.73ea74e2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"85358f821850ca3963b292857242fb8b97e08687","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.73ea74e2.tgz","fileCount":12,"integrity":"sha512-dXP2JgwlOXZ7+VdSfZ/5rXJ/lH7irJDHh0ybKshy1r98E21lLrIwOjOBYytfzRjB8deWnCmAm2xIuYQwcnQ3QQ==","signatures":[{"sig":"MEYCIQDSBPtuMEybL/jE02eLKAw68ZMAYROctCLFy/t4sp4spwIhAK8TQEdnNiIWpRwoBNtIbAFhQXp6bVXOOVdGPxFwObx0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cBUCRA9TVsSAnZWagAAHWMP/1yUpqi49x6s+zp7DyA5\nqv7Wh2pCMfby2dJ5j6i6YVrS2xUMnE+pWLgaDqsgywOUbebd5Ma/nwdQ7jEk\n2lhMwEKW2YoUOexo3srjX1RoqsJY7KinEw1+sIJGY4WkzCrxKss4tkSYP8qC\nY0tBfTSP45KBx3zrQk5ZLdoaccjdXHV21avgo6va53e+xfRyfLmHwBBIbDV4\nrrQXBr/v1elrUi4D52fmMd4TyDRH64FC5WQSnsh931ihsOVMZLdgZDDxAnyv\nL9ojPHrb9oEMsesYiPDppYrkdXSgqyjoXrWKtiZLwjWc/QDmznN8W5uk+XJA\n4zDMyuE31aj1JA/+TcgwVkM7ScAf/sw2pnBJ6pLHOQNFmnfL5fYEXSUliWn1\nrUdEuMLh5OaF9dbZ4RB4YKEIwokbr/k/45f+bJjQk5WG5lPhw6ppP+StgiN5\nNsiMHPbOTt1Z+1vMLfr4f4pm6S9k/k4QCz0TlI7dTTq77a+WC/udGXP+gz3G\nvvfZERM5HvdLEW5XgI/i7ryoS3FDNa0C1ehcee8DRyatAtY6JGeqGr1jrRiI\nD8mZy54l+uYw4eeKozNdVtvxsnFbUHKRxEkWJor2CH5lPzqIyI3v9fWmWdlC\n6KFWpB4spuFCZyC8cU5D12tBLv4WzGP/UNmhfQjcSeqtijxN31s0mwz4btj+\n9n6U\r\n=4xv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"85358f821850ca3963b292857242fb8b97e08687","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.73ea74e2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.73ea74e2_1526317140137_0.6577529272555585","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b92c57d1":{"name":"primer-forms","version":"2.2.0-alpha.b92c57d1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b92c57d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3b009b98b11d066fbe2c29fcfa162c1633e27292","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b92c57d1.tgz","fileCount":12,"integrity":"sha512-qo0DjlTGdkNBzHKz+K8ae6v5wMOZMoYiAi/MLlZJM8fudpqJl0QODI4ja+zpKL1kwdKWtIPdQpMjAuiuYm2aMw==","signatures":[{"sig":"MEQCIFbkkgqHyDPSWnrdikQljI0OPJR+WLBp45gMNMbYU0HhAiBUNygM1mn9HeEd6dHMeyPL8eUX2c11rOCegEGFkNf+yw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cEbCRA9TVsSAnZWagAAjFIP/RbHGgMetP3rWpVpoYUB\nAJxueQ9D1baKoSsIyfI/Mzuz5bJVQTWZAe0+dV5x0WNu6awUjHm083hngIe0\nn1MwbgWEWLd9bn7VfDU4U+kE1i4i4dWH3HAWGC+Hq+6TnMfISOXVVe8DZTDL\nV6vGpw56aOj7kItygduZxJy0JpUaUGHWvuQk9cj2Be5Ivh/OUfrkFjh+OiuY\nxh8c6s/XVLx8Ob6qFzP0NkKmeJve/JmQbBrrmlKr/y08+ahpYXr2glsmfQ57\nYWhBK11nrq7tGeyzke/jihwCdPwb8/T5pj84GrHdcaqUuv3yVrubF5l+YQHI\nD6lRlhRsD7s/1weYlZZqdBwn9ejlN+sti5jvOqIwQPKkZPVjfivFrVGJf28a\nDEDigtXYzRSTxTSfWfbpVirnpRRJH3gX1DjcYDzEF5NBTLwvd65/mhss75oN\nXzEF86Sf5idDxIG5Lz2NxgJxeixJuMq0fABWnBzNMZ8g7z55z1x4nJAhbUM5\nPwJgp3EKMwdppKcYSevs7Kf/2Mcr8bxAcx34aH+EXOvps3gi/bpmDP8/v5jn\nLGjeUD1FYnzR9/kAsa6XqeeYpAB3mO3OHCnTvghmM+wV10QnYNhJWVi5f0VL\nAcXcG1v3osSiVuPvHPcbnFW13nYrLyuPYBldtj5aQz+REXc6TwnDsfgS1U2L\n/8KC\r\n=aGWk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3b009b98b11d066fbe2c29fcfa162c1633e27292","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b92c57d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b92c57d1_1526317339351_0.5552612057901132","host":"s3://npm-registry-packages"}},"2.2.0-alpha.814cdd3d":{"name":"primer-forms","version":"2.2.0-alpha.814cdd3d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.814cdd3d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eee2720ade6b85cb7043277423d93c4b5e368494","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.814cdd3d.tgz","fileCount":12,"integrity":"sha512-vkpfN0b955BZZE0eej/ZIWbqqAwHFn8WVFyqEmjYUo0T2jnvg0WIhb+jvCKJKGFcwbH8zOTAKKz6AAbfHl/2zw==","signatures":[{"sig":"MEQCIDE+w3E181skOEaSG2NAR7L8XiuMhRDk1sH5bRl29QHkAiAezhWFVFc9ONdMfXfOIu2uqgTftn7tGXeXJ7NC8MoSfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa+cJ1CRA9TVsSAnZWagAAhpkP/29k5uY/ozgVAxs+cL5v\ndfAKOGtxYDse3YJIEhLYgq7L53A+M0RfJzIPGD4jYj6qi9CeuKikin7Z3hJp\nZEE9qy/ej091t+VhSzUUpz9Kgndz8PBIeOYfEpOT98ATG5Uo0kfNw/9S68Zj\n+MefaT+O5FGwTMktc7iRrew9AqkXeZj4PxfAs0NVJhyQgmY5xtuZd7/Q3FFt\nVcU8NW2UW1BARZ4wRp+Kz86jWn2RZJ/7eZ0e0JYqGP8heiM32YLszVHwedMv\nGIlSFlA67wPBNQyCKXF/im9L0cjmRDBGjVUzGuSQAXEvHETVjUSYkPD8pklx\nufuyI+EYFpxiNHghwgn3XyfmC6GQmRb0FZWL/GTIUAPDEDs92S8kXNoTqbaN\nB6soC066F/g56VyvJhn1PfnDT0tqYBlxWrr4ELP+LGUfO+C+2mX6dGfd504w\nPRgKzQ/nPxCebvqjheuMqGsrOlquoEHv50cmRXFXUqC5o0wFP2FvbqljKCmD\neWLhTeI1Sl+MtgGnHkCFE9YBwzu9sF0l1ImomdmnLYmNMmZ7+n7MSdrJOlAp\nVoyUbnGTfp+uNBpml7GxkS1hfmwZyL2CKD1FDF6JpNbqmXpwaTDiYEUH4tP+\nAUk6qcS/JWe+noVe0GqJW0clkMHvejH7oVshBk18HlQ6QZOB8ktFso4XUJxP\nKH6Q\r\n=XjnQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"eee2720ade6b85cb7043277423d93c4b5e368494","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.814cdd3d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.814cdd3d_1526317685034_0.6517970114870095","host":"s3://npm-registry-packages"}},"2.2.0-alpha.68e890a4":{"name":"primer-forms","version":"2.2.0-alpha.68e890a4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.68e890a4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ca7478b8a8b7e3d42a9f14c64bc75749ee0ec01d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.68e890a4.tgz","fileCount":12,"integrity":"sha512-bVKoOH1/4Vo9G8l7Ccoz2vr725osvZl4JUbmpp76+oUdz1//4s4tENRkmNJy6uaKR4jT30+5RU4ehEBEfQPqqA==","signatures":[{"sig":"MEUCIGoFWdKZIb2BM4p34+1N/lB0Fo3xoPsWwCI7vzbV24ZyAiEAsyd79Xhk3MJhN1n2L4+tAJUaeq7Rr89TzFzEVpZ9L3o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa/wbpCRA9TVsSAnZWagAA7HYQAIlWD7mACNWZFkk2iNwE\nN9AmHxxvlTjmB55Dni1+lg4kojcVe9pariWM362auPO0NU/vtYP4TrIpDsCm\nCKVCPUd+IuQyP/CaVg/DKiJn2TdZhDeEsllU5EBYoHu7hR87qangIyLo29U/\nBux4wGRX6xywZstoqB2TGpvtjrZMASn5xjceEXRT/JnKETJs/HoCHgQ4PzOj\nuUQs7ps5l646efSmHfRfE9wkDx2cWU03k+GErtHHr8XWEbOnqtMpHa6x697I\n8V3aXAu+BbBA52BxvGPSo7NsiBQVI99MFVxANMd9T6KnizrG0Af/6uvCitOq\nNi5POP6pdxIEc5o247leLBotw0I+WdN88BYSq5f8wWt2itsng1JwbDTY1NG3\nFoHWkWB7rdVhhJ7V/0HWTmgUTor8AIkzh/g3npYhdSPtDESiC3XHcF+527ou\nY2jmaVRweZco2KJ+ANziurc8QiY84HRB9EIwnMJmkFjUK3a9s7hy4BupocWq\ni71FWAqF0Oys2j5a9P/7Zvyh3naUA5MMMQISZ/BOh7BCTPcjB4GG5HWL3mkM\n+UqilSAOyJhHJ8w2+pqqAW1zvtkm+NAn349l9hYdjcd30VOYjIIYf3XoGMDh\nHa2SUPq/sF1iKrFahY3yOMCDU09Wu1mpoF8I9jcaFY7HUo+lObINNRc9rLqx\nkYel\r\n=cVX/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ca7478b8a8b7e3d42a9f14c64bc75749ee0ec01d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.68e890a4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.68e890a4_1526662888710_0.758376192212121","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b088b8ca":{"name":"primer-forms","version":"2.2.0-alpha.b088b8ca","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b088b8ca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1419cf25bd6c5a08f62d76e8ecf65677fd53efb5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b088b8ca.tgz","fileCount":12,"integrity":"sha512-AuV6zezuseYiVvOfrnQWIFwMiGp8mat/lBzfUOseLQbWcB4pU2F60Db3TxKi7Gv7f0azquxhfHGwWXJnGtI0yA==","signatures":[{"sig":"MEQCIFhZNDvmCpgysnuZRbwhuFxVTu+5Mwoi2MpzAPJR4HFcAiB+KoShtO/okjG8IF1Bkub+pvnCWltqH4FUKKeYYfOvzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbBdeACRA9TVsSAnZWagAAvgEP/RBT2Aa8kr7MuoP2Ym6B\nHfiM5tq6NVKwSzcrkALENkvybnksV0efBma9l3C5j+DqWGKtGX37GP1nAznD\n5gCXMkMtMp/mS9UtvRzpkAjAKkEk+Mb/zgIe75W1wb2nPzcr7bDQvd7l8jhL\nAtpIK94iWp/ggfygWh7tpDlo/cT+JKntSlAuraOrw50wXv6+ir6KHEacWAV6\nlP1KBFN4wiK8nIyzq8kkGHcMK8yJfhuvV1twjp9zov7uVTAqbHutjFjqf86D\nTijbDoMUXzm3oJRk5vMNC+ALRw/fZarkZUpuQPs6W9JvL7rKbtFhsQtldaB1\nJGy3K6Aij9pUOU0Ey7PvGFe4fxWZDNWB+l4jvNjcvMSXxKp0cgU23BH8Iewh\nsaczvI7dC0SZjeMTe5446F4H0dmkfA2gqNhalfKNzFEkg7kgABvtMieooqzU\nPjUdoIcfbs7ZajW8f6/kP7fJpgUzVdMVBi0IU1bF32OJdNe5CWWO4HKd0yfY\ntElMFUauZz0PAS18FjERVhXNW+aU3r7sB9rCkqqvkPE3DEEzGv+KH0Uz/Jr4\nuJRgpv0IevtDMCUqP9jc3tL2aJuws7/O4J5YomFlMOzyHm5zwr4pb5F1NMyV\nFs2TF+LMdaO2JsueNmck2/0IH0atVwDU094wY6Vh/5saUP055OnH2NlG+Yil\nLHx1\r\n=KdVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1419cf25bd6c5a08f62d76e8ecf65677fd53efb5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b088b8ca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b088b8ca_1527109504436_0.2009834931385417","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4e70f02d":{"name":"primer-forms","version":"2.2.0-alpha.4e70f02d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4e70f02d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0bc1ee5c8fe4e621e9316ba468a027df17434d64","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4e70f02d.tgz","fileCount":12,"integrity":"sha512-YxHMiUBjeb/QJpmgohpht7MWIlv2smLlfyH3s8XdjwhlziYkPvFXl0bRDLX/NIYspQWgti+27n4o/um51zZCHQ==","signatures":[{"sig":"MEUCIQD94E0+mEmxj9x/I9EaZthPOSQWe7qBsKisJuHZtTQ5nAIgcAJ6az5isGqeXkj3lY8JIy3EQOWiBrTsLj34l3OCIps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEdv0CRA9TVsSAnZWagAAxVEP/RfPjdlVLrqrGZAA54EB\n8zZn1OPLNJzf59efWqVnDRQX1yU8NA2TNndQNV/yE+kPcjIA6ZE6BbxYXxM0\n2m5QcVdb7/Iquau1i4t1c1APyjDs98yyff4Gw9OyuRIyGJSf+uyHwpftqRNs\njz2YZxYvFx/qLh860qJPdadKh48RZWZ1lH1ctTLqCqUONCKySYqUBcWGiOu/\nSoGDi8a+p/HYZYzss75dAxrr/+/HfOocwK3W5vCSVjzemUJWMSp+a3zDOS6q\n14cwB06vcvvPcUP6k2s2AiV5ml3yExVutrJLYAa0kKePcnWLY9VtfX/63sbP\nrH+vVjFPVTtuAFV2gbg89ogsiSj50su7fsTCYOD1o2+00YcqOrEtTorIoi13\n+bLKFGRkg06y09r+ZvR13hYxMyg3mwHWxURDtFaJsM3X+z+NJMGwk2gCL15f\n1qv499CROG0hvmbiu7ciwo7FPZ0O6M5PDNYuD90E5wLCq5qON3ARv76jOexU\n3PcdhjhE4eU1YYwcmWPcDi1C2mY3WR4+WBg/8ZOajQaydC7ODLtjlJg2uhH0\nwq2hLI9l/VFvFgY0+xVvfmz8lLBGsCcbEL5Rm82qWMfW9PcEiqOTv5OP+Lu8\ngtYm+iVpH5aRtCCyqFrP33QvUYDqzuorkHxcQ4te6/eRoT+75nsPohWi9Q+9\nzatf\r\n=anHU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0bc1ee5c8fe4e621e9316ba468a027df17434d64","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4e70f02d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4e70f02d_1527897076612_0.5640130835460968","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b62d989b":{"name":"primer-forms","version":"2.2.0-alpha.b62d989b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b62d989b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ab20917c32f7c342d5dcd4c12f638f0e551b7bf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b62d989b.tgz","fileCount":12,"integrity":"sha512-eP4pYegTjvicOI5gX3DJBDY+jSpoQBC9zIXrj9si2KiNyiBE8MByGKwBvzOP3zt9V0QAqdUovHCjDFHBj4m5NA==","signatures":[{"sig":"MEUCIFeya4cR/o1b+BW8rVxMt4WBiINX9zN2CA9NJDBDIuleAiEAs3pTVXJEaV4YekFBEsCzJcsQhDL+vVJ1C1k8pECSoys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbEdyNCRA9TVsSAnZWagAA5sAQAITSnIhf8P2VbaP8NXYa\nSpvdbJgenfgcVwgX8DFORwZt83fxQMw332gWUySj6FUldq4dvyZo1ZoDb3KO\nPwnbeWXRaCQnzi399Cs0EAJO4YivyK6lz9sUDykNAdeJgfZ0wzL2GhRuM/+f\nlNEhLRUimgbwuopKfaXSq6bWuKwETDcOnrNCx2BOuyy7YqillwpMCfNOLIYU\nL0IpnCXxLX4EbNmyFDu/etsBoahh5YLzLyBt/e4Rtzixebn0T1rhdWfQ5KYj\nAOYwgJ7JQFUT4ZsV5HY0Vffh+8hDnIfRU9+qQkMbX25Lyud+e8T6ei7g+3uL\nuorh7OR6AddbgG/8/FmDWBTQwQL1TM8KXRuJD4AOtrwlN9emk9xGT8lHmM72\ndS1/WWNzkjSxHatluPthfk0UUIIB5qNWJsGphytaIzUhSyvrCPSk7eEyjAMv\nVRaH1NbaIRp3c77VAx8xczM3EtOzER22G+Pcrsv81wyWIgvCi0FgSJxm21Xe\nEudgkU236WJhUco1nZlLCNvy8Xsm+um+EJ1hrxNoHlTjysLnBQGONjJohdym\ngO6Sic3Gaj/Rs6qMug3/AQE9vXb6qblWmXAWT7iP6OLPflYKR474BuvYGXnY\nOUrgrUoAkmOihJWYXUlwcKQDj5AX+i9ar4IoZSkz/fZk3QysEyBEQrrQalwT\nJ4qX\r\n=iji1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1ab20917c32f7c342d5dcd4c12f638f0e551b7bf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.b62d989b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b62d989b_1527897229360_0.6948786996750325","host":"s3://npm-registry-packages"}},"2.1.1-rc.1":{"name":"primer-forms","version":"2.1.1-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.1-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"056a70a6029b764735a51db5533f5bfb0c28c5cb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.1-rc.1.tgz","fileCount":12,"integrity":"sha512-iGf4eafuNA4L38nmm8eCZ6WqhEJtl6GWnnBrp4N1g7SIBBHsQv8k9NpuVrvoBbFV4XIUZ9CduU6GL0aP0SnuIA==","signatures":[{"sig":"MEYCIQDJqwTA67D+hIhsZu/vKxx+SAyGe2gm+2SS5K3HqjELoAIhALNn5nxsn9DmnKGV8saLs7IabWfEy5IUskLlzltdEmit","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"056a70a6029b764735a51db5533f5bfb0c28c5cb","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.1-rc.1_1528930517521_0.5424780324519036","host":"s3://npm-registry-packages"}},"2.1.1-rc.2":{"name":"primer-forms","version":"2.1.1-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.1-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6bd3fae4d15148f9d2e7216886fb141b4407b5fe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.1-rc.2.tgz","fileCount":12,"integrity":"sha512-pjxZwnwXR7zv106ern27aBh4cWQfgg1ktkKK/5KMIdt6ZgduAqdeeAq57mt1j0zz/nGL8nN09dnuTja8m85Vew==","signatures":[{"sig":"MEYCIQCxqdlWQJmVNJKskp9CGbFjVuW79IIuqU7Ar2fLtUIOJQIhAN74gcDObOSDxZgRIL3ZYskZxhq3AOHx5TBYfmGrmXFF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6bd3fae4d15148f9d2e7216886fb141b4407b5fe","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.3-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.1-rc.2_1528931155438_0.05348874544902982","host":"s3://npm-registry-packages"}},"2.1.2-rc.0":{"name":"primer-forms","version":"2.1.2-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cd1eef4c0523466eb5bc6fbdb18189bf195b7bf1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.0.tgz","fileCount":12,"integrity":"sha512-0AaKheMGYxiPC+mvY/XmL8bGIuFhy6nKDgEB38Gutvp8DJsHh33I23SNACHZD0tLdgXZhGOgRak8KzZ0E9nhyg==","signatures":[{"sig":"MEUCIBNcvYO8Hi82/jl0doXBzCFOcB+gjiTa9yJoWG3VVZvJAiEAky4N85bP3TIjOlc6rSHnl2M+IzDMRKf32+DEzkWY1Qk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbIawwCRA9TVsSAnZWagAA0zQP/0OojZpPUrNIhM0K3OAi\nL09ENvS2SYcC8eOvKUQlqtjvL4CCtoWhxTh5GvLUsqc105GYpLhxUbrUMFXo\nqsJ1UiMO/kIpAmzpwbiO0EaaMijYyXE+CFREbLtzfef/Md3fFvgSdfzlFmQq\niwNWCt3VJ5IeHeSdDPyMxgJ+lGJlU6AHnwPWiBDF+xbsoHxBR2lZfpCA8Mfr\nQBUt8tHkNvbAy+PzCw/No53W38WIFECcNtORAoN0uAfWIYMrzDFQtI+ZV8ix\n27oL/mdZ5aXuR+6yMEqCukoGrE2Z08eyRZ6dWIttU5u99rLmpjYln2Y8yD6R\nG8aLDfNrctcnxd5U6Krm8t59s5+ubxY/iEoEk1DVQFonRwlfwL1FdzDFChpa\nQdAA7chlZPy4LT78oDbQrgyUq4Hbegt2xNrdP90hS42Y7qczEr87taF3W6A9\n8snjKM93kIDNYoF5s/3f//8Y9S58VvKQ5BET/kIwtfDOSyPlNsiFzrlNAAkB\nSFj0ypuOYCy+jU3UzG3KIZxMdKHXzJD33rvZ/82PPT+z8mDj5aZhsUQfdJ1M\nUjzGm2LT5EdsCAYcxsZVsEwHfVxNq4W1a+LWiphkE7XV8hc4vOc4CRY4sIO4\nVebHm/6xmPYylNclDc3ZKJ/dCcAAoiLdp2N3o2dQUiVTbAhTYZO4qs+M9MMu\ny+fJ\r\n=/OMT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"jonrohan","email":"yes@jonrohan.codes"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.0.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"9.3.0","dependencies":{"primer-support":"4.5.4-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.0_1528933369745_0.6480487398968187","host":"s3://npm-registry-packages"}},"2.1.2-rc.1":{"name":"primer-forms","version":"2.1.2-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"106cc376cbb5d35726161f553d1c37bb79b0db3c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.1.tgz","fileCount":12,"integrity":"sha512-+5CbTMPdCv6imP+EMeRJfcCyfHSgvIZKTuWZ/YNm7gqYrlkshEpeoEo6vLTIBXwalaXV8MxwRGJctY62GWBE+w==","signatures":[{"sig":"MEQCICzBklvi2W+lSxdNXrp0HqN2h5zI5Yp0KU83bAMKsCYUAiBvpZCp8YTpgBisMNMDPJoCq6dIqgd1nFwxD6nljnfoJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"106cc376cbb5d35726161f553d1c37bb79b0db3c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.1_1528934900982_0.07474709557117754","host":"s3://npm-registry-packages"}},"2.1.2":{"name":"primer-forms","version":"2.1.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"73b9cb83319a8278a9f583298bbc9b679c2ecd45","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2.tgz","fileCount":12,"integrity":"sha512-Tcs989Bry68T1S1saf0LPXWxcMJTzAK90+6xChj2DE+R0WrNd72bLtdRYryfgwsxclVqDy4IWH/Ap0gudRyplQ==","signatures":[{"sig":"MEUCIBwYjgbbXMBAWVHWAYTs7npE6QvD2M5a+Ve29K7lNAP1AiEAyptd40KwD4qac8mFQGmxz/NCRrC9RhnoiZvJX5j2EHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87589},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"73b9cb83319a8278a9f583298bbc9b679c2ecd45","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2_1528991476769_0.03736301512722173","host":"s3://npm-registry-packages"}},"2.2.0-alpha.87a2e243":{"name":"primer-forms","version":"2.2.0-alpha.87a2e243","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.87a2e243","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e3955bf85ed83290410191e295d890e7a957d9a7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.87a2e243.tgz","fileCount":12,"integrity":"sha512-xnHExKGNRqSMOoppkefHHp6MxUWGAzqwTBfXFj1KqQnWkpLJ80jxuZ0mM6iaocYgp2wnPs18HGIM6rs33Kwfzw==","signatures":[{"sig":"MEUCIQDgNheQg6qvWlnsC1y3QlJpG9F9tzJ9p8AsigSnSPLX4gIgYCVyUAnbyOePgS/WmW1lpeZaMk4MVe9n+sCkb9XAWwA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e3955bf85ed83290410191e295d890e7a957d9a7","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.87a2e243"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.87a2e243_1529358519973_0.7912376607315397","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6d79c2b1":{"name":"primer-forms","version":"2.2.0-alpha.6d79c2b1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6d79c2b1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"392f2590e7d47296be922d339a12fe0998ca207c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6d79c2b1.tgz","fileCount":12,"integrity":"sha512-PobJH+hT+VSwFe22BhUvxQhYZfVj7fGXOAvwekeI7ud+tVUeubwEzPS/hwUNw12P905skXPgIW+BE9rWVEgqsA==","signatures":[{"sig":"MEUCIG6XzHsvgbZ3Cf9E9C42Cqb4sAZvwy5wRXbM2G7SJ7q+AiEAjFJXccrrE8EEeTnJQ9MnC/2YFk/k1p45CGOwm3oR6QM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"392f2590e7d47296be922d339a12fe0998ca207c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.6d79c2b1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6d79c2b1_1529446445807_0.7374986145666309","host":"s3://npm-registry-packages"}},"2.2.0-alpha.71a72cda":{"name":"primer-forms","version":"2.2.0-alpha.71a72cda","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.71a72cda","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0ea72ea86aca36887c82623dd41b2fc805a12d87","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.71a72cda.tgz","fileCount":12,"integrity":"sha512-NSC93TLbgLN4wUdJJjAGh7dc1BukUPl6ShXpsugYTDmvK8f2geyooNNhuIWypw+yeMbQS6OgEGZA7AMRpWlchg==","signatures":[{"sig":"MEUCIQCPpCbjneuOzAAYDwKOloofpLAoKqwiVuH993pvuQycSgIgD+6vPMHTGB+hmpeTkqJZrpP/FkRnyI4B3F5jKETbchs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0ea72ea86aca36887c82623dd41b2fc805a12d87","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.71a72cda"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.71a72cda_1529447675090_0.4982311002294868","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e78fdb9a":{"name":"primer-forms","version":"2.2.0-alpha.e78fdb9a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e78fdb9a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"41cd79422483046aee7d57643aa683eeedc7492b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e78fdb9a.tgz","fileCount":12,"integrity":"sha512-g5gHlPWoMPUIznuYUANRmnG0eBNqst/oCOGYdUfRAY/G6iHbGeVYeHU4O+CK1TCV77f/kYoINrNdh4cdwDTUiA==","signatures":[{"sig":"MEQCIGFPnvi1HQKha4rI1cBUAM8UAe0K2houQqQR7DUplgm1AiB1XjR5+qe7eul2vWFkd3lsj1Ay+Y6zG1llDiUdHoWxqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"41cd79422483046aee7d57643aa683eeedc7492b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.e78fdb9a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e78fdb9a_1529531456583_0.1440899683527248","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3a1e758e":{"name":"primer-forms","version":"2.2.0-alpha.3a1e758e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3a1e758e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ffffa6b9692efb28ee0f642e874d86d986115168","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3a1e758e.tgz","fileCount":12,"integrity":"sha512-sM+zHkHPbRrBw9siP0ms/nUJ/vyVREiX66w2RFwjKQpGdnQqAtxW4B7Ce665FBq7E6YvlQE4c5WyRWb/QNR9xw==","signatures":[{"sig":"MEYCIQCaC4jOxrkMeMKfoCWWz290GgLcgkPKMOxP516VlxkTegIhAMdc5WxLG1dw32rAa8+6N+DDJCTsmD57KU4UTbwbHi1n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ffffa6b9692efb28ee0f642e874d86d986115168","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3a1e758e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3a1e758e_1529965388518_0.46464767587553046","host":"s3://npm-registry-packages"}},"2.2.0-alpha.dc6b5a17":{"name":"primer-forms","version":"2.2.0-alpha.dc6b5a17","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.dc6b5a17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b35a8b70fbc50615369e79269301ba8544b4d712","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.dc6b5a17.tgz","fileCount":12,"integrity":"sha512-0DeS1d2DmHPboMO8nlYwSFKotS83Fi5CHMDm7N0Y33HPXJTdzhsERzwJ+qGZruhkRKg5+axErqXgzoUM0q1lSA==","signatures":[{"sig":"MEYCIQCNHsBwIl29UTNdGinqat3Ldv6ZE0WDwT7Oo2FFiOeqewIhAMV2tKaDpgHXDEACrZvfkaeS9vfoXAniui/oXG8+llYN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"b35a8b70fbc50615369e79269301ba8544b4d712","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dc6b5a17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.dc6b5a17_1529984713480_0.5588361798421317","host":"s3://npm-registry-packages"}},"2.1.2-rc.2":{"name":"primer-forms","version":"2.1.2-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"20c59319b5ae3135fe36d0e31fc6145995dd6b92","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.2.tgz","fileCount":12,"integrity":"sha512-uu5bLZyL6Jk11Fm9GBg4/Ge+Wj3RwpHYQDOKdI5PSoyWPK1LR2O05Ux43h+xbXkwrHkHcueTEN6gicj+brNgdA==","signatures":[{"sig":"MEUCIQDntBTVYsPs3U5a5QAkNgOx5tRKtL7ORMYbasTSQFkquQIgIK1usR+b/wwcLGMh/JIfyhLrvcfxr0Di+/t70ZR9ct4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"20c59319b5ae3135fe36d0e31fc6145995dd6b92","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.2_1529984895389_0.16250117993573654","host":"s3://npm-registry-packages"}},"2.1.2-rc.3":{"name":"primer-forms","version":"2.1.2-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4a8d2dfaf9ad7d00eabb559a4966965dba92b1c0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.3.tgz","fileCount":12,"integrity":"sha512-c9Yj8zLXXK6ZEY+2wQRfFeQf7Ew8AfBiZEcg+/6fBinaK/qfI5RjDlQS/cWwdJHuAPAfpJTe80gslVM+3jSD8g==","signatures":[{"sig":"MEUCIQDv2+G1i5QgSjrYZeKUj1tJdya/MLhPlBx1x8RgKyN3VgIgK0akqctC97v6TSEmfR2rAE/CX/zFLQt/QLoNbchpTmY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4a8d2dfaf9ad7d00eabb559a4966965dba92b1c0","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.3_1529985834308_0.46975814679776784","host":"s3://npm-registry-packages"}},"2.1.2-rc.4":{"name":"primer-forms","version":"2.1.2-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2129806d93dc9c2869b047a1005bfda2d447bc96","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.4.tgz","fileCount":12,"integrity":"sha512-hNnY6p6phJY47hbTxnZ1QuGanZ/ZgOPsJ9QY18W/Kjr1Ym71l+0oTCiY/Izn4Tx/N4y2Z0VEeLKgs+nZTnHTEA==","signatures":[{"sig":"MEQCIB58wF3eBT41jPavdu5GMGlthvpDxtJo/TuIQ0YtOiHdAiAa7QpNAoEiRGs9+Rk/miu4J41P1NCQzfoJt4vwM/wYhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2129806d93dc9c2869b047a1005bfda2d447bc96","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.4_1529985952407_0.4023396947034472","host":"s3://npm-registry-packages"}},"2.2.0-alpha.89893e4a":{"name":"primer-forms","version":"2.2.0-alpha.89893e4a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.89893e4a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9f38efeeb764dec2852e0a8e0ac0d2b1ec9aed4f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.89893e4a.tgz","fileCount":12,"integrity":"sha512-p3JPRM9RA88mVCTQsvP6YJj/aLdijDGTqyMbiahLsrGHNCylE+JYDp1dGd0B3QB2CSIGY+RYODf0dy1Jlp8x3g==","signatures":[{"sig":"MEUCIQCp8Rz5VuEWJ7XzbQI6UgSNlUqwplwsXgIimm89LxUQOQIgOljhFMJWm6AjQ2E2JX63m0w72nBYYKH5rjdYJVH5Na8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"9f38efeeb764dec2852e0a8e0ac0d2b1ec9aed4f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.89893e4a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.89893e4a_1530214525657_0.2607350260908854","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3091902b":{"name":"primer-forms","version":"2.2.0-alpha.3091902b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3091902b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3a59af2b25f2bfd299eb19194fee2288cbe0f1ee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3091902b.tgz","fileCount":12,"integrity":"sha512-a+5PVHXEuvAbsqa0mnvJtaKchqqcqKhunjQf5zhZNqvz8OfpVmvHUq11axfjZzfM3V3Zs21Rv9pdCxD2xv4QBQ==","signatures":[{"sig":"MEUCIEzYDA6fNirW9tknUXvEK2gQFPOedTE7+gHR9YtfUfsUAiEA/fHxtkgghrW6uPD6oYc/kexk02bPhHla2bdE3jwO1n8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3a59af2b25f2bfd299eb19194fee2288cbe0f1ee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.3091902b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3091902b_1530215204215_0.43208012409595753","host":"s3://npm-registry-packages"}},"2.1.2-rc.5":{"name":"primer-forms","version":"2.1.2-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c9a46e630667950b49dda7d7662a3fac42599a82","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.5.tgz","fileCount":12,"integrity":"sha512-QvpU8y5a6vBlGWxo625NUTAWGddqi8k7PkyB8ABlt/jGznL3/VIaSR/YHAuHomf5xLx86/MCguFu9idRpUIHVg==","signatures":[{"sig":"MEUCIQDC+Sm2aFE5BULxuw5A2t5d8KbjWvgisGK0wywUYG2OLAIgOSGf/AzZDkmAJQkwbJ7sQ+71CBsJSXzW2NeNRsTJe28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c9a46e630667950b49dda7d7662a3fac42599a82","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.5_1530215418609_0.13102737263289121","host":"s3://npm-registry-packages"}},"2.1.2-rc.6":{"name":"primer-forms","version":"2.1.2-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd2ccb7b78b4fefa43880e680c2ecb6ed92c9097","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.6.tgz","fileCount":12,"integrity":"sha512-ZwKMAQ17Wpp0md3cMHQmyMb9OF/bK4NLqHP2YTOdx4r+FdjEEaukRHumMrHMxjGaecu5YtCYfVnZ10QdD6Rc4A==","signatures":[{"sig":"MEUCIQDYQ1C15gIshLElazth6dp475jg4a/8MEoHWpmcopQ/RgIgf3EUdN3bPKFEgNPJ1uX4dkuSl5kqYs3w2a0I/TYP8xQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"bd2ccb7b78b4fefa43880e680c2ecb6ed92c9097","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.6_1530216404622_0.6065778782507174","host":"s3://npm-registry-packages"}},"2.1.2-rc.7":{"name":"primer-forms","version":"2.1.2-rc.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"01c635b05363808c7dbc77f6980004407925e826","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.7.tgz","fileCount":12,"integrity":"sha512-R4IrjkG6PWMfz/++jf6EBhupQjkpiPQYgN1FnQ85ZnkCThJ020qOKVF3NfUXBkH3B2LuvUgpWO+n2Ov5Y6/KUg==","signatures":[{"sig":"MEUCICLe+58Z8e3aSuraZoCvyJpF4jh4FEd/rmUbfwl+IbmuAiEAjGewUc8UEUVcVTp1/v4DtXRR434pqtYy8oUo4f8BVjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87599},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"01c635b05363808c7dbc77f6980004407925e826","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.7_1530218335945_0.8583606559786696","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a134dbf7":{"name":"primer-forms","version":"2.2.0-alpha.a134dbf7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a134dbf7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"97842cb53340a62d830793745e900da861cab728","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a134dbf7.tgz","fileCount":12,"integrity":"sha512-B3AV4f39ZmIGgrckOHW8Xp+Rn9o+SzOTYfjS528qd+sfdtJOdOgDW9Q+x84gneF66O1REU/h89iV9f8XLEbMEw==","signatures":[{"sig":"MEUCIQC8hvoM8TAHeVr5KCER2NGV+uRLnAJMPGs6o5Q2YsgHbgIgcoO9Bg3hDwjZrkRtAUNjtPwNzGE03ucWOdirpAtbh60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"97842cb53340a62d830793745e900da861cab728","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.a134dbf7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a134dbf7_1530227756749_0.13704471060949786","host":"s3://npm-registry-packages"}},"2.2.0-alpha.effa8d7e":{"name":"primer-forms","version":"2.2.0-alpha.effa8d7e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.effa8d7e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"87d50b7d22645964f2e2a332b8b8685e6c70b8b2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.effa8d7e.tgz","fileCount":12,"integrity":"sha512-CKHmO02W7ONJ3PXxWesdl5qhyt+w7j5CsybOWH0dsauQ3QmPjx89ccECw6xarkJnYLrEAszkLz7jfhxgo83Ptg==","signatures":[{"sig":"MEYCIQC1XsrODL/MJGbTc12ao8wNOAeG64V8ySIomqWdE0Rd4gIhAONnBPMO4Z/GtrolMPxw0nyZW3wgNKOW242yCeLIAUap","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"87d50b7d22645964f2e2a332b8b8685e6c70b8b2","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.effa8d7e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.effa8d7e_1530228837389_0.9186025121949075","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7d60d746":{"name":"primer-forms","version":"2.2.0-alpha.7d60d746","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7d60d746","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0e9743383159a3704317b4ba585ff9e857bc9eaa","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7d60d746.tgz","fileCount":12,"integrity":"sha512-2JuCRqlpj5QtxNB1OiZo4F/pmtTn/qctosk5pAJ77q9s4WviqvmF8BQP5kuKpm6grvDPGsATUjiN8zsa3e7syw==","signatures":[{"sig":"MEYCIQDLngdol6d9QNHx1bLlRmkLmzk21zgRceG9ChPY5Rv1AQIhAN/vK/YYsbyBym3/MVgSU2ozcVh+yraswJDr3jLo4YKO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0e9743383159a3704317b4ba585ff9e857bc9eaa","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.7d60d746"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7d60d746_1530229153537_0.30528490727805524","host":"s3://npm-registry-packages"}},"2.1.2-rc.8":{"name":"primer-forms","version":"2.1.2-rc.8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c37e7d292ddae2c2fd10e5050fe0f2dbd36bd198","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.8.tgz","fileCount":12,"integrity":"sha512-dFfIxrxI5d+FOhSamID00Cp2DwLpye03OETY4i9AY+df1tQ4gS3SYsvU5/cF75n7DKqKB2r/Jvdtr1A2aFwYDw==","signatures":[{"sig":"MEUCIFWRmPm3l4k7Nw1RX9XhAPGFPTcySP7XPZSTBwjM364iAiEAx2nK18ODUTCvEjpL2yXdEG7efPwO+RRbzX1ni0/vBm4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c37e7d292ddae2c2fd10e5050fe0f2dbd36bd198","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.8_1530291420567_0.45314027270499335","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ab698d5e":{"name":"primer-forms","version":"2.2.0-alpha.ab698d5e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ab698d5e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a2ff8145c3c47daf6db138f3c8b7c8358dfc6f6d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ab698d5e.tgz","fileCount":12,"integrity":"sha512-3w4PXfTkpEM+PesLGpboZLcOYfyKAI+ADmWqGHbxpdaZ8NVnol5SqmaU6ufqfHQbv9nzQ39Ag9bJn0RCkw0paA==","signatures":[{"sig":"MEUCIBZ5ROGEj0yc8iFqTzQF80YvgAD/2B+7nIbuDpOxJMeaAiEA7PQCT0kNiMrGDpxbLhIEv1IzkFJl/Wo1+K43cnmZPqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"a2ff8145c3c47daf6db138f3c8b7c8358dfc6f6d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.ab698d5e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ab698d5e_1530300119104_0.5157656512908937","host":"s3://npm-registry-packages"}},"2.2.0-alpha.90b4f21c":{"name":"primer-forms","version":"2.2.0-alpha.90b4f21c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.90b4f21c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d0c2662bb972dd15ac3fc16b01b64da5cfab6148","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.90b4f21c.tgz","fileCount":12,"integrity":"sha512-RT9ViUX8V5/pZ35luydISAqndclrbX6zX75QwYWOd565d6eusdCDfQ6ct0TA4hSd4U0sUNY2FEE2xvkMe77QrA==","signatures":[{"sig":"MEUCIQCNGQbF6A2E4er7YAWQ3tR1si+HHVN+b6gMVtt1Mizk+wIgNe03EQ2KMhuRf5RWupkdXCUD+UzJ4GPWUgHemXakGv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87619},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"d0c2662bb972dd15ac3fc16b01b64da5cfab6148","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.90b4f21c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.90b4f21c_1530301758093_0.5934084117071612","host":"s3://npm-registry-packages"}},"2.1.2-rc.9":{"name":"primer-forms","version":"2.1.2-rc.9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2dc7d93294faec5ef3992b244e880c6113d8c079","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.9.tgz","fileCount":12,"integrity":"sha512-rC0ycSkYRBg6ng9ax/FinihlRIB0RsWDUTU7z4iowrdUl+i2WG/xZDkjOTRxvPkNBYajAu7j26uOKXLot4G+uA==","signatures":[{"sig":"MEUCIGWBoU+/HEC3AyBoVn5uFQrz9/rMw/QUHRRACZ2aTzwyAiEAqhpllPE3W6/pxbXPrc/A0E458nZ2GXGattHHr+8zJEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2dc7d93294faec5ef3992b244e880c6113d8c079","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.9_1530304278375_0.3131694728906671","host":"s3://npm-registry-packages"}},"2.1.2-rc.10":{"name":"primer-forms","version":"2.1.2-rc.10","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.2-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6911d7630e1f7f490e899ad08171ef9f15772705","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.2-rc.10.tgz","fileCount":12,"integrity":"sha512-FsyShbzDuxf2vX1NwTAqRXuDGlqPBP1t17X188C5Ye5DyPxtBDjJe/orKErk/16cYSFnx5SdzjJXpIJOKdh/vg==","signatures":[{"sig":"MEYCIQDV9gKAJTs/U8PaD3dvxu8zGBGfE1ipqDYzvgK3M2DDlgIhAJ0cHlWgrmbyKLutp2BmYfL3WBIrezFvHXJf5d9qXzns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87700},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6911d7630e1f7f490e899ad08171ef9f15772705","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.4-rc.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.2-rc.10_1530305784345_0.7530391269596302","host":"s3://npm-registry-packages"}},"2.1.3-rc.0":{"name":"primer-forms","version":"2.1.3-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.3-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33f135dd27e0c5ef8dde833d73305c0718b5405b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.3-rc.0.tgz","fileCount":12,"integrity":"sha512-Qy4zuYGneb4uhuHp86k5DD0P6UfAB5QK1KE7e4GvHYmUJkJkfpwlZWtCwZrV4O0Bm5s7fRS9R3yqGg4sx1zS1Q==","signatures":[{"sig":"MEQCIFR52eb999kFB1XQjX1vyKCbDnkcCyo44Oi5TJR04cQAAiBj/BtttR4JJFobBxkRxEa45ax6dvt+fGr4Ycb1A0howA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"33f135dd27e0c5ef8dde833d73305c0718b5405b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.3-rc.0_1530305970060_0.2791248173277039","host":"s3://npm-registry-packages"}},"2.1.3":{"name":"primer-forms","version":"2.1.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d7a30fa561264a07e44b7fb954b136f8dc66d515","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.3.tgz","fileCount":12,"integrity":"sha512-B/HY17bdQuNqIMCtQPBw1ADctUjuedbWmd37e17fzgfm3iXY6d8Zow+BF9D207+Kcw6vfp49MJXYY92zfapmOA==","signatures":[{"sig":"MEYCIQDDSwd9nT6R/f3ldFwWHUvOCrK+j26H7ST7ARe90JSWUAIhAOhYLk7sMVJU8OZlcmJEw9iuio1zveDsdDCYT+W+Kz2+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87688},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"d7a30fa561264a07e44b7fb954b136f8dc66d515","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.3_1530554569251_0.43712474329262196","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4901ed89":{"name":"primer-forms","version":"2.2.0-alpha.4901ed89","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4901ed89","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3225d514917ba37c95f44f57c1eced91643155fd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4901ed89.tgz","fileCount":12,"integrity":"sha512-u2FumPzzmFiBEBGVtALc26+rfp0i6Z5KM5g6jLJ2gyWLpXMSvrW6sKpTzRZvH50s9R5k+AjOaj6zqdFzdkwmUg==","signatures":[{"sig":"MEUCIQDhrhgJ9BsnmMFL+fKlrIpApUMDDn0sTxlj0r0IgTfFawIgKCBbimjSCnknKZ3t6Y3C+TEbe8IswfQZb3cUwD7z8B4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3225d514917ba37c95f44f57c1eced91643155fd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4901ed89"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4901ed89_1530638802642_0.27760924068112525","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0b756ad4":{"name":"primer-forms","version":"2.2.0-alpha.0b756ad4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0b756ad4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8bd5a603d8e098be32521bb26049ffb2265e0bc5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0b756ad4.tgz","fileCount":12,"integrity":"sha512-iA+AHTQJrR+PxuJMoxydz9e4h72XRl06E6dIsooNZb5McgpcUJEPrVDimsQzuWsYQdn2+Dw75qxg48bLirMKCw==","signatures":[{"sig":"MEUCIQD6vh0xfwf/kBsvhdBaE7rGG8UUjNkc53a01Iwl7SZpcAIgYmjHX28FcPkwQW3V3C682KNmEmYdBoxmhrngJz6SH68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8bd5a603d8e098be32521bb26049ffb2265e0bc5","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.0b756ad4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0b756ad4_1530639142628_0.9437690046542275","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fe4010eb":{"name":"primer-forms","version":"2.2.0-alpha.fe4010eb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fe4010eb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0cf91bee58d6fb59940246a03b3210bf689def75","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fe4010eb.tgz","fileCount":12,"integrity":"sha512-aooFpGRNFJqy5qyaN7qLC+WHHPtCW8dTX87z58hRFPnIwJCqKPdAmO5rx/dbQE6vmoRpGZSQQ++AMQq6r49b9g==","signatures":[{"sig":"MEUCIQC+CT0HRZtTHXsdGELvGkmzc0F/YoXUk8uwXBKsI/zpcQIgPdrPTuLrdGRvWfGLpjfQ2ruGTSdH9iIw+5oz25V6zTs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0cf91bee58d6fb59940246a03b3210bf689def75","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.fe4010eb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fe4010eb_1530639177041_0.697972111414811","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4103b139":{"name":"primer-forms","version":"2.2.0-alpha.4103b139","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4103b139","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fe9fa0c33ad286bf268d76a3303bd1b5957db5c9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4103b139.tgz","fileCount":12,"integrity":"sha512-tYxJAPpf/1/D+hYPiJErfcNsCq1Pc+NlZXzemym/OV0fD7D6x4ur7zpXUawgpwx0oz8p0mHbpVCzZPA7g5SdZg==","signatures":[{"sig":"MEQCIGGUm7X62FhKwjFyHVBFErguaOUi3PaeVuNS/anxOsKuAiAeAY/KeoNuXoOZJKN9NxlNod+dVWmSs39GWtQlZm+5Lw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"fe9fa0c33ad286bf268d76a3303bd1b5957db5c9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.4103b139"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4103b139_1530639774443_0.6423179599039606","host":"s3://npm-registry-packages"}},"2.2.0-alpha.eb7f6898":{"name":"primer-forms","version":"2.2.0-alpha.eb7f6898","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.eb7f6898","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"dc1417055a18f34c4ff2c46f122f819165b0b56d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.eb7f6898.tgz","fileCount":12,"integrity":"sha512-1y59/tvMU8PrON2uxUMBd2MnKDNmKqGSqxSNMOXPCmMcyNg0rJPxNdWsMIbUllGT+OpdDeRksv5R7rl3+qIJjQ==","signatures":[{"sig":"MEUCIF3KoUl2mHOBBoiGrYvYPn4C3VwxZmo1AKjXISRwuQZRAiEA0ApkrmVjy8GB2ImuDpSpuuTQtLAp0dAWOU8A7eOondY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"dc1417055a18f34c4ff2c46f122f819165b0b56d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.eb7f6898"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.eb7f6898_1530640574094_0.49237499141914176","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d773723d":{"name":"primer-forms","version":"2.2.0-alpha.d773723d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d773723d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"027b132749eaf962bdd9b22a4806d05cd4e739b4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d773723d.tgz","fileCount":12,"integrity":"sha512-jRxjpfNAmEV8U3ItWnpEq4Fq1sab/aCeWRooKcVZf90Ne5FJ1XQ/yNQJA6bHJpx6mFofg8gckfA/AaMxAlhrmg==","signatures":[{"sig":"MEUCIFGBITAbS6wVP6ENg0irJD3tBdj6xv2Dm5kZVSV85kV4AiEA41Zg4SPdaG44nAHdZRXGHDpFfZl3mcPmpT9mEr4QPLA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"027b132749eaf962bdd9b22a4806d05cd4e739b4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.d773723d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d773723d_1530640651482_0.9860914688773446","host":"s3://npm-registry-packages"}},"2.2.0-alpha.dae40155":{"name":"primer-forms","version":"2.2.0-alpha.dae40155","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.dae40155","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2a9bb94afe095289b981ee568ceec6d8250522dd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.dae40155.tgz","fileCount":12,"integrity":"sha512-u845AHQUEhEAbGwHM7QUj0y6uqoL6/5SzOcOw5asGzrXxDC2a9E3XpNDGtPeiGwoJ8rY1vHhmb/65/oPZCdN1g==","signatures":[{"sig":"MEUCICml6ZLxe10kNNfClkiQXp7ecCSh6UPtNtK3UTNrJ1pYAiEAgeoRv5zfEU+2Q7LPHeU0N/iz0R6bkiC31oAw8x/PtRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2a9bb94afe095289b981ee568ceec6d8250522dd","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.dae40155"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.dae40155_1530641673608_0.8969979962001466","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c417c2bc":{"name":"primer-forms","version":"2.2.0-alpha.c417c2bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c417c2bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c7c25501f9e1e0c8cf765f5f3f9c80afd5b23ee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c417c2bc.tgz","fileCount":12,"integrity":"sha512-62TpiYlsMayItb4XhckFCqBfLu/kqZJeDCKwOTG/m8yG6Bvowuf+ffuQtMhqwnXqLX52o96jZQQjlsDwtOno4A==","signatures":[{"sig":"MEYCIQCPzAHxP3+SZySV8UbAIGgbBp6eMmdM0MjMI8eXpFlf/AIhAPGs5X2q0cAZsOd+yP8Z+tNXBOYeEKjE+VgpONXxHe/L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8c7c25501f9e1e0c8cf765f5f3f9c80afd5b23ee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-alpha.c417c2bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c417c2bc_1530642897604_0.9302923644928847","host":"s3://npm-registry-packages"}},"2.1.3-rc.1":{"name":"primer-forms","version":"2.1.3-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.3-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"02e043215aec6863ee06e574d2e89cb2dc9d74a9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.3-rc.1.tgz","fileCount":12,"integrity":"sha512-uSaqvPBhbVDbPPmvvPsBZHNp2aLuc7e9W5ukdgTh/vJnCuSseo0tqjT3BXFe/rPU8/v43UvXPIyvA+4ylwgq7Q==","signatures":[{"sig":"MEYCIQCya0qlaHfJ7eIRh0dPQMFDHNkcFZcNQ9d2oeWoD5sipgIhANb+DpNQJ2WTwmH4T5HeO0cwCOKwiiUqj2nOo1WPwkaD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"02e043215aec6863ee06e574d2e89cb2dc9d74a9","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.3-rc.1_1530642921223_0.09333496298041677","host":"s3://npm-registry-packages"}},"2.1.3-rc.2":{"name":"primer-forms","version":"2.1.3-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.3-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"42a07195d2e18c39b889b721b98b7e227e99c7f4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.3-rc.2.tgz","fileCount":12,"integrity":"sha512-xJ64sUkh0EE0GQxOKdIJdxnXblRBZYgDtMoRjrL88dv+LEc6M9sAie8kGsps6V3hQFEIrPAzWOqSY09qkBpAtw==","signatures":[{"sig":"MEUCIAtRPwXmDGAxyInQQcJcgrMc6CIajR7XQhW8iTv3lZREAiEAl0V40Nif94f2lvjOdzMSlK4LT7BoHGSs/6QRMBBR1Lc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"42a07195d2e18c39b889b721b98b7e227e99c7f4","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.5.5-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.3-rc.2_1530643860669_0.04554994888372832","host":"s3://npm-registry-packages"}},"2.1.4-rc.0":{"name":"primer-forms","version":"2.1.4-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cea5cc6d20303e378c70c67f7302af6201a2033b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.0.tgz","fileCount":12,"integrity":"sha512-5bQB1mdQPHgJpkljZe1zlY3o6gZNzPngbBmWCU/Wrl5WTmThbTePZF2jQzOAldaZ28YZ15208fIJ4sByZdQ7AA==","signatures":[{"sig":"MEQCIHmwMmdtufQXnl1SA/F99hlQ+AKSzZFJf4Y0Wjg8EbwgAiBpHwHs3Kb519hBDe97Dg+MCWcBKxUvLRUINC8Fcv318Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"cea5cc6d20303e378c70c67f7302af6201a2033b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.0_1532721458720_0.483748399222079","host":"s3://npm-registry-packages"}},"2.1.4-rc.1":{"name":"primer-forms","version":"2.1.4-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"38b5a9fbe1b7a85fe7a767cbea3694bd9f4d78ac","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.1.tgz","fileCount":12,"integrity":"sha512-FbBr31oUBhpvUzpSoDRdcOwwuyGb7/+JBL9y8P99zgvLs8KDU5vlNA9YgX4UX4/saRmXAg5oOpGZ9mqJrcLPAg==","signatures":[{"sig":"MEYCIQDW9fp7PhpdxrAdZQvq5vU+SVg8VzqgKh+JJhlJXf6yNAIhAPKweVVn7I1V1Ys5S/QvWw8SMBo+ua1/QDiC3Z5wnc/M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"38b5a9fbe1b7a85fe7a767cbea3694bd9f4d78ac","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.1_1532723365139_0.8391990701959482","host":"s3://npm-registry-packages"}},"2.1.4-rc.2":{"name":"primer-forms","version":"2.1.4-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"18f3a479cb642483941c37014b330815102747b1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.2.tgz","fileCount":12,"integrity":"sha512-m50nrXsNTOBAbYMQYbXJAbH90ezAKOvjA5g2zgV5Pt0bxaJfoQVEm64oytLYhLKBoyYtg825iz8y4pNkukIFMw==","signatures":[{"sig":"MEYCIQCUkWYu3S4k212GGbuADdq3Vh4qxxlUxmCucUk/1BZB0AIhAN2IyNc+/LS6IZP4tyru1hO4dJcK17mh699bKXjzHbbv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"18f3a479cb642483941c37014b330815102747b1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.2_1532723527350_0.9148571178789682","host":"s3://npm-registry-packages"}},"2.1.4":{"name":"primer-forms","version":"2.1.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"55fb0c2531ad303c5565c9401ee49fe9bc3ced09","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4.tgz","fileCount":12,"integrity":"sha512-iavHXrMlHB3o8RPFLAg29pYAwdsWljQwI0lPffxYDoSTg44NBdvhluhY7XVWFJWfRcQ88YPV0drc4DkWJ+Y7Sw==","signatures":[{"sig":"MEUCIQCCwXhzth1DZ0uepkoopECTRWlNzcPKTtFYfYTROxcLmQIgA/2fVxeESM9GMsaXBzYRJkYbbpDeXGltgst57SEUnaM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87688},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"_shasum":"55fb0c2531ad303c5565c9401ee49fe9bc3ced09","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.6.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4_1532727944589_0.2699981057497829","host":"s3://npm-registry-packages"}},"2.2.0-alpha.dc28805d":{"name":"primer-forms","version":"2.2.0-alpha.dc28805d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.dc28805d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6c11e78d5e92a4bb6ea7d5603b7dd76de7a29fc8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.dc28805d.tgz","fileCount":12,"integrity":"sha512-0XDSthOZdOfrNcpePl//Wc4olCFuQ6pPlnmKV1SN/OQ+Xb6vz+9TEafiX5w/reF6Dw3sJisIeqoFUTweLdDTMw==","signatures":[{"sig":"MEUCIE3+wpi1+ucSIByNKCAyltUgpPhAFDP60iaqWzNc7pjgAiEA4HkOi/jVD1yolQ8CEUrSf/OjhnTh/CQBtt5Dcr/HR6k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"6c11e78d5e92a4bb6ea7d5603b7dd76de7a29fc8","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.dc28805d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.dc28805d_1533234136152_0.47616129220528847","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c66331d4":{"name":"primer-forms","version":"2.2.0-alpha.c66331d4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c66331d4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"82e706d41bffee188751777f0ac79ebfb5e265e1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c66331d4.tgz","fileCount":12,"integrity":"sha512-kYvxZx8QA9PVRfmG5ftEnJnOiwMARRWQ5alq7VM+zVyuGGRZQWZrssWHZ3UBioldWqCnNqBjshLttiTs/Y+bzg==","signatures":[{"sig":"MEYCIQCS9Z0UkhzxRoIolXFHW8llGDb0qrl7+Ib9jEhNe5ctJgIhAMS5eE6aIbRVZdVUy5LUEmAJU+mLaA2kyHttwuauHE+e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"82e706d41bffee188751777f0ac79ebfb5e265e1","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.c66331d4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c66331d4_1533234467956_0.867580625417762","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b19ce449":{"name":"primer-forms","version":"2.2.0-alpha.b19ce449","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b19ce449","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bae3649e090893c502ff3e3fff63ffd7ab2f2095","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b19ce449.tgz","fileCount":12,"integrity":"sha512-RJbjVqCoySo8jSD0CqtFR+Sxs+LmeYeYsllI2VIFO2Bt5mvjd/0v78OfFHB5i2T2L1KF/QQtpmYRZ7a7OO+bqg==","signatures":[{"sig":"MEYCIQCUMo/QXO+SrtXk1qmuCgXuVjGvSlS/B+sRZJ8PEn+3TwIhALXPQ1wVKVBohz1jYbZq1rhdNJIn2cOaLSCiC8tFDWcl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"bae3649e090893c502ff3e3fff63ffd7ab2f2095","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.b19ce449"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b19ce449_1533234952033_0.8731059786490047","host":"s3://npm-registry-packages"}},"2.2.0-alpha.86ffde2d":{"name":"primer-forms","version":"2.2.0-alpha.86ffde2d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.86ffde2d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8b87cff777ea663d5730f6a2d4f7a8b42d31f779","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.86ffde2d.tgz","fileCount":12,"integrity":"sha512-7Jvgq9Weyv9yhVQhAt0LbsH5w4aDPZTRPlJjVpokiV+ko2RL/c0vXwWRJvqkgSLhWX80kLbM6iyGCOd7KZY5fg==","signatures":[{"sig":"MEUCIQD69Ovy0Mmw8/6ZSGE8peteh7yg/oFcjlyxzNpPF6ixXAIgZjo1F/ru7W4ie8Vs5/aWyGWmSos/kDZuH1J2cUzcLFQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"8b87cff777ea663d5730f6a2d4f7a8b42d31f779","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.86ffde2d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.86ffde2d_1533249502337_0.7687922051163796","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c1adda16":{"name":"primer-forms","version":"2.2.0-alpha.c1adda16","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c1adda16","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1a84c06c84a4be32409cc7eb45839970ccee9fee","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c1adda16.tgz","fileCount":12,"integrity":"sha512-z15lZcwq6Q89ffEpPpYmntS48psG7gJ8SVxKGPa8qAVpTEVfrUps3hZidrPmDOpwELdDuvUvCXkEDMeF1nzOOw==","signatures":[{"sig":"MEUCIQCHDzyuYCc8z3K0qpIczTMbEkPNJn51Uz3vEYFmu6iHiQIgHtuwV0/QLcP3f3lqreY77jnaNAoKgkzJaDUcznHu2xQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfv7KCRA9TVsSAnZWagAAGtMQAIg1QMcfUMspEAChAlok\nOV682F2f57Wn3YZ0j2cDc664VN+54B2CEab2W8BbyzH/A4NwbNm5ViZzaBwK\nVNIBkfR2izol1ohLy/GlszkOBdOg/CBq8sg1Mt8ECFY+DfbdNJws2/Mo67g0\nadWMs5aVtE5cXekXgcgHpzFi1SJb5Ke785eGRxhZZGB81w2j3/u5tlJlKwEP\nkSwJw+7wdUqmPFm7OItgk54vN75hPM+2rzSWoxF+qj9toBwKuz1IPjJRpzCp\nxuke6dB6Q80hhMEVrLfpggoeGRnGeF2MsN6h+3j61OQgZoqz0hIKrf0qh8R4\nlWDWKcs2AbSaeyn0wZBFERYh6mLalMMUdAcJoN7vAKkiwMj7X6d2niR0VdL7\n9FklIvNuo45HrTj9v4HPJG6gU+MpbMYQernaqPom3MGKMSPFv+FPQjBVBigE\nT3NZ1US7j2M6oZwo6o/1Qs9KdWL3Q0OK3anKl90NYuC+lcLOdl4As5pPb2vO\nMhgqrqvtRBXBfxP3seO36yyOiuE40I69sUKxxIhMcmALlxhuOKts2paA4bl6\noQgIFP0iurRbzvr+ogaXo/fR7hFLsKqK51F9/bLarGsCi9gz+Q9oxt8uo+ez\nCdiMrDnLx30n78sQRfowdku4A/vbFfIPjKM3A1ot+Tq7aA8I9Taf1xy68QnL\namNm\r\n=Lx1g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"1a84c06c84a4be32409cc7eb45839970ccee9fee","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.c1adda16"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c1adda16_1535049417903_0.6339043458523939","host":"s3://npm-registry-packages"}},"2.2.0-alpha.602ed262":{"name":"primer-forms","version":"2.2.0-alpha.602ed262","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.602ed262","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0e21ffe554e376e0c776bc4f70b798f08435a7a6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.602ed262.tgz","fileCount":12,"integrity":"sha512-oGW9Q+5LE9tIXmEeWC7J99jJDn5eqRqBTAYSEuoafDzRF0kZZX+1I6a8vNTovvP8BMFFHJ6ABPSGYFXgDZ+HKw==","signatures":[{"sig":"MEYCIQDcUObSgLcy6Bf+ISVGuV2XaN6ddfTgqDeY3nGV2jI6+QIhAOVaXhOpEaukybKl96JSM+ezwjwUjhZ1dAxAIeKh0W3b","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbfzhDCRA9TVsSAnZWagAA5s8P/jHcHpnFTNAifpkWsYdL\ncqShTInzun3dOZnvcZdDfj+/7/SFU5yc4xybjwdwiUNFQc2wk/INwZ2dDMgt\npla05k2FxOdUpy7Qll9lXsIxx6+oNLHzeQiWog23rohl3yIhgVA+mHSNFv9s\nyWPEWc+MDnnkU4SDJroXxWGtbj08y/zCYvipOQdnm/+nJwglA0bpja9wH3iz\nOQgtHepqx3Io1nsqAqhcbqYKLkK05LqGjoYoyvAaSGv9LGZqmTtwom/0uBl9\n6T8IYA1awv2hzo9mO+AhI6BvGGHOMV/U32zdQwWd84uAJoJmAOd2Ta7oVftz\nSSGLnp42QIrmKaddUGkJ6RZLCFS81PvCiCRqO1DsQEbPgEj/sWSLMLAzJHzN\nLKYObTZCVGhHwNZ+FTjVo+KqfQiJQm++tcNrvE7xBL+3limM+WSqjwcHpnwn\nqhCkSJp4lr/F7CWVUVzFRe2us3E1PAFQmIs6bgQ+h0s8JmMl6MvDUf0Omm0Z\nNcvqJG72LTJpn6FBM7aVbZXYBHhpRG3ObgBH9BT01HGk3ncjeFX+j7XeZv6x\noujtQ7uNshrWPh31lgEwnpFsHjLZt1sez8OUHnA897VBoj3VwtdhnYbGuUN4\npH53tFpojtXnXs5SYlYIY+1mlbZA409ksHeQ9kAp6xWwPamABBBjM+waRrQL\n7Des\r\n=OQUC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0e21ffe554e376e0c776bc4f70b798f08435a7a6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.602ed262"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.602ed262_1535064130535_0.9230742082181769","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2e96422e":{"name":"primer-forms","version":"2.2.0-alpha.2e96422e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2e96422e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3fe20f3c41364a156cdcbc86228462c30f8963cf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2e96422e.tgz","fileCount":12,"integrity":"sha512-69ocM5jRQNLLrBcQSBzncqhFlB7aE9oKnKSmI1AgwT0EDOKBvSC7N3xOuA2/+lBhu4ghOxJNV+ma3RiXY1adVw==","signatures":[{"sig":"MEUCIHm+x45/rJPoWq2gKAy4bT6zMuBlulMpjurK/Ax3SbtNAiEAnFVL8DnpUzePR+H5gvnhhf9lhJSJxSCdorWseGchKRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbf0M5CRA9TVsSAnZWagAAmUMP/Awdfc0MPNBGB43xo6d+\nELbxUBULbo32+DgNdkBj/NVj+FUPhWBu0GzMX3RYX2tSMCmHHY7tq9TmyUDA\nTj1bDOi7dH+m2GaM40qAxNqzAUuTYOf0oh53ta0XR1KALcb/nOoGemdMrChQ\nzWwr2PzYFFk8/Dm1LhjRlIRQaHA36BqDTZzHMUu7ZaxgT1h6n3ZZ0zJ6JXSc\nQfkHZzM/B2Www1S+oJhuJnf0GmeTcuqYAA9jJhOE8RI/mOZJD871AhijQo+2\nE0RkOiJ8aBfuAr7GFBIlQw5ljnBU89GlnANLWRBbhTcSxamyg5QAFvrVJoOS\nyHBKwqTHLU0FkOkNCpILrWsbR8GwXIDLSf1dn2LGwpNsxGiXR6cbeFS924PY\ny/yO/p/QvZ3D+knlzNPIQeimnm58h1q3zfLmg+p+2+OEGOP94EZFTs2KRSyO\nP/kxZoOk9o7phWOkOmzZvei/VagPnfzUXZEucPNiChajbZu2+6GD/4n/Iwdy\ntU3eHwDaRK+ZmZ5nL3vPRBOEde5KZ56IrizuC1tZUM9coMOYj8359ADYlhKz\nAwbWVOix3Vmr1N6Oblmak4a8RSsdARR7U353xKf/uVKDrN3JR2X20TlUYdVH\nPLHDi9tn4qysYgd7KaNfWdhw0b4nyME5iu8KKTTLdihh7jZdbrR1GPxWEqOQ\n5YOC\r\n=Y2FT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","files":["index.scss","lib","build"],"style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3fe20f3c41364a156cdcbc86228462c30f8963cf","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.2e96422e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2e96422e_1535066936929_0.9099824027413812","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b669eefb":{"name":"primer-forms","version":"2.2.0-alpha.b669eefb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b669eefb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"828a9fd86b9a7f49d4690f285816c006c590d965","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b669eefb.tgz","fileCount":12,"integrity":"sha512-4McmHPVdJo9oaNxSCQa5jrLrSHDmZF7+Io4Sa4nq8u5ZlGV6LZyS34c1YHEwrJDuTXylxsPSzZSf1Lai8ymwWg==","signatures":[{"sig":"MEYCIQDWDD21uWrrHZF/K0aW7YujlttdMPGxrDjYqbyaUF50UAIhAKy68AXCHA4mWSkAPL/ytgqce+X7svgR7we7+nn4L3XK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxPlhCRA9TVsSAnZWagAAJ20P/jj/KavwJs8UkxV7em8v\nXSE+2sKYwyVY+W0exwrfz5NWFWurM9ldQxjBa7TSyByzpgp4c+hKcs7khf8P\nzqI1j0xd4yhjn64Ib78HdGmBXlkB0f6dwycW0LLTTCiTB+axXLEEy0XqtCcE\ndMM+pjcl8/4PX9w9gy/5UvWgXSARXt9KYV5BO/ZIgAc1Q1XOWIPOLVkbsoxF\nm0L/OAh/ZaeMF332nqL9nT0z2yi13s1PAfK+fv4ew75l84Uu+zoCzvYzv5YP\nSwgpvCXLA9BBZaF/P15ihZic/6gaU+BcML6228PuQ71T0K4OtVHsnCMtRQLu\nCgffnD00dHsDAqehawDhb3DaHC+FDFQpKmcWp4nTCKtoh4n0dq/CkJB5VE6V\nFPU8v2/t/CN283YYL8wYaXTu4PV45SjXa8q/P8AvN3JmXtBa7m16Uh7WiaYF\nj1NyokpKrwp5+64OC9GPntUrA2OdLDuplXz39zzguL1rUoiBDXv4XggeU9ai\nnstGVn5A09LUyBoxNwfAqiDJ3+9fSxIYvy7IKdIdsrUHoNsTmHbpB7WYtFVJ\nw1RcrOPS5kea7IewZO4NXLUHAA4dV2BcaI2ZYsHqWvqjIgiMNWqLU74KU0uv\nMjRx2aSOY1Ybo1srBb50QtNzS4Mff+s51sLVUnQQ3NUByHmOBrC+BcsB10wa\n9Sft\r\n=ptYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b669eefb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b669eefb_1539635552498_0.9067497462880567","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d9d741bc":{"name":"primer-forms","version":"2.2.0-alpha.d9d741bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d9d741bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4ec84a742718a10063a9a1b22302c22b45b4598f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d9d741bc.tgz","fileCount":12,"integrity":"sha512-OMMlXzd7lCcZUY5UliuWvzmtR23US2XBBl5Dj6XeZ7M/o5kq15QytIo+phaNdzV+1Ke1ZvsdWEfq1kKRTg7Zog==","signatures":[{"sig":"MEUCIQCvPZ8iiT6grfpPMthHjoDafXcaaZiTjqM2pjFqWLJ6oAIgIKlKXQZz76n/5AesRBbZkZYxMNfQI/VFFH3OeYEppxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxQYhCRA9TVsSAnZWagAAHDgQAJdWQAdFlmnL57s1e/p+\nSujS3kZR2rMzS+WldslPn2pdfRjgL9xmF1vKptr1k+xcXW04nOmKbtVrZaXi\nHR9eHgKLUMkdkQpstzjILvE8u6m+sWNy3y7vrLc+q09E7S1ZfJqQosbZCxnF\neU4mtS4FJsxL4nJuvG7r64jIua7T77LSCB2tuKgv/4HTtzDty5QJjt6Qnyog\naUsgtQThUKd+IJIKFlvqK7w0xrceys/VDf/bUi6EZmn4AM8sqQ+5Q1C0tJLR\nbbMblL4IGbM39F/OR/Etg8NRjcetSpqVZv+LYpPVTeUrVWLvsT/rHLaUuaIZ\nLTLScGDTGh0gZFywSIC5cAiGwkt4HuYSL48+WfMA+om0+89ExTlnpAajA1ej\nqe+DRk6sHmTFU6qu9qvHwdMtC/K2KfWAS+IBjbXELVhBhA+Yrltkgrm1ebfo\nYPXm4k4+XxBpBa5O2JvLgzL4Yu/LjV6PBLoTmKvi34tYpAvta+x8ESM9/Ejp\nNYElPD1rWZaF9fDuah7RASzb7gx8ojAoIRV6kVf2NDLCPTZ7H+kAo5SPzs2x\n2iUTlWpHG06XMdHhXdethN+MbGWrM38coP4AKjcBB84iwNaA4penoJ4oyZSV\nldOpi418QMoK3DJJiOLIdFrQf+FmJBfzbNq7+5COJR3sMUm3N3Z9g1ZQvP0x\nZ9tR\r\n=HR5u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4ec84a742718a10063a9a1b22302c22b45b4598f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.d9d741bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d9d741bc_1539638816474_0.7422918349247132","host":"s3://npm-registry-packages"}},"2.2.0-alpha.671ec2a2":{"name":"primer-forms","version":"2.2.0-alpha.671ec2a2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.671ec2a2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2ebf1f00bffd69e9d0e46b5fea696cafb9b927af","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.671ec2a2.tgz","fileCount":12,"integrity":"sha512-tEnUGJEVd7yAgUtjXSSfW9r44PwRI5bt/uJzowNs687mL1FZKo0qdzA6oaI+dFLF6bUETAAf2T59o6ss2TS4Kw==","signatures":[{"sig":"MEQCIBjKgSRxhN2FQbGOsjyI59traV9W51DmmR1Sz0Xxn6MYAiBw81vOmfQjm4/jKqc9xwWDjK7fQxoneHeyrO9IoRss3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxQZuCRA9TVsSAnZWagAAK3wQAIwzFdIEdKtzW7htcrLa\ni1TIUSr+58hA7y8Q95sjm+eDJ8B8yh3QCslOiSBQbDYKch7F5f1TYlhZQiX8\nFEWwuh0kvNzpXadfeoOvtqFmd45O2tFCZJj/OIXE4qeGgomLe3KlD8/NWTTm\n17NYy7R01rJJytMFOFa7pPfr7xBG7oeIPiOUg+/ftU/mK7AdEqxnkrHKzeQZ\nuDZUQeoCwUwVQJeR+uyczjyQ0fk3GHd6JXsPyzXmzgF4h/EWiT7OQDLcA1MM\nU8Qksq9RBIim69q6bsFtbYXOf3WMtUSFRrbKCLhqsm3iarkB3N2+AHp8dcsB\ntmTVXesnwRmBajoOzDh7LKawP4n77Bw9QvcF/gc4lOq5Te3mSd7bY9HQ+NgC\nUTkAQwLIMgHB7I9NA6k4W1MUEvZ1UobMq1r59JeeFT/FBZduE438tpYlBlxa\nznpP7Lt1fxovxI46KCIFzDJHeHycJpHPxAYwBl+wXgj+bISr2xz5RF2158Iu\nJznxemKrk9Mr1JoePvKhybyazxLAadRnOTGkLaToCT611DAT3Si/1NlAy7Jo\nfn0EQnHmpTFMPw+GhawGp1oolX/LqmzZwVkJM4G3RutQYlXEUgqM4dMtY93k\n8yDVAjtYm/H30iKJQO1kNc5FML7eWAk9NW0m08qs7kMHlHqbEdo5/RVX/Uz2\nB9mA\r\n=O3g6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"2ebf1f00bffd69e9d0e46b5fea696cafb9b927af","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.671ec2a2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.671ec2a2_1539638893895_0.804277732975178","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a0bd1a08":{"name":"primer-forms","version":"2.2.0-alpha.a0bd1a08","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a0bd1a08","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"99cb78340223a53922eab9ad3a9dad0da74a228d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a0bd1a08.tgz","fileCount":12,"integrity":"sha512-/b14NogzXx4ReU0QTcNEURi6JRYUG/bTV9J2xSiitAnGQp/1rpBT4LioORanChkRe5rGPvFRrAzmrdMJrqO1eg==","signatures":[{"sig":"MEYCIQDk3TwqfGDyu86CAUrq6SKopQC32dTbja2qNiRR1ZLpeAIhAJ7AmNjC/chD6QBmK9/ME9sFTDND6DuaJ/DZdvxWRUJV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxSEdCRA9TVsSAnZWagAAxWoQAJkheEk0h46/jWsgEETo\nlQV7U9l0m2zIKVCcy10DzndTDUF60cx52FeBGkFTztFybb4cVYZgyi1a8NNe\nEChgOiLnw/utI/cicoCM/EKPuGMs0VB1xAQVhYcM6LcBXryO8k+Ol7wV1aZD\ntPjZDJufdirE/nlqPJ3XvPyQEcjmzUgEyfCzmUGamPdsV0BaeSlp+7Rld3y5\nAZ9l/r+/f0HNCA9qaNROfb4HhG1W9mm0SIgzi/N8EHjQ3IghF1chFfUQK4BY\n5VQ+UUImS7gChDCbr8TRY4POS2puFRUCu/l6oYpA+VY8JAfSY/CWs4XXN+xJ\nFa7yihJkc0T718+A5VCdzDHZTMuopPZ3N6srHXOXFIZc0TscjiUsN89eLogR\npWgDxXHOOFWQy/p8bmblJLEiNh/uaQm+R28k91m2/1dhomBcC2HxHUlZ/Osg\nYyGRjtznJUgxrMSXd7yJRQeef2PDnWWN4Zc+zV6qTNEjJv9fr9K/jhby9mbY\nLcvIu3wL/vMO9PTpV0mNez+mAeb1eVUBe9n9xSl4vY52O3ZngIJK/Nx80yx4\nqkUoV1V+vetI4s14cqza5recOuBbreQ+lbKfx0b0jD/BwJMpFjzS/sgtJFyd\niAoqbIW5lRWvbFXSu/GOJpqMzfYWSDBxxzqHOc86dNs4UtlmfIrqSXwmke7X\nQHa1\r\n=az8y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"99cb78340223a53922eab9ad3a9dad0da74a228d","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.a0bd1a08"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a0bd1a08_1539645724740_0.14208912233882076","host":"s3://npm-registry-packages"}},"2.2.0-alpha.472eb506":{"name":"primer-forms","version":"2.2.0-alpha.472eb506","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.472eb506","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0d78b8e6705a55a2a1c47b83c0492c58998d3295","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.472eb506.tgz","fileCount":12,"integrity":"sha512-0zeOPy4bQ78OxmaV9FIOy5pRwMB6eBzrE+sKHhXTs7RV3rK9ef8X9DtiGi+TsYeCtbXMJUaVi1XxsAS9VGWFcQ==","signatures":[{"sig":"MEQCIBOtejyFmdMnphK1R1QS9WwOBfZ0NqkfGvrA3NagGaD0AiAIG05rz/yCeXtqUJsiq36vlDK7SHCsoh4+wOcVuaNLyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxSc8CRA9TVsSAnZWagAAm10QAJrdysId17tSc9eoxPXq\nR1Its8UdkhywqH1IzCVcR4QfBRzePABxTL2giON367bl8aEIN127X/ZOlBYT\n4yXwStS6/siQF4QVIXsgVq+LgK3oi1dQ3I6FoOIF0/AFOe7j16987Q8R+JJn\nDmMvZUHaz/5mUDCY28MQHkRJqodUQVtacZJuJaL/k9vW7S6bqXBGxsg6JVOp\n33Tk5DW+ykG7fgUdRsQj3364P25BxdjhFL/0rB1GGk+n59B09U2dTcPVqenZ\nlsoRnwhHBKeQJJki0i8MAio22kVIOREADSh1Z2+w1rIRe0RLzdt7jhSOGUdJ\n1X1Dp7uHIyhZZfYv6dUF1lqDH9LOaiIxp3C3jlbL8AS01DE09XPh8qHkxSl5\np/8OtTr42wp90FkupDwHNbs4vNJ3Af1B1li1jglElJLncaSQx2HVodlC/gcc\nbdvanelo7pAuCrpdpBrVozRAJInqGGTX4RQg8YybiukIP7abrxTKQ50aofBL\nzN686T4LQ2Fg5q54SYye63YOBMFSlugEvT2zKEdx5F2Wu7vZ0mntn9ixOwda\nTIHq1I34dvRPggvMXyBJpO7rrw0DKSAG6KAIuSk69jPQ6UDlbZNaTT7p6F0t\nLriCxb8M2ftp1rJ+SOZFnnjYDL8QBS88Q0w8+oGhBybeN68xohQcmlDxm5wa\nj7EV\r\n=XX62\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"0d78b8e6705a55a2a1c47b83c0492c58998d3295","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.472eb506"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.472eb506_1539647291727_0.7373782445012855","host":"s3://npm-registry-packages"}},"2.1.4-rc.3":{"name":"primer-forms","version":"2.1.4-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"54bf12cca1c7561594365ea491ab7ddf49441d3c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.3.tgz","fileCount":12,"integrity":"sha512-ZNrXs3xXJhSsBZ967PixqxvctD+1HJVdTy93e5OAiL4xSxyAtsSkpG1j/TSG2vCqQc6ZRxStmJiQoOaBCLE0KA==","signatures":[{"sig":"MEYCIQD57VSb4MHsCnEXtX8lWeP8IXwQ0SEObd0nO1CbqjvA/gIhAIWmfplcsb4408z4BV+4xEUU/kU3FLzX6ZI9yGjzhQnt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxYMQCRA9TVsSAnZWagAAJ6AP/RHaPBKKObPo2eRcc8QD\nlVpH0vTyoaL0l7xMHa+jbZRXX9r+g8jLxIS4mw5lAf3ZCo/2iZpHw2SNVylW\nJYd4dzfGxhPw+iCne6m4Te60H+IMBInZyCqMtJu2dLjlmae1TUU1FQiXe3bZ\nkijDpENcXlihpqPQyMGtZOyEGdENEKmOUQtHts/6nhdYl6zJ4bTjiSxRAk2E\nIfE1/uyXUgAQqT2SfLEoPRy2I2+QnjX7zsTtYl6H9yb8HfFfYQYE9h4HOqlb\noEgpe0hBnyGuiMZ5ko31kB6wOwnar8UQ6k4CNkYWwL3368JdgB7lnLCe/ur0\nb1CFIWHcwFlSghxkt1y4cYLLqsl8TdoiK4XVcW0nmWj4jRYXLba+fo60TBdd\nkk8QMcxX99B1n4rsgXoLibTk4HuzoIhixrk4w8oFfHiqCoSza/z60+z6CEuH\no4gd37JLxYWONk0AZ7qZfsfZum94lj1S0Cff/HJ2Ue/Hb38pq7l0ayl4kiYB\nHSuBqkanDMdap/HOJD84rYNg45rFkHvPo3Am23f6CZ42SSD6q7XNzqaUbJBt\nv3dSMUweyBeDtdOMGrZQInr3bs3FSmJkroD14NvgV7mMJhyuHENJUR7b9Ujz\na7s+wGxuXdO/Z6KhbtrQA9W8H+zcMCryQ73oF0iLL4PJQf7e92+L03vGW0ao\nD3ne\r\n=WrmT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.3_1539670799655_0.35173775804629526","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fdcbf941":{"name":"primer-forms","version":"2.2.0-alpha.fdcbf941","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fdcbf941","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c8a768becd729bc5ebc34209ccd4241cdc484ce3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fdcbf941.tgz","fileCount":12,"integrity":"sha512-xpnEehVFNqqJdP//34JbV7ln+szFpFBYh7bp613z5gMz+R49jWxLCQoz+WGWczaajTYYWPw+6pcwH+Z3Tw1pAg==","signatures":[{"sig":"MEYCIQDL3xOtu1NNMcRQWphY5I8nIb9IHHTlO/Y8vyaV2Yv2CAIhAJ1fTnYG7RvzU88cGATcmN47TqFDVFavxpznGta0LXl7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbxk9zCRA9TVsSAnZWagAAeQAQAI+b73B8La7EnRfySywD\nf4MG08AZktlAKlDRZUbvDXfuE/XXc7cJhv9OmgBRX0TgVhachWnoArbvUHOL\nfGyF4dfUlzIVHO5wlOBr/sKCcT7i8SQSeeOcwqZo5upcxBENG0Aom7HmwOSC\nDAZn03zuv9b6qnMA6dq1VZPkpFXayOyJiEkeZm3FVtoHnagfJhm+GDp69lud\n9YW1CWC11jGa8Ld6f1vO/oCg+ZWE6LRn/BzG5VpVNwo9+iz45Ri41UMpfCbS\nMOjsSjYSNH5flfoi3XmCwGN8Td5+ba15lK64Tdpy/0F88BhzemTCCxuQwxgE\n8SrHA1jQFIpbSzQVue60LdwJT+eUfFYEEyTcuDklTkEGTNLgGp/hXBLd6QeO\noaU7J7BEt/hcpcczUAnOG/WwoKsaedC7z27UMtd24SCWCPpdeXEIUHOD91l6\nIoG20bgkT4pjj0nDcuNpCS9H2Ag+B/XX9cDsrsPEQMITtY/a7WmIKOk7NV+L\nCpdmPkguqcAPkikIV8yrh0Luza0A0pnIk8XEcaiN39N9xxrrhc9YOZUbmeY7\nK3PQYLV7ehizvwzaEDv5cadwGRskk10FDcaN4j6MgD0cdIviqirNzv84KNvq\no9yE5iblka45Z/8CFcB6GbB5KaT2J4ixaX7G6Lw6EudVegsmbfbcDgj4UPIZ\nArfE\r\n=NP6+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.fdcbf941"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fdcbf941_1539723123159_0.16185777927743228","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ba09cbcc":{"name":"primer-forms","version":"2.2.0-alpha.ba09cbcc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ba09cbcc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c60a2514efecc17856cfb9e7f189a79fb44279e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ba09cbcc.tgz","fileCount":12,"integrity":"sha512-9BCLJMs0+eD/ple1nOqaVdB0HLymrHdef2uZzC5aMZz5UZO6Mr0eArRFg8xttYPEl/ijbQyt03G6rVWXPl9eLQ==","signatures":[{"sig":"MEUCIE9M7OzmHiWhDT72Y5t3FBMs/zsqiyJwNcTlrrhQZnc9AiEA9b9qVtCbXEt5jqC51lSu83IdjDume/nkwNiFLsP6QQ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx3EKCRA9TVsSAnZWagAA08wP/3Y2G8+apLSfIC7XMo+w\nN4RUczsHOrAIpF8/qCJ843vnIRSSBXscXJp4b9ocxq8ExlucikATdr3FzgE1\nE4zQhX9Fm4HmhYhpEnXlBiixPxq9XkOF1qRror2qrc+VPSlSfcNwIkf20eOB\n08zMzj6qGSBpOImAT7CnN6au9fTY5rTRA/xYdbLLvigJpPEFyHVIyri2M9+j\njfRc3uylYk7q/ZpNF/atjUvYWCFSuJhdw7/Jd7lm1mMW1f/i6EVnEaQJztyn\nD6y8pTqKy+2dVVThjxote0T0IdaRpXdssCKnZu2QEiuMHWVDSyDI3ogN75AN\nJRGrfQS057DPd6XtqnvGotdzfc+S2z/P7sprJHMGoyoLrblJYKUPSLxDhsIv\nXkamKw4dYSrbQTLT0zm4THu/rfE8LE4F8EiS8gIF8Nt1e0NA7SRQyjAeI7hG\n7kQaqLQ5RqXCFwe0v8P1sBxDhBS+5X/ymM7dvJHie8Mk6ji4WgzZHfX1AMCT\njavdCD3mzhxO9b0AM86LGRSBd39J+kYptrpwtjtsOX/5DCWHxj1fZefrpnhJ\nprXvurkg2e7FT3dAzVqZZ95x9MusrExm6I6UT4wck0I/qMQojdmTdbpK/Nyb\nHZiq7f05iFZuYiEJ7PzWcg+uvUQ3WCYH1L2KNrEl5M85r+NHykGcOTRlwJTm\n74I7\r\n=nrAU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ba09cbcc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ba09cbcc_1539797257321_0.6971918954039904","host":"s3://npm-registry-packages"}},"2.1.4-rc.4":{"name":"primer-forms","version":"2.1.4-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"05883e3def9c5e70afcffb3b494fb20c8c3fe9f5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.4.tgz","fileCount":12,"integrity":"sha512-BhaQYnD+zQQr+8t7Ut9+HeQZmOgx9p6xsnpQMU8ETWECm4p5F2CCI+jCUgAKJ2qvw5kEMaLPuflCC+WNtd+9lA==","signatures":[{"sig":"MEYCIQCsfQVUSBLMgq7JtwoMhQmY84bvDxg0A6S4+Vz1phhS5gIhAJwdpO5crFpwf+660TFeQbF1BqaDxHi0kt2TlhDoCJdB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx4s1CRA9TVsSAnZWagAAHEMP/0mXqrutfbE6OZl7ieC3\nk3x0oA1p7hgqR47+kIWbIZGnCviSvAuL9yXoSsd+GQPxQ37OWOA3O4ApMmYc\n4L+8yCl+ezfhtbS+yORqJRVpCCA91TWFS5mU/7U6f8aQaOgNHO7mpMcjlquS\nE7E3bBV/CIjv7eX0sai4wpd46evpbJi7v5wv0r4eQ5mRatDB7KdMw4rnC56O\njLnBWLN/5P8eFZ38wn4BCDqopZtMByE6Xxlr6kVxZ82ghlNBY2f1Z22KLoDN\nHtRZW33ZC04w6RfkDcrN0pBFnrgO6iJ6wXIQkKEGUJl10BjrwVIWcZOWf+fN\nISqqQe0VFENP2PbKFx3/8w79isF5kN0x5BlKbNB57W59hvORFI14aZOZINZN\n8PwExJOT0kwTbcoQWoRqTpbvIxM8YKC1bJECGseVO/yUlwlIdMf7UgE9Ac62\nUzALcmTIaVY3SK0eyCEDNGDJemG8H/DaoB/DnysjGawAurWVu/whCtCz/4Vr\nnDRqlXr5OxI5VBBsoXXJj8WwuNhHPwib0GflMBYSQmj72lD91ZU33+SfRFWm\nCw7cyxdSok3X8sY4UxEPys4BrhhH35Q24qcu5FN7yxqmV5CS9STTu6B7GrmC\nY78DaMo6v7RuscdoexHjYZJvSE0UweBvTpn41CtePRBOcJ56euCuv48H0rGF\nDQK5\r\n=Qiox\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.4_1539803948216_0.7555990741265228","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a8b75a13":{"name":"primer-forms","version":"2.2.0-alpha.a8b75a13","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a8b75a13","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f007664b9b68f7daa5eae1a31101c12decd00f48","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a8b75a13.tgz","fileCount":12,"integrity":"sha512-vXr0NDlp8kOCDuEkodyl996ecmWP+eWdQTB6EiViQQLPf/cSxIx5kl8L6k726832tRmoqEGne886VNK86RFOVA==","signatures":[{"sig":"MEQCIC2cYb1CsCEf33lOdd/4I03WwctkWeAVrl+dR90vwnMYAiBN8H18T5rKazn0SEQP1b+Oofo9LiZQgrJLjRVTG3JqdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx43ZCRA9TVsSAnZWagAAMEQQAIui3h4cNwrg2M+sttwC\ncjVpnQFBiWCESRdvKrwY3WMSCs13iwQUD56jRSWVfSljZOoTB/fx022BPGcS\nq4vKu0YBMcdVoUmF7TL68DPNufonaQFh6Kc/Y+aiVJFrSYrOLg/z2Fw5mPv1\nPdrm75EUZdOuRsntOLcXsbSnBu05mSt65gmEbg4x7HQTznPPotnVzUly7Dqz\n1zH4bx5tToYSG5D5a471cTbYkcpt1SpUtvp3EEo1KCfBPdhY+hcdxUXt9Kuh\nrNkRM033y7GsG1f6HX5r09rHyOO3IE2e2D5JTz416zrPKTVcrppYJkp6qoQM\nYlYaxrd1h94n2IYR0fuK1PNOrPMCT/q5kNoh/ORHrOCVZVExtWscrfdmAzZT\nftB4bFcfb0+XolRw2hTcc6fJqk1/E1eEZQvoDfZt2koN6YFI05rJ17dhsKyG\nwtgnTKiPSdwWnQTeRQQPXKiRGZ9IoQp6cKeIEN5gydAOquLZPHZtEBRkzh5a\npFMOj2rceLK3saQAeT/pPzbCS3gFz4uowtWueJYBvmRqOCxAQ/iY20LuAaR8\n/ATI1S74H8yR5J/pNj5Rsc2rUDPISjv34A1TLr9/pz/QiWwW0P0r8ae1DPjB\nsyIm2bbb3Sek8httzFNFvFg6DOEUvFgEZQSVO2pMT1hBXvBDyqVmdNGjjtyK\ngX9r\r\n=nMlG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"f007664b9b68f7daa5eae1a31101c12decd00f48","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.a8b75a13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a8b75a13_1539804632389_0.47127472998983233","host":"s3://npm-registry-packages"}},"2.2.0-alpha.93e11282":{"name":"primer-forms","version":"2.2.0-alpha.93e11282","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.93e11282","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3fa68d2e9e86aeb879ce1b3f03b5a416a20ca143","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.93e11282.tgz","fileCount":12,"integrity":"sha512-8RHGaLvJUPVtRVUmQgq82AFIWLZUgY28y6TRSy9pohW3nDSuHB2KRDYegDegk7PfOZ2YUVEm8QYVWlzhGAh3jw==","signatures":[{"sig":"MEUCIQCMnmv02SpqdC/ziWlM3dRuoyy/miWny23hhCsetq2vTgIgHMuo5MOznsWwSRGMCbfLE0pHGRbQDAmpnRBEgLN8wCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx44PCRA9TVsSAnZWagAAuNQP/33VCj2XhyI6Pwhgknjt\nx03jg2zT5JxdFgKdZRgEYVgOB2wvH9TyBOgWh3FLN+yoKgqYA2PGCYyzVYVB\n2Anm0GcuPkou+XnTJwumJEPQTp6UBwq7b53OBUCv225SXY2V0aPzCWLouHck\nc/97hHKiuseDFJWNETcpdeJym0rHxMj8+2eV50Kp8jtM1LAPdavy9eWXpGz/\n2xNEB9X0gq6YvYoQGbP9rT7dXxXnd/2/7YLUs9DK/scj/3e33Kn5QrcC4ElO\n28OFfk+e2GwzVMbRN89HU+ujU3DUTTc6udrprvqgVcncUcUPFJew1aEdY57X\nw5lxgDzE3qN6C4BHwHW29WjmU+GbH9eEDxSVcq7HQ0Ay7nF6ULkdqlIa+QQD\nbDLDqUylQWgjpKe//ceEsNDToJj7I+n6yM9h73O1vupKE1WnOaTE1dRRIeOX\nNOnRu13/du/UIFyOnlQRmkdIjgD1Op8xE8ECDh512VcQDnrTmv8YYX0Tb/lB\nkyrhumyeSJki6UdncV5Om8Uv57VJqsUucJwmYfhSNioRnHgLqZuWTW+cvZ4R\n/9eTIbPepLoI8wEWfiBlutOykgOaA/8rdNrb7R4+hvvj/LuHOTaGeFeeOgfT\n8Nz7oEDbvAH5tcVLr/uKlT4QsthzfNmO6GTmNNhGmgimohcy3PIQivC+2ldW\n7KQL\r\n=vwT6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"3fa68d2e9e86aeb879ce1b3f03b5a416a20ca143","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.93e11282"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.93e11282_1539804686735_0.08597033820693545","host":"s3://npm-registry-packages"}},"2.2.0-alpha.01812ee2":{"name":"primer-forms","version":"2.2.0-alpha.01812ee2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.01812ee2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33fa77b7ed802044f7246cd369dfc0a7e3fbe91c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.01812ee2.tgz","fileCount":12,"integrity":"sha512-ErBmL77sUX75XWlJM/wgoU+NqqG2JCXocPEZ4Ud7owEWlC1WIr0jRy5Yb8vF6IeQSeQe/Ms/J3CrkN8rEKHg+g==","signatures":[{"sig":"MEUCIGkRvTg5L2B45DtcCZ+PsCubpPSnWUdwSVFqDdRRtmWdAiEAvVOTtkMl8/YwVlCrkb7xEZig45Z2iCXz4GSV9gzsacA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx49sCRA9TVsSAnZWagAA5kAP/0gPRnpDV7btqisKK1Ql\nUr8cUHNvYXWGw0HLGc/JnfV+d7218tDmopWvse2K+kqqgTxYpn0h3uBVRae1\nbis5vS6ito0nLPd5uvBAtl8uNgkTKEVSnJcZEG6yf9FZBhYdfBrU+CzASk3F\nMmcmC5Oq7RG8zdNtmjE/Nq0LkpFv0y6QlOXGQSCbkZrNFIpu/xCa2GPZJWWY\nilnMHTJZpSrPAKa5bJsunYPDTvF+AuHWvaG94fEBGHAhhS1RZBl9Y1DbHDuD\niqvlFrZ5RIiTyme/z6le0H3uqJ2WIpkom8oSN4S6StxhlCkwP3hgM0/tddF8\nl5e0VPm89VwzkO3awt2dXAcqp5sryXl6RktfViDpB32n8v9vC8cUFbZ9Sm35\nSyjURWeYqwV9g0X+YJznMz285/nil5W88Jk8qVeNY+v2EUFeQsHA8iRiql2V\nxxEY2gCrCNYY4RrSvEY40usHmdq5nc2/kGj6kNXelZRlMXozuHcJVqpEmPH1\nL3DT7y/zydpPiYgB4zGeokkG6GUGmzKKR0Y1TS69Pv7iNbFTqGPFRTkfNI0C\n3DIh51+Rm7zLpNKstVQVNJB8PuFDBkhNb94kH+2XBnIW+9iB/UeVeHloh870\nDK9Y+eqzrJb5p8cTFu4xmoNryjjPyUZ//t0cUXZK4wMaxGevTH8scgE7LOiY\nlVCG\r\n=2eQB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"33fa77b7ed802044f7246cd369dfc0a7e3fbe91c","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.01812ee2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.01812ee2_1539805035635_0.2623058320641267","host":"s3://npm-registry-packages"}},"2.2.0-alpha.76e9bd5d":{"name":"primer-forms","version":"2.2.0-alpha.76e9bd5d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.76e9bd5d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e58d8ec80769cb73012b1845fddc436d2d0d7f6b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.76e9bd5d.tgz","fileCount":12,"integrity":"sha512-EvQ4rd5LPskH1PX/4NUCv4rbmAJgLBqA1zyjMT1JMS4TREnIWrrawfBvP4/VsPkuCVpStj28ktjpSUWFvZ4YfQ==","signatures":[{"sig":"MEUCIQCh9O2aft2vG4XQj/IMU7c8xiHVfoTb8qdxWOMcvfCBvgIgIt2NiKPvrMkXnGNLirLMAbVE9zXWuHnN1mBdRIuTzUo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5WfCRA9TVsSAnZWagAA+tQP/2fGyn9+v4dD+ss2ghgX\n5IzPeidn64S6+KybGJl0q+YpHNu3ViJfv1oPJwGf9hpN4fsRpkBsWpi0zCvb\nXfRJo8yfT7Oh7haunLslOw68wOerRVLPokv2oup5DpL5Q8fQxYey1X9n8o2i\nT5kWawNVJ8CjjdQHHrNchNJFcvas4WYkCeOr5CJkpeZhQK2L0aZOxqIqrAuN\nYjwc1GgpTGQpeWL0k1TefI/59tNglvKigPddfflf5veroiUGu8n8rxQGoqh5\nd0UdxEFplYPqylnEwFE6YhQLa4XZPz9NmKxyJAcdWH678LuwIxogf6GTQnSw\nYBGYpXTYt2yTMM845pNMhJppa/irb4naI6Q8DStcntA1w7Xm5+gHaOlxwubo\nue51yDTSxXxK6Xc2B5f+tvHTJMRvBqDNnRH8Q0VNoCw8z0/BfN9vHxT3TOIP\nz4n1t0yW5jPWY+aUu+67bKXvp6vEL4syL46eYSGNn+jOhBjSAQAo4R4Ieqh0\ndIPl61ut+XStMAphxP6bImH4aXJkBuiwKZ24PS9U2betz6JH94EPsUJ3a0td\n6T4plJ2mCR6vvROHULGUQGqYcsacdSZdFwsjrV3sB3JVWu5AxAHzbMFiidBi\n7pgbVbRIZoJKzEN5cVQWRiwIKzPHt27MRarfBLPe3zzBLBrILTzgMJ1sh7v0\nCmEa\r\n=OcZF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e58d8ec80769cb73012b1845fddc436d2d0d7f6b","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.76e9bd5d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.76e9bd5d_1539806622934_0.2158210197029713","host":"s3://npm-registry-packages"}},"2.2.0-alpha.56a6d9e8":{"name":"primer-forms","version":"2.2.0-alpha.56a6d9e8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.56a6d9e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4bea3534bc468dfc5fb709dcaeca952a2af02840","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.56a6d9e8.tgz","fileCount":12,"integrity":"sha512-y4SRia0biythNgENEPRAbRMgTaO+szDSLjGUTh7HmiPVmqyrkWe0fBj8xe0cw6dMcboJOh7zQEP0tJhSAFxV6g==","signatures":[{"sig":"MEQCIHyf4C0/XAr+vdd3sORCGxFzlzwUmkKzylOOVWl9AL8rAiAygB11vjfMsWadgNeVF2jzwyAp83kK3WsbA0FvaU0UPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5cDCRA9TVsSAnZWagAAyCMQAIj8BGIV2HrdvD/GtD+T\nsq0kW4UFnnmXetTSAwmRhIVF39bKsajCabySemyrTsQWlY873wGbwY0HBhIZ\nl32rEmfsGtwIqzXe9hFm6wv+fmoAPiexMX4nBsL09XfbQEw6cdhv0j8+hvwB\naceEsMCfFNzW3ALSoiVZQPtBESmPWIyyZ0m4rOBL1ppwH3emP1c+0+mWW3oD\nVj6dhobDfdU9miknkKrj7cOdFIN6+FVzZrMXKAP6dc0aC/BltYGQ1cvPHVoe\nsdzwJPIObbxuvfqMFxq4JJNjoUYMSBO5ybpVeNZlX24p+BcAhseTBPY08Dhx\nUWXyG8rQkmdtuT3FIjtj1UJRTkAENMaoCBXDG2aAMI2fM8jWHdXuNzDXAVBc\nX0TEcrQC/qXRgMHd0Hp/qmGRYSDfNMIDZjBHySucr9j7Uw6XItImdkTbEK3Q\nRpYDDYv4YR+k7eY8Wn8FodBflfMADkyxn43gaCV2IQZk3bMuDeusv1anbHXD\nvLIIdnzhMSVURYWthr4deaXBn5OvXH/eMcIhxRGTAUsxvoJtFCMVDPOwUFa4\nG3lrFBWSh5RwAm9QLEcTWzqbSgHCTcwBSM95V0VZda6oKkD4JFdZpMhch4h1\nJHDtR+T7RcSRqGAgOX8iHJ1jY7MCrjtxC3lv6GkvtCSKidLSqOgTTOEy06tZ\nc+nT\r\n=soq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4bea3534bc468dfc5fb709dcaeca952a2af02840","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.56a6d9e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.56a6d9e8_1539806979069_0.9340202095983201","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d2876be1":{"name":"primer-forms","version":"2.2.0-alpha.d2876be1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d2876be1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ae711cdd5c37b3255f4575afbba840faf07f0ba6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d2876be1.tgz","fileCount":12,"integrity":"sha512-E80QUbTW1nc2qU196AOSLD5Qbu9HCGECVYoIbvH0jHY6VQoBbMWOnYPB+YtO0YmuKmosXje5AwGa8+2GjBgqjg==","signatures":[{"sig":"MEYCIQCh7CRPsCUkSKnElQihHJwAk0VtZUihabzReJ3w1lOODwIhAMjRqLhwtwlwCEzzkZ+0E3BLkS76TU+e9Rp6eX9Uye+Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx5xfCRA9TVsSAnZWagAAPEgP+wRygFbPY254DVAtt1Kn\n2/osDF+3lBlWJxV4sitCaPVw5vQ6IKXNHhVmsPJi4HK7rcyTN8MHf53dJBa8\nYz7BUOAqm2qOoHG9O1V9NnxQEVwCbQB3O/dhJQqngi50eWHCm2IS90q6ETVp\nyM1VIXzSHayTnLih2iCBOXusFQjmRxpmMvbiwWnlPEIa6AfNvFiEGxmUzi03\nqwsBY74x3sL4EKDHizirC1wrMIIdpGZVy7LEKYNa0N8h+6g6is+fGyrVyjEP\nOthy4x1u6NGXCd7jfdKmfi6ikhjAoV4OkhclFqe8Ghzz8CstqP2i2xf1leap\n3oHWtGRqtpPvVs1ejflZ/8KMKffdOt8j96Bk5/DuqtxTp9SB5xRhh0tl6mnt\nB2eat2xHk7XLNxyEmIV0qgYnctkggAvVMxoaorkWpYn4Kl0fi+yzyTWLF7QC\nKoUt3qatyIHRPg6VMX9VJKxQTM3jElG+U/wOVbCAUeQN5R9nCCdGiUVxZcUP\nKo7mbnHSXiFn0Z2/2yj/bPTlu9oHHe+w+hUx7Cs+TKUvI8iRTAzPILLWjkmE\nC6R8kqaApfPGp+H9G9e9xh+yG/aR1tTmw3LTWdVh7OT4UzxWpwUV+nH2peq6\nQVfPN0/Sqfsx7u04cqFLKDGrymbsuA2Y+EGg5vaW3DRg4D/dsWHqP2+jn2g3\nspy9\r\n=QP+s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ae711cdd5c37b3255f4575afbba840faf07f0ba6","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.d2876be1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d2876be1_1539808350651_0.42740732912987833","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8e9cccb4":{"name":"primer-forms","version":"2.2.0-alpha.8e9cccb4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8e9cccb4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e4afde1338dc0ec3e44c1b1b2c9f14ceb69422ab","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8e9cccb4.tgz","fileCount":12,"integrity":"sha512-ELNFPvN3zClvp25XAv2sh0qCZul5M4+x5bi/tvHmFIzLiMUGawobIk7TKeqakCjSQ2lHqPd5rreqn2SojUxRcQ==","signatures":[{"sig":"MEYCIQC0lS7gLRFZqCzAdX4QRBRbnp01tasYR/61b2zHtxr5qwIhAJ/wk+aS6PEtKLMgrKF/gbfn1bRzmLiw0DF1l6V4P23N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx56wCRA9TVsSAnZWagAAszQP/RU+NGFFtYdq3P1MWfyv\nitrnnUcoR0WNRhLNijxPswVlBx1MaZA26fopxKLGJwF6FZUoVzgF66unm/TF\nKou/lYFZqmxn//elPRIAy9P0YHNnnvgpwOdipp/Gq6WqMDrvaQlKrufyCf9L\n1EB3Gd6KBOvLhWkCubvxu6zSDLe5QpRlFrkMV3EYcu+470x3UciWDDnXabUw\nPQ4235jKkCNIT6g0ysKDFlOFSDWBWhZycs5ttgV4K8zTLdYXHni8ChFxB36s\nUaF/pPDz1paADJ64TrzlZYBQsw89oqPZeGxD0RQluzGdWfeV9bc1rPTRERwB\nJCerjyvclEK+MJcOvCY8yGmlCCxt6OQCtEIX1kgPsjrrEDvo7F2DRUs3T6y3\nJ2FLOTqvWIxhHAYQHFnX43I+6lg3w2tHiA4RL4QOqVShcdePws5weLIoAmdB\nCR8Gha06MZBYGGOTYGCQsOlGmeODXSJ4F6Ho1TNr5QUKdl5FsU84JzpfAIIA\nz5ZJs8Uow4KJ3tGSj8VpyNpMZIhoYUHPLxGOVESKrrik4KMO49YPTFcEFVVR\nk4TqbQkTLMZXooBYGR4Ub/qJvKt1ypGMqWozlLgGd6Z4IImPk3DaqnyiIccf\nCISYABhJwldZszfDUxgwsKo9RrGPIPzm9pC3YMHFVHZdz6Uqz+TU7cPAj8Yi\nYS3j\r\n=w61V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e4afde1338dc0ec3e44c1b1b2c9f14ceb69422ab","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.8e9cccb4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8e9cccb4_1539808943745_0.41136560406824074","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9cac3410":{"name":"primer-forms","version":"2.2.0-alpha.9cac3410","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9cac3410","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ec37dde690fbadee50481761a2c0bed9c8187f95","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9cac3410.tgz","fileCount":12,"integrity":"sha512-4bZSgvA+HlBMiFL46cCsjODZkkYSLCT37Z+VggqYBK3aerqUB4fcdn3clCX7Fph+NNZZHsQQl9A51g0gnXLrOQ==","signatures":[{"sig":"MEUCIQDasuDRwZnl1LhmM7Jg3hqV9Ixo8TlHo2TqvWoHhJFY7gIgW5OyN+auQJy8qJmtfShJ7xW7QWZSYCXHndRTM5Sxv2M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6HjCRA9TVsSAnZWagAABs8P/1Vy+I7L0sfeX+LH+XkH\niyi74jLDAs1GZUOdAmMCA+HEXqof5CyqGAyff1CdQU7Rc6uzHzGL2Q40KUPO\n01glIEBACKoXFC70m2A+MXC0BzriURUlSxcI3pDxIhbqmLwCyU/XdjbPvb4Y\npdWI9dZQaPAWGOR2rIslB2mCYxYZpgCU6ZvwYSPOZP02Tnp7i7N8ITkTpWNh\njIMzzUPvUpXKUaWh/8U3X1X/X2TtZqvbYq33xb67cEXU9DPBS4d2sLgs4DtS\nfJ93Hg1LIq3b+Waof6V0pYCX088rgQL/cuuIU8LnBbv+bu8o9ySKk5zAMEFk\nsL4gLUSHBKNKltsPfsHmSRUePeeLxRsEm/UoJlth3RrpLICpDN6DOc9ead+N\nXbQpgSiFpMzcDKI3261nIPZJ4YiMKXBl1AGqYTHuWn1jCFTkD4pcrcE9RbpV\n+7Nuk0K8Wrr90SWEhHju14qXw3ZPFea1S6W/oeb5ipoA/RdUUkveWu2k3i+G\nVYhHriHa7bY2OABSs0TfrF9xLmgC0iIceA5dgbK+XCstGvIxc6iqtPNsCsKX\nL/n8f8q+NEI9dU9QjpMEhTblkr6yQTyI3IIFiV/axurpZ8yGJaGx1XoNV46C\nj6qFuiNmvb9mrEEOI3FcYjGLKG8VRHLVyYCtJt+y5ZeOseY59KeVdvTcdQbP\nyMWL\r\n=uDRi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"ec37dde690fbadee50481761a2c0bed9c8187f95","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.9cac3410"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9cac3410_1539809763137_0.5219753547150741","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9b72bf6f":{"name":"primer-forms","version":"2.2.0-alpha.9b72bf6f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9b72bf6f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bdc86f0025815fe1f197a806f7aa02aa29b7bc86","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9b72bf6f.tgz","fileCount":12,"integrity":"sha512-dI8DJCoTe+wjlX87tcBU9s+rAPmxR8c+L/dDkMhenI75ApJ2AwdISynBRtfX8Qmd3oTGgB1oLqOvM/w8yc7HEQ==","signatures":[{"sig":"MEYCIQDeXCqF41z8CfNIum/EH0NC/n2GLx/9a1fH8uBAlBZkuQIhAOcp0yXPaihZ15Q8gORbx2xXJqwhZ2qQdEiR97qslrrq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6JdCRA9TVsSAnZWagAA2+YQAKDHwfQKgtO91NxL3DWN\nPiHCOumf1jaR7cUm7nUTJha5sKKgrUWWn62LjLMe71P0gAlSZnbLXjnMQ6NW\nReDNo2zfnyQEkpvt+KmFroVfG+Cd00nbXmWdJJD0kHhp+KPQMqsqXVAjyR1Q\nLOWxWRbT3aVsrHHyZT+Z9BANvxNusU4eqBw1zjVhRA15jtWgyK5rHeEEUTxk\nr3L6qCv0mFyNm1tvt6WllEr5fs7qgGyQRkCWXohSZjujg1NckziKqRwQLwdU\nae7oj/Guq6PIyyJLaFo3c2+rhlgqJRROK+Sv8vgIjCwAuRzzXA/xUxTx0WKW\nmi9vDBLa29erjz2swjtBYS4oEK676zoy6Go1mBMtYsZ4pNJzJ2kcdK0X4s00\nGI3adirQ1fFmdv25Qfnxos2PjT/VTIy4WFxODbf1VGxnlqQicl9kZgsEtf/d\nHEL2yaCDkC3U7ldGjn4GDl2tH8BGNKHBmh0f+XVcOmCetzcVP2WLmrdo9YTs\n+Q98iq8HPIs4bJ8NAltQmclbVr4TcXJ8QdimZo1RVCVxwL6kBfJBUySx00xo\nDdTpSw8mc1Jb3ZqNyqyK5kIaX77rv4nWKFaIjUAwVTMSeppzA4z3+7POuOzG\nPsUqArVMjKdyLKkoBiU1zf3LlmG6EooM20x02XZoiD96BGauHAl3aRm//rsJ\naOR2\r\n=mcuJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.9b72bf6f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9b72bf6f_1539809884348_0.2186810799129828","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3c406710":{"name":"primer-forms","version":"2.2.0-alpha.3c406710","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3c406710","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f34b650294027dbd893c2eae3de5257121eb0786","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3c406710.tgz","fileCount":12,"integrity":"sha512-dm35yqc/lkpfL9wrSoyoDYMLJ1Ufn6+sh/X3GPdvTc1Z7sxbaK4RjebuxtL8/UW1xQdNqvZ2c08DuCZbbBX4DQ==","signatures":[{"sig":"MEYCIQCmWLWdfqFTuDyg6xWBjxujDGgIoVChJwc4irti6vqQ0wIhAIDIdhXItJGGXaS++FCAClYhnCIGL1LxzcKZpc6XFZ5M","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6PCCRA9TVsSAnZWagAAdJcQAIXhf7AmlbWxYkKKz+b0\nyBh3nAV0lEMBjiASMXmgUODCYuju3Waz+7W15TmjmM0JjLsDff3W2N5RoC5E\nVmagJmMcnosmHEiMuGwM3PQFUUzEIq/43Pbfi0pm3+ozdiGRwOKtfIdvHs9L\n1r/wz5jx+gen5M2QDjWbxSyonGzHYLrRDOW0NVg4JB+/MITFdSj5kC+CoiaT\nGJHak846G+LpsQwswrg72EFy51YNqLaTpe5jpmGcl0p8/AKuulp0QJLRzo+Z\nH/uApjkzXSsTA89alMm+Iy68OovjOGyx6TFikRDUp99MG5so7VJpbNx4Dcmm\nZBBrMhmDENAbLhtzfWZef2NC5zVC1rYcbaobDmcZ0jnZogW+0wcdO29mDeSY\nI2VAYeiuqr2Uo8tpKiT9vC1osXQmUUguCCdeU2h1Vdee4n2zWSQzqb8uyCig\npoRFT5GP6koYH9SRpb8vWTcKpEpJLRu7gEb40JFSQxC9bdpX7KowMexd9633\nstVS6VylPJ2gSYLanWo0+ID8rXVPRBjEx+wnZ7cRPa4hOFILYyLHO2jgR1hJ\n43dqxEpPcWUCLxKd+nGyjZn1sxvU89U/ZnDhfSxqchpeX75ucF1kvxe18Iv5\nlPMz6wA5s6mBGYHbnHAWzqiTbD89wxCAM8zWzKQjcG1Us/8IyhSfOwFoW+iG\nxym9\r\n=Urty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3c406710"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3c406710_1539810241280_0.19230272624539735","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1938ff24":{"name":"primer-forms","version":"2.2.0-alpha.1938ff24","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1938ff24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c330b88a0cc37efb7bdfb061f6fd9f47ad95864f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1938ff24.tgz","fileCount":12,"integrity":"sha512-ifwX7OnzIcsLi1dgKRfL2jzLXM2bFxN+Cr8FgJMJLDBgMdeuWxYyPZtZ7wbnI7K6Gn0rYQQO8qhdTJAS43vCxw==","signatures":[{"sig":"MEUCIQCOe2X8LDJRtfAvtIMSzn+UdOUnrcA25qAH/b9a5vK2KwIgfPnecuk234FBu5LHQNaNvSVmpE2ADNSYQzsMQlcKEb4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6VaCRA9TVsSAnZWagAAsNUP/2bZqV3VPQ+sKepxXR3P\nHSrZEIYg8QO+kl81ozKKVF/nh3F7gT64+iFTsR7My7aVfWdTMAikXCkLFkhT\nue3+Y2zf2GWsstwANNY/gv20/JUI0rP68d4gJh+C3xrMZWxeEafRjdxl1hBA\nQkrJAcB2wloXfxk9STymZuNL3YIAXCzz7QEEAZsbY8cx8CEzJha7bv/8hSgS\nwsJQz9s86f2QqxbWY+5KUIUMTzYwlFAjAX6GiQk2HK0elxn7x5nzagk55BMW\ny3S8tTHcm+7JCIFcrlHF7xFYiBx+VQs9FPQ5rdS29FIRCyAPAT9zmqu0fcKt\nTqDkuOKG5muRjEGPnJ8GquHJfjC59hT1TZX/An1cs9Uiy57sdqKwEOSr6HmX\n81rTR1SGstdUU0NxujV5qfIRMEug9H0uGYgYJa1Fwz+TNGcwxv0qnuFYfHtI\n019JSxYdDlh5dJ2KQNJNsWwMp4vNvaxd0UZs1Sj26Z1X8O6Px0EW+o+/Roy1\nD+99+cmZ3jSPSB5qNMot/Vkv/XLxEJ3vdCMbWba3acdlmNbjcVCkNKprdq1g\nEOnwXmz3hVNK9cRV3lVaq3D+2MAUX7gwhEFevuYad6CC9kbRyWmuCe4H9a9g\nxyaquh9AaclLuKwXrHfj4BVLisAJa09Xh8p8nfQDw9sHSB/5esNdQPsYDTS2\no9bG\r\n=ZHPZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"c330b88a0cc37efb7bdfb061f6fd9f47ad95864f","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.1938ff24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1938ff24_1539810649948_0.3926092317016465","host":"s3://npm-registry-packages"}},"2.2.0-alpha.53c93082":{"name":"primer-forms","version":"2.2.0-alpha.53c93082","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.53c93082","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e43427e55fb9c44ac0cb4e74fef9db29f864da18","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.53c93082.tgz","fileCount":12,"integrity":"sha512-LoblkXNOU4rReagt7TGTW4TFsk1MFsRMvCHnhemMlNYN4oyP1OI3gFoCST6SSJplXo5kkJSd0PkbPA0MB6AlrA==","signatures":[{"sig":"MEUCIQDQ8w8YJwbbITFUU7VSA+S17Lynl/B0lC1TEH/f90fWdwIgF8RgjUUA2JgnL1Jf2u84FBGRkRXLChafJbhLQn0ijoM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6goCRA9TVsSAnZWagAA3S0P/1ZSLpuoAUKLMps2Y5yz\n104lM/pvFL2yp/1pw7EYj9a4b7xf2ntOUBMtmwUMG6OKDAs9IOOhfqTJCGX0\nzVMXw2PlTRTEy58CNUvUhrzo+64cQSexNsRkyLsjjUqbV7l/o2krohX9xyvb\niNVB/gc+q9AOILHcfb7hf8iDCEPpJ7YgKGd2w3o0w48EUn/isuf98CzQpsNa\n7x4PWuyxytpJqGBMihB8upr69CYjIPQp4jDKPJJqUwBStCwC8iIIz8Y4EqwI\nZpHwt7yA08RYenKr+PbXEI+13Cn0N8eyghYzGCVIRM46ex5RzICXVLWf9ig/\nUjd4UUaAdrM1SmvqlgwgsuSC8KlD414CoQuE62BJ1oKmxB2OaEw3L+L7MIUv\nyglwQzv+FcPgdrWLa5DXE482nKFK3ssrvtbT8vGdB0IkOH5hjNXvcP3IVPvR\nGIKiDz+vAFr7Bl+GgXDmidw8cMxQaUdChCZsX2Jx0BuCwbYre7dnU0ekDP89\nqMLCO5nt34Y3Q/e4kEMz2Eh5tYaTs6QB37ro7tqkqqQfFDIy6mpFhIhLaIDm\nPCdlMafzTI+uDTm4E23q6V2Vj2RBnIYJMBSVpxmspTc3/eINKU8HUamX7jwc\nsgo1GOBLs+ackp8Inep6L4zht9xaD6sEEYI60mp2yy6dxkI8cj2MhRT4YyzT\noSlf\r\n=dzaU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"e43427e55fb9c44ac0cb4e74fef9db29f864da18","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.53c93082"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.53c93082_1539811367946_0.06723327926120803","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0f5bbeba":{"name":"primer-forms","version":"2.2.0-alpha.0f5bbeba","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0f5bbeba","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4288391f8e0298882746ab77080f1c6cdbb2f392","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0f5bbeba.tgz","fileCount":12,"integrity":"sha512-YvsdEiTdEJshgZSp8u34ca21MNVjbbnxhdH/KwZCZBDW/w8aEt7fUkhvwZJ1LbvBic24HdOXqw9mrSgV28iTFg==","signatures":[{"sig":"MEQCICCGfnWym1i7n37JTrDZREzhjrzzVNVJUFCu2VAnbPPpAiAMknchA3kqQDNmuV2BdtMQMsQhHQ7qywvZie33ifqMJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx6olCRA9TVsSAnZWagAAsAEP/Rf++F5QxDWBBnYiyvsa\n46aLCwKm4xVh4i2CjoaBvGsvV5jmbqXC+rfrqTyKJEHHJf0T/YRVmNUJBIWr\nYtwvtXmkWtjXUTNL7JlSjaIOlQD0p6ZXXO6qdeXGqnhSHhqBcoQtS0BJVIbT\nJ9yVSua4jI9DVkIwZUTpTyn0NFeW7mcUrF8mIvPQEkg+BFbVbeSKPJNqBcl0\nfN8R7AScIMDzgwrvw/vNDddCzbWfXkxZydte5h3dex8SfnRsZH1hsWm/uYM3\nnRbgmAzZp6VJT6PKLe0p3OJjqoAu+b2phBLdYrqhxRJMmytG3X7YLeDKCzk/\n4wBObdIQlY3cwNN2WSd4m9yNWsfuWKv9dCiRuxJGKcrDXW3oyXxqzusvVkmr\nXbJYdCSHBYOKDfJVCMBk3yIZIbeFAxkaBbJ2nNIByXyEL9Mxb3Pj/Nju+GQh\nW/kZipFQCk7EH9B1OPWBeJGnL5Yvw34jsDm4wZ3uZm7GMYJUZt5hCAorM433\nPIxfOBESYFshhmc5bKM9Z2X6y7oGocrdd5Fv2KFFooZqJ/ehx7WFxK7hlpQl\nxL4iRNZpI7ufP6PHeKkPBDBc0FbCBx9GijKqfeR9+/bl+herrAvUaOlbkoc1\nIsLNZv0vLgYU811hrysD7UDvSENBY8ya0FW5BqxGBKkCcTe3Pk0VEm/5f1md\n3RzY\r\n=5co/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"4288391f8e0298882746ab77080f1c6cdbb2f392","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.0f5bbeba"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0f5bbeba_1539811876713_0.8541438322424932","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c29e3d87":{"name":"primer-forms","version":"2.2.0-alpha.c29e3d87","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c29e3d87","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"889fb4fe65165d7766fe256f4bebfa45f6e8d77d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c29e3d87.tgz","fileCount":12,"integrity":"sha512-c4oZIP9SuW3IdePvLtJWOMcEd7yk7oCkFfO9WEBax+lcit5UIZWk737lYGxHRx/0ElnaEknSan2/Zz9qNuykrg==","signatures":[{"sig":"MEQCIF70YIOYFFVUzR1Amm9rJnQRgH133N7gucburWJk4Q9tAiB+zQr+tcDsJ56bow52WEpU9pbciazw8BWcq8ncuf1XNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7BuCRA9TVsSAnZWagAALKIP/1qG5UgL9M8cGCRER8af\nmmiZQ2pXWxrBJ5jqf3T2msDYH9ZCOzpdKXG5ug57Z70ddQPT6TAHvafNg4fk\nvGCEUleNoRpdXELXBieEIGEU4bxGK5lbd6Ds2xJLa0r7ASKhD5KOl358f23b\n/G+5oxhC2X/cLXY+8VRq3JCGC8OuUGRZ0mtVgM7fK5WlEBf5Ye/+mL6dHQB3\nfeA+ne0yxgGz8ZwNbIOkLqGGxYUjHUh8uMyQVWg1G/MuAZhkwiWHhQObC2K1\nkYsjBn+Ku9eUt3swKJ9TeeNciQzO+OTu8xl4vA4u4vl0UYd2gq5mu6LV9XDQ\n6ebLfJ3MiywiS4G6wXbDiOSBowkmj8OIAIN3Zy8dHWPqOOMvNtji6kF4tyau\nTSEZ61oGyu4iHwISQyJxBBSUM6ndUJ82Q8T4VOug8PvEepxCbXhYv4/TRp/8\nJ+ORKDDEp9IYhETUvvP4zV/smbrs3NAbs7rRxBjc9QAoBz7lo7To0x+H3MOo\nmUZPsAb51lNDJ8OfC5IgYGg3oDvTF6wQeFdq9AFNHv5XPsW6IdyUrS+ocVH5\nsPnk3rVvGpf0ypAYN+HDGHkkA5/H5AHPZVuuEtrrCNuLEay1Bo7gXySaPGPD\nliHLQd0nHesQlvemcnagikYKjg8ShBtVd4jaRmu7EfaAqfAeKj2/V5BV4bs/\n97Wx\r\n=C0nW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c29e3d87"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c29e3d87_1539813486009_0.38686877172986023","host":"s3://npm-registry-packages"}},"2.2.0-alpha.17f5537f":{"name":"primer-forms","version":"2.2.0-alpha.17f5537f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.17f5537f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"951e8bcf21b6611b398d34512a1ea431e7d459ce","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.17f5537f.tgz","fileCount":12,"integrity":"sha512-a7x/jmw5o58MckFenyVXYogAMsgTPhw8j96DctqKop5xdan8ENqNYxTSXjXfRapohWrERiXbn5734jN9OKeOwQ==","signatures":[{"sig":"MEQCIHC6Cx+EEvqf40Nepg50AnHTFHaDxGehmF1ugH7XXssDAiAUQNsSnuFrTmNaQo87rSgZyfeiJR5mTVPllKNfDIsLXQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7OmCRA9TVsSAnZWagAABaMQAKHguTgrssIilOIAWyeY\nnWohS5sWBRC28Yw9ONWL1IzjpiaRD2+7ruvalRTK3s/0ghlbuPSrKs2kzkX7\nn+pJP/dLZdb57P1kbN5PcaelE/5G2g/g1zqbGEOrLe8bgG4YrSn1ZXNRSR4g\nDAnQh563RNdPO1EG/NWL8h4RzNvUUXkWsfKv63Z2RlGzTGY099MfY4karBTH\nt6UGm6O1DED9BjtK1E93VTkgbn7aCiEoMPcvzCfGDQOPbgikj0klrTLOvpn+\nDOpyXoDxldkh7z0FQ42WdCAGH/3ngA3KZPULn2915K/LEVaQ3T7w0BfUrDHb\nKw1++fzCGV1Mu5tOxtKn98/d9kgaoqBMpzV0HdxqYl+Xbfi0WdmGiLUERJ3P\nB/Uyi7co2YZG0gUxgB8Eb1kbyemAH4y/DqpiGDZv4yp7aWsyVfCiC0M0eqWw\n6SkO67Cm9QWLlqG8xGmIZ0wvMbFxedj7+yaSxeuCeo/NVkoXY4mSFR6tEgOH\ndNL33sfZFjZNq+timjb4yUFdp/saoKa6D7Dve34opHFP8AU7D7uSSM+c9gkn\n2TOfORO4kYC+FKQPWPf0Vl8kNvC2XgA/0eoB3FXxlL+qw6P3lhn2aX1/aDcC\n4U7EYfh2eGSB3GqPCSpwg7C+8v2GZ6gQolBEoyToxEA/qsVBWUkQUlfT25s3\nwM2Q\r\n=c1wI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","_from":".","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","_shasum":"951e8bcf21b6611b398d34512a1ea431e7d459ce","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"4.2.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"7.10.1","dependencies":{"primer-support":"4.7.0-alpha.17f5537f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.17f5537f_1539814309545_0.8682875342570493","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b67f7cc4":{"name":"primer-forms","version":"2.2.0-alpha.b67f7cc4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b67f7cc4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ef17119d22f9f29e39352872881a0313217f09b9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b67f7cc4.tgz","fileCount":12,"integrity":"sha512-YS3FWjDY7SRrDLvUvSnSbmqgZTeXSattsiQhqHJoL+XJD1Lb7dwf9cW7ztE8BcXID1PXYGWEnej4sKKj9Jkz6g==","signatures":[{"sig":"MEUCIHT+vbdoa3eTLedSzPvozeRzxC2AprDSfSKYjYiv3RpnAiEA9voFhQKNdBIxtw+4MDklwSDjkQL+oUGeFqmuwopOqj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbx7XjCRA9TVsSAnZWagAAdLwP/jXiOsjptHM6NOeZmMU5\nJYrMg13lYkUckyTKF1b5hb+YKDm7aCAeo7+vidbIWJnjmfkZjpnKyWUWwlGE\neP9Qn+u7iTHRYLYV+L85x8jku8jxR2ppagxSGVv/mVZ/Zb20ouS65wIX/slR\nskQEYRaHL5j5Eqjc8IZa68T3lFGxIJVlXaDRbBd8mMVUKvzrWcCpjwA0q//z\ndOEErsIXLjVv4X2gzPXa5G9pOam6I2+EIhbKIry4hJbWooi84hGyU8wKWdid\nC+ngDKw0NZh/ycUrCbj/qRDHIPUGW077aNlquJmEDkeaRUjYWrAtlBHJ2MS0\n/wIrHN8p9cAZlKgKPT7BsixOnugky7w4+2jJkN9rq9xTDJivVC1WGIizin36\nNyJG0O6xxS5vIA51Qbk14xv2W4Sfm1OKrwpzQWTnMFiUecaXb6oDlAdiQrsI\nS/O3+rFjBvWlAhHusybbUEAoydUk5Xu2J+Hf/YYgg8nZMmcbiQ9bScMKHpBW\nrR+gkd82DMt1Hxn91tRRRrZeaXDZtn2Eq2WxNM9J9lDtDVsFO29+nItc3IkS\nvQosVSRYeMt9tws1XERExLLb7dH8yrsIWP0YeCF4xYnGraeOZn3hqZ6oxr4R\nCd3FsyuV1QfGXGmM8dIVQsVYtmcAiTJgci7aT5acEDhYobXtSqdxR9+hPE0V\nQV74\r\n=eHL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b67f7cc4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b67f7cc4_1539814882978_0.8466727264404541","host":"s3://npm-registry-packages"}},"2.2.0-alpha.09cd6cad":{"name":"primer-forms","version":"2.2.0-alpha.09cd6cad","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.09cd6cad","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3fa73ece6bdb4ffb62d07d3d29327085a1b28bec","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.09cd6cad.tgz","fileCount":12,"integrity":"sha512-IHN1vgGUUC/yzufaJtC1q0W/eY6fRIiLRC6TWHYnLQJYSNSPE2/J6WzX0lznVBrxuPgRKQwG9zT4yFgTqtmNIw==","signatures":[{"sig":"MEYCIQDsr3BP3t0CLK8s5ZBsIjrTx3FEnVoArskqRpjE5kRndAIhALnr4X0UxpBkmJzrU+PXexJf0C28b3Tni/hcijInE0hM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyLw4CRA9TVsSAnZWagAAOWMP/Alt0J6oz10GhEwETsoc\nfnF5q5WHiwhsRceWRPd1KufnHOXCRe8snUveTEcZui1WufaA6RLyluPmwnsN\novKb30TmTItESnEk28Q64YUOZgre2Fb7+KvtAH/yrB+JfPRkjPrCFyyI6eqH\nc/t6N0Qft51REeMcD+FtgRdaniLGLrNGtSNJMSBKtKClcd1oN0T5Hd0Al3wI\nfHP6aA3gjRIcp1dZhAKQagDNp8u67o+XZNEQW+Q6/GuW/njx41MmnDMYeKZw\nTciVJ8DkQQJIj496nIWxMQh+Asulk0gPPyTo5wkordbbuH/5JCbj6UtudW7C\nGah0ff02lFyRwO8VzwTvbXIwDnUB8ZjPWlCtOch+eFFCFBrlSxu1Ylj5DIki\nx/j+luwAHZxFE+jtqRr94xu06DPdV4HQz6+jJd5q+2bo+K4gr12VkMiuTEcj\ne9yGMHvZv9u1hu2mKjvZr1/wbT5ZeNU5WDekHusXo6R4duQ9eJPyqKEUErIw\nYwQObxbDduXJoaufZxA0d4P8sKIg3uZLkhsobe5FOXQ784Jec1tMc7tloXEQ\nvip1OuraaGi12HaZ+Z93RRnD7ToXProhWJ3IN3ZXMCe2HVijwBIjpL+PfX8X\npYtAQ+m+z3AAObT17Wj968CVyxvfA5WplhiV/GwtRBsnt0c7W6KmzYpvboeE\nw2LG\r\n=TwDT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.09cd6cad"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.09cd6cad_1539882040049_0.4681757685191352","host":"s3://npm-registry-packages"}},"2.1.4-rc.5":{"name":"primer-forms","version":"2.1.4-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8ecaa229a287b0a101687003542eb96a1cdbb8e8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.5.tgz","fileCount":12,"integrity":"sha512-IlVMiCiU8iL8GB/34HAIVwjffno2CT2VXNJiVDDw8/WGClvlT1NGBMXclDsNinsBtb/GinlVONLrn+9E8sWyCw==","signatures":[{"sig":"MEYCIQDQqkVayGsu/KmeZxmnrpikivpUvTXwN3Goh/Vi/tITUQIhAMdJn9ASmUwnMzEeipop2UknyUjqnvbD5lJvCfM1wT2Y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyMPQCRA9TVsSAnZWagAA3CgQAI6L+AQAX4upThmLRso0\nY17fH+VlZQga+MVU0EYlWq5ugJagwIhJeUU9ZU/M6MrnUecsXri4pUtxu1Cp\nf6KwnBS5Ffs+qnCpDDtFRycZWIFw4SqoyBbxpe1JcdZ3mVpifPQl+Db7+KnI\ndg5c1QYrPIk65C1AA7E3e9jAoaQSByGkLkdylt3wTdBnJRfHSR2xWtO2Ky0Y\nY43W0FJzzEAjW10eeueUG8ux84C/Y4+slov/mt5jWR3TWIwkD0BlQ1tMf2Iy\n08UjX6u/FRvN/9+WQUCKRvCZfTy9NBfkICI7GcLeVI3NxqthtXizA/nOtNj0\nMPixmh4b92U1k9QHfndD5qgDJd1KaEjcRcPHveGB9X9n1px6LpdscD934oEd\nm5o1LufU/Vr7/trnGfESJZTR6E5H1Ooz8xqc0O+rJaKyjwq45nzKZg0dpmd3\nnCKThoy6TxMxogPcex4aKMthsVeS5f0mKkO5L/mtpmOQsJ2ZKlOIzP8yfOoB\nxul2j+apECPdAueLv3h88/P4v7q664t9fOcpYFpogxnEtZAG8UsFJW6pmUiF\n9xathJVkRLdXXSnx6Xg4WnlmF7lWHxC0cWuKglO8cEQCzj36Pj9ZvF1lZB0U\npDHWcr/UkAP1c2X/IahRM0ALVRiKyehGDqPEGeDbyJ4UPdOZ8mukXHOoAeqo\nMWyG\r\n=3QYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.5_1539883983871_0.6501597797328929","host":"s3://npm-registry-packages"}},"2.2.0-alpha.cef53ac4":{"name":"primer-forms","version":"2.2.0-alpha.cef53ac4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.cef53ac4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6e762d1190eda9f911b3caf7ef7d20107737abbe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.cef53ac4.tgz","fileCount":12,"integrity":"sha512-+x62hAqFO/U1TRMs3NBmA5FSGG4t/CwTwD9PjMfh4wIHF4MFwkcPII2YvmNC1e4E6QHoeDOxoaXO5Pz0ImePaQ==","signatures":[{"sig":"MEUCIQDtKLylYunWYCfMsksaRzQDw0bnYTuCEKYli0bCYsbwfQIgCdKwwNJ6EiTo/QL9mrMaOa7oqqEzOcZGbFm5DK8S254=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyNGACRA9TVsSAnZWagAAoEYP/0QzHkgRsAyHVyV1GlXg\nlewb3xtVxh/quW7ZOqRePfzUr2rQyfsP0NWqwG6OLiD1XXZjnOh4bHtnDl26\nDamN4Ql21QTeWfI0WSmKymBQxkn06pDFBI5+cTRF2H1J7E0MBZ+z4fwtQydV\nrSnmzYHnjawqCnE1YGhdnpsT2m6YGbKMuPvEW90+4jf+Qj5N3tQ31nE+oG0z\nqdakcWVYhk08taOlcc5tDM72J8TzBAkQZmXld+RU+p/WLzpMBg7a99G4nXA9\n09UmqlHen/1VELSX2wuOR7CQxl7rqIw8j/eqElB0c+grqnC5wg81gSEk52af\nh3KqP5E0ftnnEcMGRnKqhtF+k2A4Im8g7lZnq4CfXs0Ky5+FQb06YC5rCaG4\nV5EfXwCQXKjqXJOFKAgOrur1fneqpJP9HuFKcCm64pi8QBSzwVrl8CMjcyyc\n5rDPVpsWHKzTKphcQs095f97mE32gesT4PE57qeJDugRRBRV3RP7Ki5eSJVT\nU3eaYZmcDfliUvOk73v+D/4NWDi2F12Pwi6l7NstYMgd7XA79IWSDn8Hw+nB\n1aC3HEFhp/NY+7KZ9gI8qknrcQ9+n2sC9ICF5EHHtS4DpzFfWOUdQ+Jm2aV+\nBjxmTts27rnIm+xMLI69qGL/9KWelFFdn8FjNCyhD+6xSDFeNLrz/53mQOw0\nezIY\r\n=i7k3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.cef53ac4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.cef53ac4_1539887487548_0.5041388189527205","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b014d245":{"name":"primer-forms","version":"2.2.0-alpha.b014d245","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b014d245","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d2a6fac492ad19e4b215932d4b052b0bd6655d5e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b014d245.tgz","fileCount":12,"integrity":"sha512-SBC1hIzD1mFkKszIpOg+5/gjHLeBxMsNYY1LXOl9ibJxiMiQNobcBM3sYXX635o6j1GJAaIMOdyig1o96+GdjA==","signatures":[{"sig":"MEYCIQDRpQ8Lq6nKiuDITa/bUjwl68epguKbici6e1RuXybkAwIhAIe986FDlcOpNeDDT0iNr/iamxf4xm1LjNPUidJmRzwd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyNP3CRA9TVsSAnZWagAAf+gP/RAxfLhsZOATXeilpDXt\nvQO9by2pCc0GBly4UlCsrKBrj/esWbbbbcNbH3U9TdkgY20bzbxlXxzWSIGN\n9qAclS/WI8RWkRUEzUBiZ+LnYAW7terZvm6T/8qt5wODZdNtAK3yS0P3x17P\nyakDcUPKEcqlUyarp39fBrQK3q6N3v6HOmgk+qgI+yE5XrzyYDcllP1AgBru\nXoU+tdGgbSykOyuhjEb4ZGuaHZPI7eyizrERCp3LYVcWWVIsgF61D7Aue6xK\nZnMABIzwKBBywhEhAn3sf2sGwhrfU4XQQ6Diu7bCHpjC8O4RlDVmlA2NSYLT\nH1Tt0VP3cloNT9PFYgmyrl2q73Bik2R0C3zSEj8cdEHAwKaCcKP9Q3PVU7eC\nTwhhwyUQSTA5kyr1kjaCbEDzSnovdXqsmOcME77YwRkmrt62LrXlQxv0+WyS\nIsaZPYuP7DLDNF7WccX/Yd+3zQz723WFhBd62StbHc9Sq6XrisSfCggQbOkS\nwZBotRcx0JlPWPs1Iz0o+hUiW7nTK/SKmSSnRntQnX0GxLdJuMq33Zm9m7Vw\nbLLj/kcEnL99C3kOiaH7uiFUheQG2ugHguGoWPTtbYV2fNIF5pfMabRRoWGZ\nbj0q7Au+ldeJBuQtLGvoALSp5dEYpfrp0hWYJoOhettm8OggYSMVmezWTYg9\ne4bx\r\n=32Ga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b014d245"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b014d245_1539888118588_0.8529658321970612","host":"s3://npm-registry-packages"}},"2.2.0-alpha.49d97c80":{"name":"primer-forms","version":"2.2.0-alpha.49d97c80","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.49d97c80","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ee5a0f5ab1ccd9155c62b74978b4e7993de29199","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.49d97c80.tgz","fileCount":12,"integrity":"sha512-VRQJC6l4qxzZOxDBR3Ie2IcDPEBPKY1L8AXI273o2KUutp+srQzoNnQF7ZiMkMaTN+jtTmBk5nHmmVOZ3hbqBA==","signatures":[{"sig":"MEUCIQCP8nHvyfIvYIRdUmUb1arHN5k+lleQu8xyVVzXdMvn4AIgZKs7sOImc0fKcwTc0gh9WQ64bWkppTesNWD6X9VmSLw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyOZ2CRA9TVsSAnZWagAAORwP/2hHX8F2BC/lpc0R5tb5\nwtkV8sk0UC/B5oQMfME9XkZj3l/vrv0dZjN+oHHVMSeNTboAJeAukpem3sbZ\nTmRPT5Uq3YlT4b3Pah3mIZZm6aX/XEeE45g7QKJ0RDDInTSiNmPeh3L0atCC\nN1UxYtKSDKH1ujHaxj7ljfUHqhoGgSHjA2rCvSY0U5nTuxjMOl/w06fpSulg\nlQqnuQOGTlXLkHg4St3JVhVsQnCPTpoCEt42HR4HC/t8OMpDhZS9LnB7NgGO\np204YgLZVCefJdeWwk5zNFmXOYulPsx6XToAuPbwhKAZ0vGd+gZwUzxcQhVT\n5ddZ47tH/s5Xwi8R+R3rKcbBR7PUoPIUMROip+/mZg0QcfJjJNa75rotNBRj\nJpMzVWD9s//wpgdRCPi25ZQzD8yBzVKHXbrtGpLTiRhjlMXx/cb5PhuAlYfX\n5vcHnst1RNOkmvsIBbw9Qts1hwjZ3Joox1m1gUI77YMgFpFJY4rxivnh4xSx\nGK+L2hkwDftIYEUtMBWWEW9i/bb2i8WDno0axGWD3dBSxhzW++awy3tEs7WK\nr+TT3NTh/GoUuzwsOErqS1H7HenaHjByrqWZG5NvdF6Jh8RkQkoC3krZDkY6\noJFc+2cpaxHQAfkSSJDbCNWXSlKIofxFFgBhPdsfvSudVcWKKNZjPBqQPwoD\nGWFP\r\n=wQpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.49d97c80"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.49d97c80_1539892853317_0.6361769223913847","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b5459caa":{"name":"primer-forms","version":"2.2.0-alpha.b5459caa","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b5459caa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"12a25581c4559fbfe5c0f1b6aaf5ed6421ef6d55","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b5459caa.tgz","fileCount":12,"integrity":"sha512-rE/MHvR/BL5HJgAJc+HOuu3rQpfTu6QQLSCM2dXVKwwlTXlnGUPW+Oe7cYBTo6IRG0mhKUVSd5gQKUpRB0b85A==","signatures":[{"sig":"MEUCIDXPaLg13RZ2Oljtu0+2iLqWEk8VEPfRsbgisdZBdqzzAiEAveHE8//2vkYzHtmnSJLio9/O83Bk7eEnT1iQu6dg5EQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyObDCRA9TVsSAnZWagAAS/0P/2H4ZGP0B+41EW+Gtf3b\nPgKXj+3heTY7McpiJ0NjNrqINmj8tjKOU/5KS4HJYubG04hjQz/RKnf+EYfm\nheHG+l9esQ+8KxYzMO+nCJgFQXEU9E8zkR0CGivatq8bclL2llIarRsT+ZtR\nuHtcu2XYzUBYoqQxv49H6SCu79oJF4GUU7m+q9ZstfMxe03zb83xMTg0U1FT\nR5Ex1Qt8hsjNP5XyOeen3T1c3I7Bu5MrZwRercgzDMFcmNMLYeDsDdwCGb7n\neaJcrSv4WKzp3TF+O/sYTe0fAI5hv2t+QnbwPWYQ4l3vGH99DB6Zvu5GhVV2\nyT/ZCQ7pJZVFaPsFTOEzXQ+VzIttoYsSs4cx7PAzlmCwAUMhG+Qx5TqfUzgS\nxv9Mv8ePlVvqT6qf8PrjeXI1XpHbijf5xUxXDrjYq7RRWrlCv+4GllEISFSK\n2yPWwXOWm7hMMThr4D0A5ZeMwuipjNegJv47bItz7T1qRT2tL0ddgj4T7AhF\nlztvPlLcz3e5MYoKO0t2pigKlAoqGzW9Mb06J4wYDCp1geNt4elfp1XMyGsM\nPcei/nB1qH9yj7Avigx59+qEr6dpyJ8/53YTnsrK5d+5UbzOqno9Y4JAsoQQ\nz8sQro3/VC3ZXi3hyk35hTBeJGBugENw8BJsmxmHaX2ajigSKHpkS8bHg5DN\nCXpq\r\n=h7oW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.b5459caa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b5459caa_1539892930539_0.6025649166138487","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7c8d0e34":{"name":"primer-forms","version":"2.2.0-alpha.7c8d0e34","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7c8d0e34","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"57aaefc9996547e38d3da95d23d91afaf2f13943","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7c8d0e34.tgz","fileCount":12,"integrity":"sha512-dNGrnXqrLxe0pPAKG1sFKW3+Wv7rKUbwnQ8PdVrDOfvdGeSgOBU0Iy+VZMIYV2iQxB8wV5lniUSFHrtvqM34sw==","signatures":[{"sig":"MEYCIQDM7ijGPzv7zrvvC9VzC7R4r6fcwWs6N1UPuQRbRpngpgIhANSYDPmpk2Qc1EDxiegcr5P8uqcUhbpqO3JL3tiMUQSt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPkPCRA9TVsSAnZWagAALQYP/0BHdkUFJf6MaA75ZsTe\nKgVgH9NT22JUh6ixKuc9ov9UuZ/Y1wW4nTeNaVGrVds7qvNlOlQ/Sib9i2c0\nHMagsrpNeshK0FyqEH8zmYrxLQsIW6XUV6Pwtf5wFsgTovluFag7+Z2TDlwG\neusL8Y30ThaNbiG/xj2asVTxBO6kr8ChlHLIqvtIEismiZLTk6jUj2/1ZsRB\ngxTEy406ODOfEiwIJarFxfYXcZ1Mi/yKdVzpypHNhZZ8GIBLbZkhey5lzrsd\nGOPMA5ToTIoNrMdvijCshF01lId8z2a496GQhnxb/53LNYynBEs8tZBevsot\nMABFQDjyd4EesOqSK037nNT6kslYhUpCNsA9ELewfk3ZG8za6JsQNqsjPe9Y\n/kY59OWGRo9lDlwibZUyYxIi7ke6iSsEWsZGzi6Wk8+n4A9f3JFtNmut8W2Q\nbnSbj3WaCprzacwa9E6UcTvJ9t8WMmNsLqp/BvFtdAyDCxr1vGQv5KXkX9UP\ngnQYvhTL+66X8NwoRuTpD5DO+nsM8vMj6fwBaobsYwy6st78IxiwrOULV7/v\nEA5dZB6nluZYQxcEhpZIo9b1R2EKsC0NhiwyNmjGPYvb9OO7i//7QohlQKpN\ncAPu1gZThFNEnEIgm6pX/xshEPN/ONvEB3IAIs2cZX3syatRPRwt2XhLz/ny\nqB0v\r\n=vwnk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.7c8d0e34"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7c8d0e34_1539897614761_0.1074099642785522","host":"s3://npm-registry-packages"}},"2.1.4-rc.6":{"name":"primer-forms","version":"2.1.4-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b761b9e5816094c442a68ab35f1802f84bca393a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.6.tgz","fileCount":12,"integrity":"sha512-J224TuAiQROcJ5TNzQavuH4FtEXTLRYzAHnXHFhei9BOXWKQ9HW560qfHzzl7ctyuKtbgb4nikxG0fbf1f9/8w==","signatures":[{"sig":"MEUCICczaSTg8xuKn/NK81KE+zNDCK3AMe3l5wqNB4khhB6EAiEA7VFb3GSp1Gz56exi/m2YdTZwzO+B6s98sZsakxbtFYM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPvmCRA9TVsSAnZWagAAN/4P/j3mLkkIb/ZdHEWqZrRo\nT4P0POd8pUy6yQYY5XQraAjx9p0SNztVQ+PRWvrOyqiWaj52c0NrenVfzZdH\ntnGxtmXno+fcgFxYLEE/Wly2kWo/qrkl6gGzBRCwRmTXX/h33v+N4NNZSGuN\n8OhNcYTUsen0T7ZZGrwfeeYtdhcPTXBw7pl4Y0yhKQNKUa6iufwvJD/I6O5I\nUFsuKQln1UqmD+2gQu5Xq77W2t0/3Yvhxi/DLrX5cDEN2GsikH01Cb+s14fZ\nmmI4iqwy8avCk97AVgK7OW8UHvUNtnv2gabneBNcsRPp438/kJN4nOLpUdv3\nI4t6rO0/bFgIh56IZv/K+fJrxjA+XwQ+mhxIBt+4tRryqusPgJJC7/NoIFW7\nK1vAWhfyJD2IQHpCd7/lyw9AC6jGeB1G4KS+dIl4DhHKKn3npCOmCKzLnnXl\nfOK0Ymt6W/lcffdHnWoBGmh3LCOLqkh01Wpo8l2qeB425+vyiNwYbkQw8Id1\ng8zlCU1vQvHPqAGTAkK5utK3XZjxqkAAt9ee5AhkSidzx5AIsYHxvF4MY2qN\nu0Hv6hEPZ+d/j6qKob6+2i+ecJqOdUAaRBEWB3gFyQKqtsJ6CMN4lPJA7rkp\nKKFOJhbclCCDm7xdMJNCT09fDSmhWyLC6iQnS8rExZneS2TtsFJQ03wDp8bQ\nsckB\r\n=IBY0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.6_1539898341551_0.4962648995340839","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c396b082":{"name":"primer-forms","version":"2.2.0-alpha.c396b082","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c396b082","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f7e0a2f22750cdbf18eb6b9010235ad3a9d841fc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c396b082.tgz","fileCount":12,"integrity":"sha512-uofEIU6iVpW/dkpcBg18gVHABQbMtpj2rmOCMAP6X4Tv6UqgzLKcME4I0rbw5FDezp4VJghGL/V/+gWw5M0I1A==","signatures":[{"sig":"MEUCIE4eI6mXoZudCUv0ib1An5UuPVNLpKPyfv63nzMWHusGAiEAkdYnUALr3XKWcfMtf7n8lffTC6c1LDTKYSu5P+28yuw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyPyGCRA9TVsSAnZWagAAfJkP/inXj2aGJCStzyjMRUIZ\nWV/CSCqk2AmC6AKvWivPlwoKeIKqhllOhcGlYRi6MojK6HIXln7+KF4DqZqz\nPDChzf4n6DEgfvyBllOr/ZKtWjP+RKplmgL6QhkoLfczrjWoiPYlzNZdy1FS\n7YQHzoPPgkcCuHo44HkZmDj+OHC+72oByDhniPhtQE61SKz2zib0t4XkyNgH\nZtkX4p8HoPSXaGRWOs/R5Pt2PX/mKRFONNTn+EWshC2iekvwc3JDGylDUYs0\nVnuCf5wYmROBc3WpJrF1MgEswL6YP1TZ/K4VlA4zQia2enuR5oDuNjEgAJZx\nYHgbCqYS3A+Mb8kRIM6esJq4lvTXyVTGmq1Q4gPgOSa9qDpe23uBVpJCWWCw\nGHWUaLN7CTSUY0daByyd7QR9YS6W7eCBAd4QwFtapiV6M4hBPS4qa0/Nmux/\nCIYrSU5SEU7OSjGPE97cLEewAqXQjxYHtoUvvzspeHV1cxOqCZ1DcEFeH/Uu\nqLR7LiLJGN/Ru0D97+bbiuILpV1YJHFHhXSXCF1qVRV7pyrE2GExH74R3f87\nrxQzOZGe8HSYd1VfBs3hGyqauWPDfrs6nKhoZ/8yVBBnd61kf+Nx+7jRA8qq\n7gvUwvF9oJQtl/+o5Q3I1qTgv6uCZ6x0mzxamTNnM+ROfSL1H0jeekqUCNhA\n/SRr\r\n=8aF/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c396b082"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c396b082_1539898501613_0.9375120231090726","host":"s3://npm-registry-packages"}},"2.2.0-alpha.47902cf5":{"name":"primer-forms","version":"2.2.0-alpha.47902cf5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.47902cf5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8df52af5bd55a635fb9c8b53ba600484204d795f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.47902cf5.tgz","fileCount":12,"integrity":"sha512-1/GtL4yXSwBptnZAfCizuCDcJ/Y6efyNaK+YSpmNy4adISAs1TQpiQdhjzMQMdGb4mkfa2jaetXq/DKfahYg4w==","signatures":[{"sig":"MEUCIQDfjOKZLsN4L8+IrASsRt5FymPJs1QYmS7+Yeu3uuwehgIgLuCD7BIXMApYhBA3Jw+fu77LKm1t91OOg0rYu9SQU4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyP16CRA9TVsSAnZWagAAnBEP/0GBPK0M+Hd3ZbLyboK2\n+6rQFIr5cfy7scXI28xYeDHB2Xj0ZSkljcXx3BS0LF9HGHo7+HnYE4y9OMe0\nHgOU5SPSZfpnACJp+sCBsVxs4djei0aVVRAMFJR9iKiVBnpkT1mR6wWirnW3\nGyHYefHeBD0cw0I6wKS/i+SFogKCjfGMpTJRyBtNJU+L1y5iu/C1SBghM/ZR\n8TUN1+EOCrmPbhGjWCS/oiFGPw3MGyG7OC7PSuMKifn34D4eWfoqsLGzVkSC\ny2Gn1akVhza7K1eJk+D82YMCYr3yILgJ7fKpOdyJZ4DwCEYG6mel9RPyFop1\niQA4/y72nGo2tNcwdSWANclpUXX+GKmlekrQOv/gXBxIYMnOjuXkmIsAwfW5\nIuYS5ybSiXoOaR7tKgHZZ3UqhJhU8+/1zAw3AshNzL5wSOOhAMLUsG1NuGXv\na6HK9JstcJIO6VeXPr7D11ZWaBBnrdTpirCXv9UzICkDEUGd2y6oTbXPe38f\nQGYw8Qump45wtVmD88Z+dz2p9G6VakZ5l+Rs73ntqy5i69e8Ux0ULu8uff4K\nq3Q7g+5wMY4SUNrgLMQPQWbCR+ND98XYtdqEM1s863P17qnKZplb45LCMxHR\nwUmbcQLssYy5vEMdrjltiLcqvR+rkLga9IBeDr3xVBPSw5GXWf2Ytx9Pvsu1\ni8pC\r\n=tb7w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.47902cf5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.47902cf5_1539898745308_0.19415946689044605","host":"s3://npm-registry-packages"}},"2.1.4-rc.7":{"name":"primer-forms","version":"2.1.4-rc.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0abf982b6f4e91aeeae77506841c5f489799d562","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.7.tgz","fileCount":12,"integrity":"sha512-TVr7B00cfK+enPioBeJPfs+dgVmKAfuBJ8/v+Vn2B0zqIYWgi+49LbncaFNPg+BOvd1UnyjNd6eDV1WAxctw7A==","signatures":[{"sig":"MEYCIQCuNpq5SIit4iKe3xeqC5GqNuCMD5pYAspLfJAg+Et6kwIhALQSW5w/mE22k1gMcKCcO6rvrtwKyJCGVYr6NGgBs1gG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyP6QCRA9TVsSAnZWagAA2OgP+wSxCwH7gjvHCx+aP1MQ\n7/XHNa/b8dS2wN6/LED2AgTLX0270X6RVx5IDpWwuUcOF3ELIGtiWItjYEUO\nMoA0eLBUV0puCSG2Hr87HtUlptjYa28FDdqskEAgMO+2uMM/IQ8Ml9WugmJ5\npKoUp/astTZfzTn7fKM7o7mPy7TDc2pkEtW3wKn77t6OHrYmiUjZb5OA733o\ngjgSZhpjYhlNPFYgdp4hMVI/yPDsxABqsn9YI8M5YZk2QB0tq02JucMyC4dH\n5Z0XNzsrRCCweV18iCkVbTXEyTrdwt+n4PNyLQipjLC5YnPbWT0cFGV9RC4l\nOp6bKuhrU82HTpq0WcxEztatA2UeulRfdTNb3+gjOBXWFE5CW4VA3e9jb4F1\n2yc6QF7KHnFtELgHe82w+RtIHo/mLozuDfQhvFxXUAoX0fEYhTD9iFr9b30j\nf+jfrby3MITa2vDPmB3MwRysVt5f5TBhOwWKREEXmSwfPNg1FOxkjTp8JHAX\nlHpI4SQzGxaJjds/rUElMxmhgpQ3/JG/T1/W9g733tOSUaXNr46ApwuIG8/F\nM14zKw3zQZVRws4DDqc88Q63NHi0j3zQxQusDhY+E6+6e1S8woaaejHQu+Ca\nVnrXaGPcYOdw7tFIeewoasqt6/f60PZNTpWoZyX9OmGJIvuvtKJFo2052VSb\nRqJ8\r\n=KQWp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.7_1539899014900_0.23026349103560517","host":"s3://npm-registry-packages"}},"2.1.4-rc.8":{"name":"primer-forms","version":"2.1.4-rc.8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d2093af8dfa78155536945ca7366acb86b702f2d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.8.tgz","fileCount":12,"integrity":"sha512-qyVD+2yy+qGBI3vnas9M7n26YAoKxB8STlEQWVMGD2YdH6wM7xCKSPuwiGHo0lnHHZ2ksVHxciDnMRY5OXuOYw==","signatures":[{"sig":"MEQCIHEpVKMyEyz8FCc0rhwObMOD4WChIFgSB5OqWMISMZqVAiAisfAgsGEdhWhNI9OsC60Yq8gsBYUElsj+kwycORTTrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQArCRA9TVsSAnZWagAABXUP/1vt8fXV2gy7MangbVsN\nJFwxfqQ9ilRSha+oYkzwEX685llerW+KD3ImPCVg+vbIy08GUrNmUlLE8RQc\n3Dfw2OD/T3ahtUssvtaBc/31mnT0Y0+KpXy2Om4F70eOO5/FiDbpRJjP6GHQ\nCE8n+i0Y27f9/tdxWCVfmS/ilvEzsdZr9Z0PymZ5297xfYhx6AuknBSsLhKM\nMVUfS1WlmazseX70nQmvzjCTR8B5Ta9Sy9elngx14x07HLqLGlX0pTCb1jAI\n05HY3zxrDjj1VK0LEnHptZTyNtEUKpjMAbI9wLUyknwEj12yQz6F8+FU8e46\nf2iT+ovs0cLjdXZAOqpFLpSAAsiyfzkYla/iINGuuCxHg9KlUodSxZurNhnx\nScFjfViOElmTxQzQqkRI49whXQs/PG1JscVC+hamG4uZH0nGkhc+7Iq70YtH\nRVEKX4x3Fugg12vXyhZEnXdRkxbPXzDXnjsSo2NcGhFOrqfckhvTKtmUufaX\nSFngN7KpUvnKY8weiS9ZZgwGNXfjvlc8irvjAvc5Rw+icfaXcJHhAc56hej1\nIW/h8XAIICLhV4vaW3+GrPm2jAxfneFZPnSq36M9o2WE1xgImvBW/wleGqSl\nMz1k0/Xc9e/bgVi/i4PRDQTP71JBMCXUiIBKxO9vPvlmDWe60tG67wQjtxbx\nXPXl\r\n=/ar+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.10"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.8_1539899426918_0.5751302698997565","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e61e3868":{"name":"primer-forms","version":"2.2.0-alpha.e61e3868","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e61e3868","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d181c3d30f99e83b02be9256706fd1e6ce69f37c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e61e3868.tgz","fileCount":12,"integrity":"sha512-7JQk10tzsbjK1KjaQkxJZa72uXCfUgW6qNQeUhQJUgn39WevDWXuMdv4kay85/Q2tefr2Xag3Nx93V+PCdNxvA==","signatures":[{"sig":"MEQCICEL65fBnOR+Lvff7DKc3WfhxQpH7NDXecvfvsf4k+aDAiAEQeQ6i9uN+f+gMN/CJ0uSDjloQOIQT2HzlFq8LVly7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQUfCRA9TVsSAnZWagAArwkP/AtetUpz5s9Z6qBtN+6I\nhmrh+rXmxZ6cwDD2HzihNlz/GxaySaN8YLcaPV2FjpZ1w0MNUQpnwvjOuhK0\nQAAn/3Q33rrwq24bNOMA4qZhIQj/jn5/rJd2xVyU7S1DXcV53G8hidtqtVoJ\nyQFGOUiKFlkRJWZZ8Y6tyg0pFHQK+4gh5zZiH/O3u5i+IDr7fRnyjPhcpUhF\nIHS10HTtk+jbi9YXi659F3Gqp0Z/asANHDnfsSFALLfWX6xTMXm94tv4OBgL\nS8KrSVJLNMtMF86V51cTjXYOFW00e/tU66qybjjmPiiEJ3QhC1dW1KREIA5H\nk2+CcR10mE4SGCMuYc8Wf9AcM4nHwNdGIW8w4Rz+cOIpa1DkT9fjeGRNli/M\nE8/AmulRE3pBH/bgVbYindFjj+wwW4Qc8pTiR0EfK78cKq605OOkLWsPsrad\nr10PZ/OWnM1VNwv/DaKiQ/wULEF5iNzr/eoF44sPlEPkufO779Rdpj8ui06g\nILJpc8ar5FSfphh0+YYy+Cp8WaSpXcVcf/BGqDCdyzg2MHwcr5R5L34F7628\nstiKiTCUh0ZkHLfeDKV4KmG1OC7TszP/OE7deXNYLF0KElTbuf4AKnK6xJv5\nQ5Dsom1CaXPoeEP3ihRgsoNP1XBmTej3PV0zae86XqSZRexI34cnQoOkZF4z\n6Y/p\r\n=kVIy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.e61e3868"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e61e3868_1539900702485_0.3826167150550144","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c8f9d606":{"name":"primer-forms","version":"2.2.0-alpha.c8f9d606","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c8f9d606","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aedfa379896199757eda2763dabbd5208d97c45d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c8f9d606.tgz","fileCount":12,"integrity":"sha512-hO6d9zmZK1HyddB+gpmXiuEIxWwfhXtME8NwwDd9rlNkvY6AYygTI+vOjaqI5dfEUy+GK+xY31hiel6Q0yiepg==","signatures":[{"sig":"MEYCIQCj2AjEs10e6hDMDQudAUudK2zqR2rS8WvnurAcBRKPPwIhAJ9lJXyNQDwQqZj20BJXuapKbUHA+6DrRyesg64+3xsh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyQgfCRA9TVsSAnZWagAAk1kP/jxmko/e3DicIjIIUTZY\nyzd6LIqa9BSU9Pz9YOEWdEdlN7ZrBisabbpV3PTEP85RW+VSYGHk5+p6Yn4+\nFhTiRXfWp6HsCRrCsMHjSmlfVga4DMEXGeSB3jfx98zug5lqPBvAjEHXmzam\nSc01U+r+nng5MsdbcDhsgCON4V+emNVV0YihIrqypFE3/ijUtOufwr/yoNEE\nFQz9N4sEWpecTVYF9vN68pWOK1Qy9TiSfjl2gL3NRMkIDnu+aMvOKnmfoIV/\nHox8A/ntN8VGrQPGB1XjV0Sdt6Cp+EwSADaJrCAKKPWaVfvDdmLvatjcKJnd\neVMIf9vbXL1rdXgJnaWBBp6rHkmS94lTMq6vHfhpGI3dEnmUNd8fkTYemeev\nLNJumwS8ABcYGemBle4ISvBPU92uBqvxNgJx48rpqUSftygG85bCz01MpZ2y\nEpTqjRAoxL/4OuO3Pd6tJuKcxz105++NllQhRt9kySRqjkCd897f14zS9bvN\n1KcytAA1A0bOiErjy2SIySIifUnU4FeKyN5Towb25rEU6vlNfXMQa3zBgZSU\nUEu5J6hiytt91uheOTgH3UwiOEhamBY2FFkuXOPBqIbQmB+CJ/X7A/9Kzvg3\nid/FiDr6bwOLaBaQ7IYDQQLBRjFfapExE5YTinYEhZRqg7aISzEEnaL6/4HU\nc8bW\r\n=Zwo6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c8f9d606"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c8f9d606_1539901471143_0.5940990414828591","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8ae934a9":{"name":"primer-forms","version":"2.2.0-alpha.8ae934a9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8ae934a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"22303d12ec8d3c1b5b73dcacae9e93120b2aba0c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8ae934a9.tgz","fileCount":12,"integrity":"sha512-8DPPRinHXRgAoVHB23FM2Zytmn8ZMuLgFUbxLOolKUWk3tdsVCFSU2DTAdzWxpzSCdOgDT0+mNAjprT7kX/GGg==","signatures":[{"sig":"MEQCIGsgb96ph9J7tNoiRe2fELycYoc5cCwBufd2v/MM6+O/AiBqzRFxeKYB0eGWyXrCjqI+aravCBAWdyvTus4PzAGd4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyR0UCRA9TVsSAnZWagAAw3sP/RQnKpyQ4oCAsSYnLbaN\n5MmDXauQi1dnB4/VE72pwz9NZ7jFHv99sZLfMdHg4FenvX9DN6VxcY4Y2b3g\n3ajulivm0YZSskjHg13CtQLL6bGDaGK4mAqDUEUGjDXyS2Cfe7S5/hc2VZ1U\nEZ37JqxyvmFjOSF7xRogVIlZ4tlYhVSl6FYEbEjYyzMKne+eCFAS3gmQOCa7\nTZ3mPkWcF6kRdLuM8VdLuoIsv+OLyCht5H2JovOYOUQyel+lWoBvpGBQjQi6\nCFfxBQ12QMqBNwdX7Sk9JvaQrGpWMotWZjUzZTSoKa/M39fjc1KkXxXue013\n306AQSYCQW0tXQUFoqSin2+wTa2MIyOXY48GVwnjLh69R97ZeyfyR//8ouDY\nhx1NVSye7GushtLXdd8DtIvpnxy62sAbjLP8UhxVj7AO8GSTOhT1OSE3jBdf\n8l5Vs5jTtDB4LL9XkymVEPgGBisvm0SYYu769y4D0VE5hFMSMNQd0puvdE69\n2VxEaTFsOa6vGXELmiYPq+h1qJWo59DArej5794FyZYuCXoyUM5PI+dLiVsc\nP6NGWIYxTipYtJrVLlwnJu6xpS2b0R9TEfXkru0uEJOgFLrWlfrtZ9ckyteP\n0JWzdgMusegptyyuII7nDyj0RycqumFubretzILLEN9ngQff3xLQECTxvb27\ny5IJ\r\n=CyCV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.8ae934a9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8ae934a9_1539906835500_0.9519138405141725","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fc68e650":{"name":"primer-forms","version":"2.2.0-alpha.fc68e650","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fc68e650","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"132de5ea53c011f9c9e60311ee83156629101555","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fc68e650.tgz","fileCount":12,"integrity":"sha512-fwwnR6mzwJ9Q1w1SksTsMVIWStb5ZD8HRz3BM0e1yXhw66RnrmMY5Ar4wVnqQMOgl5c4u4DtF8C83UEcZza7zQ==","signatures":[{"sig":"MEUCICVh08zNFBP99GRZBXCwqo65Db3o7NylW06Ac0Q9iEyjAiEA73ckxm2FMrYxVHMaEz4tOwTbAfEtMHqnse20imMpgrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyR53CRA9TVsSAnZWagAAflsP/igLmEZ5TpE40HB7wZt9\nCYVId7hQQMIp01zMa2ccWqyEh5iTzhZoMxmc8HlHe5nbvlXuiUauekcXboAN\nK3BEJKAQhCWIPLdoErrVQxfc7hroFsGjwty7B2rOTNYPNvwDkasi4glpLrHI\nbUeyhF8ZQ98j7WjyFE8JKpOocbZFT5kZrmCDU90xal+oZOLV6ui5kgMqY5fN\nfUs8snAyTLfaAN9feorB9GNgaLegTHSLujnvXxjtvE4BlKLbne3Bh7ArOu7i\nLRzG4hv4jrtLGOp8TgBvk1zqcFsbS64nVqF2JaF3f7/pXQveSLA1P34YCmoF\n21YX5RRPoVjh6zf+zY1uEwysg46xxmfH3hOy1zitAWgdnz0tYJUHSoabRsPf\nZr5UQWBYXmZDEN9ygtu5B11qizSJPfmM8PfrQMPuRGk3LTn5J7BBadxNG4T9\nBiPSyn/hVihKf4e/f7uJVa9uDy7pks5aXxtdpMft+iUrfSkVbA+as9OXK7iB\noKX7sZJtWOWPf1EB22h+3+3zeZlb5GzneAILjd3PlBQOalDfC2RGemnlDLPb\nZAt/Gos0OsSNTwVWd5rN7DEXXozGp8TQbDxcr7+LXGwhZ+AVRhYHT8gBtfyn\n97ZjZqkK8/jgzFO/uu+osWB6Z9tKP4H5byMmaeo7iyI4FRiOKiHyc+J7/w0z\nib8P\r\n=hIxn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.fc68e650"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fc68e650_1539907190627_0.038169328750381704","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3080c2dc":{"name":"primer-forms","version":"2.2.0-alpha.3080c2dc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3080c2dc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa9b1fd7f7cbbced004be5093acc7e3ec67eb5fe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3080c2dc.tgz","fileCount":12,"integrity":"sha512-cyR4j4vajtzTl92YWJVOEVNMBQPjEhJnR8jvCoxF1L2N4EX0HwXT4sIL5WJI6V/vGPxjzwLynghfeJpiLW+zlA==","signatures":[{"sig":"MEUCIDlId7WEa4Lz3Bw9j2jPjLyOk3la1VsYPq7fvO8dw/qbAiEA2iV4kwQpqswP31tWOWwIBvlxAboaTxKZ/pybDFmuHd4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyVmKCRA9TVsSAnZWagAAsOUP/2NjMjx5RtFgbWYmLHvx\nl8WhHG8z5nSHftKhcdT4WQcR20FuVVZQETWweILyp895Zw96opGMetOwl47c\n1Wv/OGJ/65KCmClsH42ycubAa0rFSuWG6zPpbej4T4tjFIgy6p1hPXk9sfif\nvOYdkEguy49utm6Cpp2FoJZAH0LGX6XOAu+8vyUqZKRvTmW5GVtrU53SngGj\nnBrUc/nhoG7afMq+ndVpQopb1ZajKc4tAczrFwfr7FUF3lFB14OYf38cn3j9\n5+QEYykFyD7E6zsZ0gwbmUWK61ciCT92ccNZB4jcHfQWiFMzdUQ+kHLh7Xid\nRjbcjyaobbMry+sskAgK5SVKhJ8Jq9XL3eUrR8FajTwxLOh7wx8DtBiXRnUf\n+65DbqTVFWJslp/IOg3RMZpzuo1rPc3qlaHeRynkgelsKZ+lhIBHEDTcxMgH\nxyEMwuWpL75CaaxOHzXcPL3j1HOf9w6Z4klQb3ejwTGtHNShkxj/Af2VJEHa\nAFDWmYKgqQHBp3KK+A+IDEX7mKUmoT7nBsbZo2oleTMEAHjc88YuIlQNMZCM\nDOPkj1l3dphfddHFLY3WKjfjssybiaz4sjhvMP3GQKglokcnmdOl1GGH/xWH\n1ibO5Z4xj8PGIyz5TzRtuj9GIw9kZ7yh7S6DO+nB0Co1QpvkXqYAjxEvh1b4\nCZJe\r\n=ZKxK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3080c2dc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3080c2dc_1539922314004_0.37512399816520103","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2f50e954":{"name":"primer-forms","version":"2.2.0-alpha.2f50e954","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2f50e954","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6bbce240694428239025e1be10ac5880c212cea3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2f50e954.tgz","fileCount":12,"integrity":"sha512-EcdXjalI4HafJIn6f9wL7bFaibXT1Dzy9jRDDxgdUVWcPi/GC7NaTAdNEDFcb7DKCOYoNgg+QHgeS+7uOhH2EA==","signatures":[{"sig":"MEQCIAaKSkQvSMmIafSQlzOCYlch3ytQDIFtLH7UMyJP5Vd/AiAjL1KXoArocXkLX7lemDE1gptmG8FaBBl/C1IZp3t7nw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbyh/wCRA9TVsSAnZWagAANbEP/j3+eQGjM1D7X3yP5tLQ\n06oVQL/O44MzV9kDYXg09YkPWOXsWX3Zs8CvsYB7+6Kz60TBzzG7UZPST7ug\nZNQ3KLg8DqgsCR2qchbKYbtx1SGDV6dhAul6hJH19u+t43hQsDcQhQtq2DNT\nK2Qc6RTd8zdOXPp4MPNgMuvxduXqlj0pbrTxhpICPt9HvH2soKxvi4GV6Eow\nPtxdrI6sLRaHIeGSriLvNaitG1jl6xZXU4MnGW8ZgVlA8pAVU84bklNAdVW6\n6W7p8FwDpxls7XyxJgqK9py1VKCtJpM8ziAHFHTSutAgp6/1VTNsVCMIytY0\nsLuBLlflLBen/zUFY1k+2bIUByj9MqKqSA0A6NdGPC8G9Lr8rSvHF+nGFzk8\n17hKGtOhKDGAdV2qZipfYv97o3EERaarENH8qoRlrAxrHMyrjj0ggXBejbdg\nqB1QR4drrwjI0/5JPR8EL00KM8i87enfO7TR+7jjy+ynZ16aZOiwuGMfhWPT\n3ZKYBD4nDiJhE9GwVUWhdzCU6kNgKOkFXgI87u9LoCg7eXb5YZbrCHHoDAYt\nJl5GaG26OB85bk24he4s1xHFpApeksVwTvjh+na/qgOu9VfKhbAs6Gm5oFYA\n/RQnDHiCm3Gr+kOr4JQ8e8oanwTQHLPgef8/vkdBm+cGx6rvpbKKpdQs4oF4\nAa0y\r\n=BBhM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.2f50e954"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2f50e954_1539973103969_0.7400231431015731","host":"s3://npm-registry-packages"}},"2.1.4-rc.9":{"name":"primer-forms","version":"2.1.4-rc.9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b604de419518367476f704f4acf75c90cc355d99","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.9.tgz","fileCount":12,"integrity":"sha512-izPCQvTLHmvOms3P2N117Oe/5Bl6TbST0mZNaCx5Ut2caRJvQweo3JCMTWCcxAk+5vp+y6bVyGKMXI7JBi8bvQ==","signatures":[{"sig":"MEUCIQCmv4zd5jfj3NDTTUsDZqkNDnH5+b8jCnGHCpqep9v+SQIgFz453fCR5jomKFtym55jMy7MmpdKaHuy20aAwSBkuNQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87699,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbykhpCRA9TVsSAnZWagAAb08P/1tJTMdJXbkPjxvNCSWN\nxrwtUnQg3nNVj701pR6i9dbibEpEQau/jxGOFPYOz3dVcj6ir4/l0HYAtgiH\ny1wlu2QTliYokoYNe7ymPdfLsZISaQtaRgs4gZv/iozWCkEUPwY7yJ2yB4z8\n3/4r2wzPARWVU54C7Kl/VUlSEpvb2KxhJpipjkdzWAd/UBqf1rwAnmYvxJ5w\nMJrzmc7loZdrzzrIVntaqV6uHb8UjEMf7vQyURW50apfD5nyM0dRWqJmiEjZ\n7RB7kd2U+tWVi7aK7qa4XHspCGOyIT/reGNZDD+KGmW/plODL+gzPaEO8sQ2\n/h57u7pRih2SLqNmc/Xqbb4jtTqaSxlIiYlZf5vvP+efeJmgmgrPKPBGMqR7\nqFWI1QT2x+XsvD2ofoh3XS7HhlEsrPuxjvJqNEaLvMsKlq2Xi2WHztNGsnAP\nIOeMW28P5lcYkEO+vJ9GVMqHBQOgw2feQy+nTrM+0nMBlWb6tgVlxDtrdFLF\nv/P312PnQLiZus05SHIv0hS9DtpPr4SdSCTmWkS3Fx9p1RZawTTv44CmAJN0\nWLsBe/gyqX1BahiozyN1sWNJvc/NluM6GvLV+rrhfnxSXXFEFllKutdMEpPS\nD8+uYqM08I5Lr1rBLuIt5K+C8R/9WdApL5oGkCmLG3FbhncDTagH1NXoCsmy\nhMwE\r\n=ltE0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.11"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.9_1539983455552_0.22970252372980982","host":"s3://npm-registry-packages"}},"2.1.4-rc.10":{"name":"primer-forms","version":"2.1.4-rc.10","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.10","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61b5f80143994c1a9d8d00b1015c29386f682086","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.10.tgz","fileCount":12,"integrity":"sha512-eKZ97/EOEfCA5WBRyjCyYSN2oL+z4AY3Gft6xoR0QQTjnS2EtGsXbBgUuW5VuNofaCMXyqN02CMWmR1dhwEukQ==","signatures":[{"sig":"MEUCIQDCd7srLYqCOkN/qo98lb6EAJOG6opGm/fU7siNwRsOGAIgdpNo0uWSNluYZskA+y4scjd8caN9yFhoM8Tzf5spOHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzgyoCRA9TVsSAnZWagAAIZUP/Rht1jTOnaDBvua9NyLY\nrHoZ7l/1cmGIIP5xzgBzbLXvJ+JnPsmboR02cMMsNNVKh/e1J2zEMTxt/+m8\n+ATe4ANFQOvUzHhFK2ZC/gSHW6SqiGDkTKdXPhgdFVwP2GSsAowpWhU5GeQS\nzbNMwfE0x3XsxbraJnfbBHbCo4HKai4Zv4OnfDMGjwqwsqYOhMMM6VT9z7LX\n7NZFwW9VvGStnmYP94kLA08eyxxreUXKtp6xW06OCticHqcMnlIEbYi9jT8Q\ngsa/8uojtoZ74muEb7iqkfsnuVZFALui6fuMvLt6XTUhBQselialgcVd3hCo\npa2WicYGc9jWaume1DO6k6Z9GtZBFbYPhKz4GmH+jTNwUmgIFUvF6CyrFnAZ\n6672w2ziChpATwjw+8UzCugJeO0XvILpqyvqS7ZhZhfM0LSk6wy5gwQwizl4\na1jRkNbsWQ04ROiENdb4WAIeoRkRivdoAxJcxsL6TcE7IxI2KIn27UwyGzNd\nRGxm88FANyzmsyRs0fR4aovA1O/1y/FHyrVjGbvtJLgkSWhMbr7AKPXHVBej\nzG2J1svGxnObwDmyI0ak03PfYsfB6tZ7NlydRXWB7Quzp3dHLALCfpjNkmUl\nQcGf63p3jeYAaHioXbAJGLawlKpJU7/30R33l181HjhJz2qvvQ+UsiyxHATr\nh1sz\r\n=yxzZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.10_1540230311238_0.7971728824765305","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3f5d8a65":{"name":"primer-forms","version":"2.2.0-alpha.3f5d8a65","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3f5d8a65","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a3a47ba4590c9003fac62dd7d616275b533faf81","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3f5d8a65.tgz","fileCount":12,"integrity":"sha512-OlFRs3O/rWiQS0UHvQ0UfVsY3vEDfqohXG8NxzJeMywvCHwF3UcEP5aRqzFHn6fpXy7pOmCJ4BSksxTnMpg0Ow==","signatures":[{"sig":"MEQCIGL9/m20ArAAjJhE5BVhCf/svCJ3bGZTyPzeLk32sEV0AiALoAm4h+CVkONipY5NFX2NRaZv22yLR7zW+Eps+stshg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzjFQCRA9TVsSAnZWagAAXgkQAJCrpS+ognLBJl5GYLmV\nZifO9SNg47EJwHpMVLiDwNgK5PYIJLZPBIDGL4ok4ImgQv6ApSToud4RIcAe\nL9V25ywEOfrsVOTpXFvKdIikiwlv1V1G0jAawDdGzp1k5xqlK8+AaukOFtX+\nlS7txopyR+rgy8eXKY3UQ4B+CkdnObb4W9aQzoZw6bHVQxq0rwIXZt8fqiC7\nANbtdeBcrMhlh0SgxmSbwdx3+jwrsZgIOvbpo7WJunQY60v5HywPXE1LwDsB\nQPl7RyMfcYjTnlhxyyzChz9Mw6NJnkBlIirSzqXb0yVlcmsVsQQHRrm/+q4G\ngUR2lHp71MXGTgECMqFdHI8W/rLZCYAguBUcksruKNhI84F5nx6I34UDJONM\nVzqiCuAGkbNtAZQmuYH5zTBTBiNYmbZVA7VQ6SXiBdiZPX2bb3pdo4EdEVte\npVDNBf3vHZ77WbQGcLntrnA2O9QoolE1Aso6UTnTkqFY75gw8dlkMM7vrRbX\n0ccM3d+rBL67kXKFauOXxraWRMir5z/bewKabWd7qXCNvjwpU0rEHxpS6+7u\nIXjqCnW0Fdc0okROn416DNZBszDYI3ICWXFYW/2WAz5BUHm+8JCjEPClFJKC\nijTpQJ2NccqYYOjlM4Ywq7j4LkaBtZKGgM1SWsWiwFu8p+FP0U+uQ7OBZX+M\n/R2i\r\n=Ltzl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3f5d8a65"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3f5d8a65_1540239695624_0.14949436573933528","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ae5b46b8":{"name":"primer-forms","version":"2.2.0-alpha.ae5b46b8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ae5b46b8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3f10fc43cf00e61e931eeb4585b070947b1b311b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ae5b46b8.tgz","fileCount":12,"integrity":"sha512-r67VBguOUIVvuV25uxQDzcQbME4Y70rN1ZDvOGieg94ufXiz6HV2CNMKeFdj6ZfwfcNzaRIuYNM5WX1yVZJXeA==","signatures":[{"sig":"MEYCIQDGewTNcUmoL+4c96Hhccf7zs7sB/HWyD+wOTKaxO4OYwIhAIR/8Mx9MWVXh85M8cnMr3nw0VGGvRwzy7f/Kw5V/BMc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzkrYCRA9TVsSAnZWagAAcosP/jbtxwkxqamTEd8fl8JQ\nYksdcdT3fsbTp1wsxxLtukDCo0OsTNm+1I/UZHLsyjhEjYgKz65jyaazE9EY\nNWKKLtASzc67HpsbVVeYu2zp2RFQJo8UsUAa/99VOsJcRjCX8rve4/9+hZb2\nwFlsfKeQYQSd2v/A0PlJPI6xUq75jW6oPSlpD7WZdP/k9+oj7i6CkHH+j+ai\nIf57q3Ewu+hKo2HcpKV28OnD5cWeGP7Nwhv25LR3EAq9dIuEkpecvdZTk4NC\nYc93P/8i4MBb8X2cbLd+iXrgtpkUSpmfcOOhIDbgVbCCK1pVihqb6r5QKcy9\nUn8A77ljr3qkiUGtAAg3xwQ6Y1ZwrUbQ1eAGzlSvCjk/JbKdeUGg8/gMKwP8\nPLKToUxQsYI0Spt1mrXgkb0W6vS0PkjfsdJnsFmosnGJVD2qHruY01wjzLlP\nx2tv+crvlr3nlyFKE+isVskfLXZnJj1Nupt8lHV4+IQfNxx3J+vqj1K3wMa5\nNPbnb0WRmylp3pTR5/9Kjs8zgc1LaTdUYxsX5i3idxOj8GE9/p4qdaA1OppW\nGtZ1Ahz1qm0qkEnIid/YHUu/x2ymK7MVBUoNJDl/dxv2qpPqLQKXrUPGGNDN\nM+XRfnMqCVU5ARjUMFHIQDupvFOPYtrEuh89f27PTqzwMxMCjjS6JTdQbFon\n8Quc\r\n=0vwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ae5b46b8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ae5b46b8_1540246231766_0.8617969565475045","host":"s3://npm-registry-packages"}},"2.1.4-rc.11":{"name":"primer-forms","version":"2.1.4-rc.11","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.4-rc.11","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0a6b01588f60b8b1b7a9bde354f0c9425875956e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.4-rc.11.tgz","fileCount":12,"integrity":"sha512-kOtVDdW1h2IxCOPreTOh7n7N9PEImGIfeV40dWCQfXa0Hs1q3XVhmCYYBICplAK1B9+kRNCU91hpcaUMT+6D5g==","signatures":[{"sig":"MEYCIQD0k/kjuyY40NeMunGGDlBle0q/yl8vx7dmh8trdULx2wIhAPIsnynUfpLZSCJBNSEEEiSi9NVeqt0sM5B/Rpgcau9j","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87700,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzkwNCRA9TVsSAnZWagAAQDgQAIQNz5ZSrDIc6e4Gk5pf\nsIx38qkmKVZmg5qvaQEAfH8t4ktLu3CwPAc1f/vUHPERoA+mJiEO0IiIcNKx\nQDo6IxzVu4QPVAeQdvBmal7WaFKbrZ2mdYmb/H1tCDfRREBwxWs2T0fAdoFy\nVrQsfDlgiCrVuF1lsDm276D7TSv6NSaSDTS7nRMYBQG+5T3VACLqVOMQt4SU\ntGfhppFRwtvBcv0DZRfGvnVaMLS1Rsm4Ixt17mrZOI9yogn5SZvBxAOD7aYd\nhVOD4jKHdgGm4uSVvynX7lEuAmEgMgS3ZV1ugU/lB5t6XgQCWxjQYTajAM4i\nftP1XC0weUhKNKsg2Kt9HnfWzdOsmCOoS3NWGhMA/nFReEYn+LDrX4peVOMR\ni+vS+hyfS5T7OQOH2Unj87bzFyz+rf4MyQP+quOzCepUL5soMfFkty+2xM1Z\nt9ef8awz2Zn1dMG+tPsllW8g02YMQCJ6IfiGyYLQCSElYpUd6OqTz2j4uBMi\nPBKSt5gPFC1uNZg4q1CTjntdnWL80U6abMk+O878VXyE7i8AlhePKLad5YIn\nKRf9kq2VB1OfeYkPZtefUD5d7zKnyRkANxOWk49Ry0OJs0iC/JmJ2ljTMD0y\nHPYk8AzhpBS8vBaTv0DZRXou3Ej3b5TB3315mfo63maPs064QHTOKmEYS62M\nKuuG\r\n=7EYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.0-rc.13"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.4-rc.11_1540246532800_0.08721762136421152","host":"s3://npm-registry-packages"}},"2.1.5-rc.0":{"name":"primer-forms","version":"2.1.5-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"73991fe59ea489b8027cfa2af99d6ba9076c400e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.0.tgz","fileCount":12,"integrity":"sha512-Sco4jfmBTl7hkpXXh+uF/DiyGelqXMJjs6++feyrxbhZb7qiYlg9MHS5mcsnYXXavAznn0PBaDzwYY5XycGG+A==","signatures":[{"sig":"MEUCIBhCtJ/EZ+r6d1JLj7OAujTEXXn4nDN99B+8C6UnHnaVAiEAzZHoBbRveRwmnpTBxXUx/+XM7W42bYvQqpZ3DkmSLbs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbzl7MCRA9TVsSAnZWagAAazkP/Ru30rmPev2fypW4lJqX\n0M2qPzIUXWvmU45Fy9+PKmJrfGxU5ZyHEYr8hZ51jsPbg/ImMoCu/6fnF7Aq\n5Mg24t8BRGnO3YGePq/0z+RyHfREHv+52XLwr2sRj4gpJ3rLOwkX5n0IVvo6\nvEkD/RChMcsvrALvuXKsaTmdgsmp2Xu3x03dI5Ln9gp5+YidLLfNJo1cNp2g\nNJX8CSLnbdojuPX1bdtorJHPooSSt9JTuhJl3hpMZxMgEeVpHRz9IaN4exm4\nPknCn7awYqwVUJwBs81duO/Xm3xJWCT0jTiMSiXElmlY1wwFTlT1jp/W0DZC\nonw29mD1r9qLJ6HteEvwKTD9vd0m2WBIXiZAwz1Ai4day48R7hR87L8R2iRh\nPyfJAXHk9iFBcdFgJibu9MikZCb4lZmNERQ86fA7PeIYt6GDU/FKplSNX/61\nNNzf6igrpmPeANeQC3zefpXtl94Nya42x6iuidc737ACv3Wzp2tFhboCQoCo\nijG+wzxJHCMPqOm+nnQ5JXzS0Otyxk6MN04+iwnT6VYepYntXpxt70egrrWH\nvwx/RnUUN/ulfzBz1MnwA0huDCUdUODnCHOUfX9uT87QJhmcr/TMU41ShmFx\nXWOE8Xm4tUMt0nX05qr5OayrIgDNyj8G4FCulT1GKfI8KjtKieNTnmKkYVC+\n0IVg\r\n=Y+QI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.0_1540251331181_0.2756481966133273","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d1ea413c":{"name":"primer-forms","version":"2.2.0-alpha.d1ea413c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d1ea413c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bb70c8b8d570cc204e6336a518a8026a4f968721","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d1ea413c.tgz","fileCount":12,"integrity":"sha512-895Er96e409jk28lx+SZNOWQtXQNvwj201ko6uCKoTZE3RV0S5A27NnT9G0pBLHn9zUobKGt+SR8n4/gTYh4Fg==","signatures":[{"sig":"MEYCIQDtA/4h6QmW1u4x1pixnUwo2UzzmpTTm/wTMiLmOJwTGgIhANnf0N/6ks/NixMs9fEaCmoF7blJ65qbNi/Dc4tInQ+c","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz1yxCRA9TVsSAnZWagAA+08P+gIJmoL2peQoJ/3jUIkb\nCinTjLdOIz44Hb0+WLXGDXWtYY5C7q5wHIqXVCKu9O3+ecGhC8f0B7757TqL\nrWPcfapJNoivddvq7peYTNOU7Eeqee3Sma9XN4qRgZyAj1u6ESzOhaOolvoK\nRuKCpzHTWIq3JsVueSkPIOoZlr+5B/+1O4DamzpcNanW6QneGT7v6B7i+buc\nwO8oB0ZHrVTIPVMWUEtr2DkjA/3KBmaj/toMft2WpeFcIV/DV2aF0k00CDcL\nSuO147/RnWUeC+WD0JbRUQg68UIvXtIhXGqwIvtTSVRSZywUPplNS5hwVqqK\nGc72aYGlv0c4BaMZ+ZO6ZFPLr65+3KkiIukbYuQvFSAP8rEkaiU6RCupDMx1\n4jZTWASB8PJADvTPKmlId60VSmsbVAx6r8SIgJPyfGOvHe7tBiIFGKaFieyN\nrN9JgNDqrvx0/upQy1H2Xr9A8eWrYH4nSzBdVAxgOs1xc+45siViY0Wy5x7J\n2nnyHqX6+IYSAqMY+zlUOpbqpiBgv1GMPHCqE2qMq4nl2iSwntVAcPcDvpI3\n/N8KtULIke5pQGUgj4ejm+DSDn2++CKsOahBi8dQxxSdZgFuZEPry8pjs9bD\njafOtlOqGTZ7zVCMuoNmrxa6xU+nNPePRDybe0SzkN0++UZomMgxCUkIawFi\n1J5P\r\n=hBT0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d1ea413c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d1ea413c_1540316336875_0.2102817927541336","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a9f6a8c2":{"name":"primer-forms","version":"2.2.0-alpha.a9f6a8c2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a9f6a8c2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"491967177fa72eefc7464603879d43d6ed665b24","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a9f6a8c2.tgz","fileCount":12,"integrity":"sha512-y14FCz2qcy0DSDiiBc8JLPN4EzfRRpadFdqKnX31n5HLV7H1F963gxkDjDu+4LFGwireUBt+Zf8ajbOArgKWRg==","signatures":[{"sig":"MEUCIQDLqN59qUlmp9E5FHY6/9KhqndXDEYHp1oob8bkG1svGQIgAP8uPvVtR7juMNczqTOSUkMj8YX9g3JtCnIczom4vRc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz2KjCRA9TVsSAnZWagAAFdUP/1hTtwa6qIbzE5yf6gwF\n0M9O8GKjmHehq7zfAfZITL4KuhxVuAbcmHZSaQOCuOJLw6hbW0+bXzrCeMks\noGYf0YxjGKdapkkNr1Eji43Bu5r6RnG0cgrHJwXIMDwsaohmsqzCpmUsWbWD\n4uWsbGlgtQI2xlBLuunepgBfkxuKbUHADkyRJPHN1y3bCQ6WhHGqHI9AO42/\nRFjj/n70RhmjOKsaNcadcyGbWCI4t6JvHtgIhhDD+xeGKQIcd7sTj0WPfz1P\n1UY/88+jAIn4tS5hootLtyAeluoglEmgdnPnelS1a3u3a+SdG8VTjskGvVdw\nwym3AKUfOoV3nM96mATG5/ISHvspbwYPlsAtD1IuWSGB2y8swqlpLLsS2UfD\n5NEnUd6wQJ8C8OIVzQZ9SucCKDsEL6P1nAw92+cDcX8XOd4WlIYh2hVU82Dk\nCRo6vjhKNbE64kHYTK02Wma8eAFmDuc+NATnGNDl0lG5lpMYr+5vwy+42jmT\n1WYeuc8TagaxwZztT8cKjKKSGw4xk0I2EkQr09iTqy3gRlPr2tFdhKpa2CjL\nVBqJe1aOBrlBxoSHwY4NYqpHvzCfXNkszh7gPrxkyerskWbYbcqZOp3ZIamH\naxyxzMpxLNvmTz6APN+z9Lq7BTcpqBLf/9XEiNs0vOnCWg9t8NXjcEVoVa+3\nipWI\r\n=NJLE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.a9f6a8c2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a9f6a8c2_1540317858467_0.5120915913209942","host":"s3://npm-registry-packages"}},"2.1.5":{"name":"primer-forms","version":"2.1.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6aab7acf20fb50274513e321050d2c85cc569f44","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5.tgz","fileCount":12,"integrity":"sha512-fxJjJjRV+f3OsyDt1CgaVhcUTKYMo22L4WrmTdf6R+oMyIBFlnVikArpB0Ln3dDTNGyt4k2TclCIldo+is9CTQ==","signatures":[{"sig":"MEQCIBPpZPjt9Dl/ULHDLhnvMvDVLbk+NdtU8GzTQA1sHeoAAiB0U5nOEmuRhdHBOGwzK9Q1d2CFMLWxpeWYA7oJtFrsUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz37rCRA9TVsSAnZWagAADjgP/3Hw+bUJC1/lPNOebxVh\nbOs3gJLhvyu63hClSY5azalvebSPOAQIFVeiUMldMGghbeJF3DbmGQCjClx2\nqyks7zlCBfnOzv8INtFDC4Dn9ospV2vMY/CjW3edNLL6Ag8uYgP56DLv2a26\npx1UbXHHe0CJ3QLszqH78x+GvXH2WB6W7D11Tl3zYt9qUpOX71av9oR0h3gQ\nwi0mQuYePw3FzxxlaUoied3dpqEpXW1HR7acWz4d5W1TUmo2NQiKVheTIKvH\n1wu9VXiXPvAUbBR4Equsv0s4txHW3ewolLWOiqhVIPrCcmX29xX4DQx/Zt3u\nos/F66TV0MnFccaYbp55u6pdhbwW+v5F67LYVKLBXgC4CynLlvEScNR/GUUN\nJfJIkyusO9CkLMUbQ/iPHzCwZndk6N5QTsuC/sO0Zli5GlvPAoB+E/TderAY\nh0SZNesYhtu4z+0O2VmbLnc7wWfrWKToEE8FbLffV0UjICkzw6yWBs7Nylv/\nZmlmcF7LSRij6VnPlh6dTRYxNPpgdIx/PCHlL8ys64b2jqcyZ7HsWB1P6Uqm\nf3dVW+LXdM8oJaA3XpFKSzttHzb5FvAg3eare5N2i+eFsrg8SCxxKepujNLv\nulmZNkHqyz4Zxtnwqd0NGa/SUd1TFGk7UUdMfSeUW3Jp0rf5kXDjd5xAohFt\nJGqQ\r\n=9AbL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5_1540325098821_0.07360820416656311","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7dd7d142":{"name":"primer-forms","version":"2.2.0-alpha.7dd7d142","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7dd7d142","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"914f9ca722d528dc02eaa66fcb9f912975010085","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7dd7d142.tgz","fileCount":12,"integrity":"sha512-S42rlPlQ9EJex3NTsTzYhPnv+XSb67YC+EjtnEkCRD3LdzLl05JF9divMqje6sS/ozCyxV3Bv88lhwzMqBO8WA==","signatures":[{"sig":"MEYCIQD/NE3gMYiO6CNWzwWZn2qXN85dKUkB1RapJ8D5DQ99FwIhAPtl5y73tvgosFlXLj3+oSjkQjB2ZaLwa3O6dIc32dhL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz4NACRA9TVsSAnZWagAAHngP/354wynQIGsQNMoXnl8o\n1gttqRkJw9EYNlzBMDkikR7WjAsGc9YrI385TkzBUJEpcpgmLA9mqMQ2MQC+\nRP/bR2ZQ1nKud1Dss6tEcemGWQDOfPeRUHjLS8opQYXy7Rwc2TCGT91IAm9E\nr4babs/A/j+g0DxBkFeNyfnhsAUzGkvdFysi9Hs0nZb7iL/kBPKxrkN+zpJV\nj/VnK46LyhKJ0g1QiyhRQh6vwvjsL1zeH2qFUfM3UdigRsiPa4nRAb+KbZvh\nDUZz37ZiVzmZDXeogacARIioqJWxRV5TGo6lDOz3fQ3OCgt1T64+gUM+ATB3\npyJxR0UNDh4yBMNYCjj8eRsbRrkR7umseSZ5PIAyUPuYutPoOrSTrKDoGO/E\nsaTjE8bFO2XJAm94TRrhmd8DCJzGu9lpccJSehW8KHD1qdhxpEI2LwLtm2va\nQMObcq173mpJv5AFQC8t3QlZNbBZ5FewgTjoJm9TbudG1bKRzztUjOtlKwf8\n/5+egg0SBHsqZsBCeK8UcEs18hxr3f93mdx/ORhEc19zTdG9KW5hbB2lC8mu\nNWYp8YR0qL21qhIObQUwd/jwfWaoR/FiO8BLp53nllIV/gpS+IJx15gFxNgO\nwZsN20lUVU6iJttKE9aSOXg17konMbjo/Q/MQ14aeqQ42BHQQuzGAcuNBQ6J\nEsl8\r\n=EeqP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.7dd7d142"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7dd7d142_1540326204598_0.030448041735684273","host":"s3://npm-registry-packages"}},"2.2.0-alpha.77a05b96":{"name":"primer-forms","version":"2.2.0-alpha.77a05b96","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.77a05b96","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"96bc5599bf4eb8d480124009a419c8bea8ac5bac","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.77a05b96.tgz","fileCount":12,"integrity":"sha512-bm/WjHzl2hH/7Yg+MmTVDb3onMV05QZycrAKlnGTgUA+4kAS69Bztgs6ITdnxrBJB0gwdCjG+q9N6WF70mDImw==","signatures":[{"sig":"MEUCIQCWAcZyJ918k/Hlal8o0Qo/qgR8TGvrSma3icr8q+pO+gIgXYY1rabgCR1i6AyZeIglfKQ5+/bO7dce5yxWcpVg2j4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz5AUCRA9TVsSAnZWagAAON8P/23dVqbG2UgNiTG2n9Z2\nkqBHFuzymD0zByIM9k6jQTHPujKH7KvrhAPtMGGcgL4x/Rk7OIdR/QJR3Rg+\nTsUJCqL559lEhSJxqjJd/0q7mS4BVmOWEztgNrNfYTaYJlUlZeb36XBNW3Jc\nUANoaFvIVjzj3osDt29fykt/6cCyzcZoPACYzKGoEHtvau39zBCc9thlHOmo\nQc3U2f+gpRRcpfApJgqpxRwTiZKiYT10+RlyvigTJX1mpMuciMFcWVekWyRx\nNR3aL1Gls7pVWhSaKX1NdpcZF9mPhHT/Gur4wUY9LaJfaysxGDMrByYmx328\nl/MpIjv9D9rUR0S4jwWJcIauHPlq9jXF8EsuRxonOula4oJ3oV1koERUc5SS\nAE4x3hwOnRp1i4n6lmDgiHP3Sh9+m2bTNr+k19gzg9dRJZ0RGXlWXlsJbG2L\nDnEwfVISHIcDT9d8zAwA1umPyCWimZuM3mK+xC3gsxektR3WBXAKfsCtuPej\n6CCdbapsPXFNhA9uX4vRHi5V1PN3+fFZ9Mz7L7Q7pZ7cAOPLL9RGBEiYar1+\n/HrLYEsIcNaqsRX0NnsZKOJFKPzIrypbnNc5doklTi/sfk0BMkkZ8gMbgKPK\neGMR4dGqjfxVqTssgBDqKV2DM30aGcxQ+zlnrKEKkk73s3PI8dXwLKOxJ5s8\noLQw\r\n=jHXC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.77a05b96"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.77a05b96_1540329491774_0.7811260823624411","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1871e8e5":{"name":"primer-forms","version":"2.2.0-alpha.1871e8e5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1871e8e5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f417a86a8fed6b43c62e68ca2ab89d359e452f7c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1871e8e5.tgz","fileCount":12,"integrity":"sha512-GkUVzOU1FYZLT9/dDlRBN4FDFcnXxl+dr5F3y2iP/lFEinX32pog2De0noJ4lAmWVasUGAQ+5we0gGV96NS8Jg==","signatures":[{"sig":"MEUCIQDvd1w0EoibejkQ/e4Q6+AfB25Y7nw6QCdxXfEPVBUAiwIgVoIHYDf+NWbNiEiot2SO17ddp4XVtr81iJwllEiT6SE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbz5PaCRA9TVsSAnZWagAAzRIQAJGD65IkHQLVefhMx3+2\nILtSTt0s0aYrKTLOMNLkNp5TQ0DNKs4M9k2H+NyfxquCqJqFFG8HVe77ocsN\n5L6JmeafoynsJ/rppQyc/pLNIHa5USX00jMMKD3j3StSTDwvx1O+dCdjZO8L\nAEkfPlz5yWc1VW5DVWEZTgZP0f1Oo9vncoXH6rUA57id6B+XOlfQwOFxhAXv\nlzxpJw6Pa0t5ZA25PbBqeONtv/tdpDuG/ByBolKd27pkEb/baBH8ljiR9Im+\ndmtOKZwCWVF/t7O6CyQkGJyJNifbakcpIER1U5d5BmuElbFjZGZKc50ZHOCK\ngcE5Inmt+NDp9L9jNGcceHCSryn7My6h2p82vJWFxiIHx5m0xrzHypzzXLww\nBEMiyrobxt8yC7ky9T+veEMuCRPzreFR/ycK2i1oNuKMpmvjQWDY7gmoZd9h\nx3v84rJQ6Srgpud8LeGJMR0UvhWvozZautDlgJg/8wukAlX9HAXrvMeUuObA\nJE2/J8v/cSUVgCknwbFfXCGl1u97SKreS+AF1LKb8UTbAHUNbKVbdkvjzHpi\nCLeABFcLGH+3MKF/6ipua1YkwjH6G16DfMsCFFj4AXdo1URbaQe+Vn5qGiUH\nMJivDT3E3iI7yW+O2wAtwOu8lRyfRPlFkjDC1rohrN2E6/i0P8jDLWf95iM2\nlcan\r\n=Utmv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1871e8e5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1871e8e5_1540330457634_0.8239469519801041","host":"s3://npm-registry-packages"}},"2.2.0-alpha.44b1636e":{"name":"primer-forms","version":"2.2.0-alpha.44b1636e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.44b1636e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4d5009856e6ebcd7d2ac3275a802e13995f297e5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.44b1636e.tgz","fileCount":12,"integrity":"sha512-B7tMh6UVNVImyXvdCLGYCh/k712itHi0sjerqrlnqyGezLbCvHkDxiwE7BnwvR9Tyaeu1ojPxtC02T1DsffGRQ==","signatures":[{"sig":"MEUCIQDwgefCPRv3OnkCWA8TzrUeS4IOPGt4Wnn0Q8x2j0XkqQIgd3GQp5LGUUaUwFNEqXe1LzJq1g8ZLX9njY8aK8dT17E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0dx+CRA9TVsSAnZWagAAieoP/2iM0xOCKwhrp6ETq/Ix\nL+w+lHejnORyrEm512myJlkciJ0e0JvlHVSRPed8UHdcXI0VTEQu5pI9Br7w\nbYc4MYGwwDVRpeZRyIh1rw0G+RpzbXU16HhSPV5R34+CiGV872iB23Dxi8ok\n6yFiDA0drLaB5pLEFghZPbsJC87n4x0obziXcXIF4yDybFZWY4MQZu9fcsiK\n3GOTTqrod17C70abCihIQUrx8ag4y95/mcSVlL23m280e1dwzMqmQ31P2B0e\n8Xt142VvbUWaB8wveKRhxXCRQGp3ozss877N8yHy3nL4F7ufzDjiCiZp9kL0\nNsyznbBPwSAN/fZ3CLHBDY1mrQZHKzeVnuNL5OVc6/jxqZTcjSJFcX5RjgNU\nusvLcOo7JGEqfOS5IIXxAew8NSJhWBPGpysuRBPNYYkPoX4SqoTUxnK+iHXC\nnzIFDWrEhoAkx0pjJneu6JoVhUJi5NPgnWNGIgtxENeZgUAuhNpQtGl3YvzY\nzDyAq7+pB+lvbv4KJbb2eY9UCKM7DgwrPU6tTjECUig7dFix6h0B+9to5usU\nhk8JVQ8h15rLq48C/WSK1FQV4TFebl+HDqvfzBnBiiCGwjDR43AnVMTzBvmL\nJtRZH5DqgCSWLoyHr86MMnO/m6USMkR8bwzUFjRoFgVUfJ/AD6XrBmtelC3K\n3oUR\r\n=AunC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.44b1636e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.44b1636e_1540480126152_0.6373951484198188","host":"s3://npm-registry-packages"}},"2.2.0-alpha.260b88e3":{"name":"primer-forms","version":"2.2.0-alpha.260b88e3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.260b88e3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"181cdba6c4840713ad04917a9128a9eaa37007d2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.260b88e3.tgz","fileCount":12,"integrity":"sha512-9RcN4MG2jG9MVQ39KvPS+3o8QkFgWiPdLao+VcNWlxVRSXnOq+uJ/1wAIFYBjUXAkz2h4bMO0MGQtsfPi/Mjfw==","signatures":[{"sig":"MEQCIFHZAsV4r5kscnz3kaEkslCbQTsZSzzhwiKuI54iYAIiAiA9j/GabZKZ3XsGlXDrvtexmNttCxNkE3fZrrBqhhiALQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0hzcCRA9TVsSAnZWagAAiqwP/ikWKcMe7cbcG0KxFnyB\n7dSzguy7C7lR0oEb/QOYrivs+X2rmcqCiRQkrB50CEeofIUE/F4OwNMsawMR\nTmowPKi3miYbjVdsfRreZJG3FwBA2OMMNLu6omvl8AvC9U82+6wrTD40Hz+i\nGNxZGByADSx1OP/sPXvO6P0MpvN23qyskb8hZ+Dnfl5U1EllGhIJO2DBpSXM\nf3dMXSZ77XeQv2Jm6wnLSiJ95rdL23kl36WbE+cPIMTq5pbI7FHu2wBXdBna\n2cZBVBLphItAmoLcwP43bA6vY3i3ICky4/meWK1fWVD9CASWnS442JMjjyuO\nj+J+5+WhvNsJ3ANoRCjydW5lmdCOg98jgKP3PiqU2rzqeaJEe/tfefnvaCQJ\nFZBj5EBmsfGPM4UEQO46Cs8b5ilZ6rZx9naLmA3+Wp3kdEiKVOFqvQcXGnlQ\nOACKKKL8QbjdrhzZNMkvy/FMr8Eo4OtXCUUgA0Hz3Sayj2lVprFjQwjSVuso\nVWsncIZyQh6Z7TR0mJIVvoOYZ4Rqxg2DN6zUvDTz69cIng5WPeN2XW/Vue3S\n00hT/v2fsnD9rr67C6EK3tWikXvqtoM5Ut6KOZt0rfb1iLmj1RKE9ohP3f9J\n6IeDITMknzO/rs+4whgOeMmBb8XBGTJ2wc+NLITyQgypTzeXt59xq3XBf2LP\nfthJ\r\n=URTb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.260b88e3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.260b88e3_1540496603090_0.8371223034570565","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d94059f1":{"name":"primer-forms","version":"2.2.0-alpha.d94059f1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d94059f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5a503cba42208f58ff6fdfeccd3b70a4bd024f1d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d94059f1.tgz","fileCount":12,"integrity":"sha512-Ja0HFnk2vDh/EPhuLVmRwaNBw5RSs3mNwAtVPfbGsm7Zvt3Wx7A40LWmumXOosSV6irbE2XRrXBni+LJD9sIkg==","signatures":[{"sig":"MEQCIDiaYHIOXRrYCRsobX8cT3c+XwIKzT/zG+F3eh98QB7XAiBWXGQs8yLAR5WdUa87DEs+BNgKnhaXvbMeyaZZ7zr05Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0ib+CRA9TVsSAnZWagAAxBMP/1Leex3nma0h5gu691Ad\nVRqBRHPV3gk1js21E0dreWCdySFbV3CJJa7dS+cxzKY3bQ9pfcM7ldcu7I1R\nKvFo2QcgeuYFgIZxnvlERnzAr7C+ndHCUFBhcysPWWLBd/zxxjt0IOua4yzz\nyehhTYlq5/BNALI+/HJ+yVCJqt+4HAZGlh0EjBO6rDlCJ80EEk5vrh6ogCRy\nz484hSpzTYeLV+JbLXQwhDnSTQqEuJN+4gNsGtMp5b7hJg/OZRLAzhRdNjEc\nKyL/QasPfymRZ4I6dYTDpys4xFBCK0LXH/ttGSY0+OAK9GcV5hWzPnrC4feZ\nAphVtmlHr9XONpcJSJft2ZUqr2PKOtVxRRLsjyhBBmH/E749cuRz3KXwS/7v\n/eGKAEZiMZ6J7cTM5ioETIawhmBkSam5sdW/V8upZFokFQcmTmHtaTHo1r/t\nRk47hdD2DxCIeu7KJ1e666Qt+UZrwKWsO2dU18CoXmv2dsyYojg3Baw3hiyP\nOf5YT3OpP3X13OBrW6eaHupI9hQrpVy4ilvZbhcCjuD6YgmkaQlmzE2yvo5g\nfocaqSK+lfh31jHZgQIM9iwp+EMF8MhCiM90k73upLm7m9YfAYQ/BkabDfr3\niORnj+TtxXSH26rNImj3YxFmraZ5CVzJnFdU7+4LxLIL0EzniyLptnSQDcPM\nspQ8\r\n=cikG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d94059f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d94059f1_1540499197200_0.4822521555844892","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1d86b11a":{"name":"primer-forms","version":"2.2.0-alpha.1d86b11a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1d86b11a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0eddb033ba77032d5fc22b77173fa9e187f61b8e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1d86b11a.tgz","fileCount":12,"integrity":"sha512-LQy4Xn1zX0Da1Pix60dKie/3m/X8XXa+uVsQ4UFFl+tJCugjbk4sOggIGsqDAal42uEGD3eCht/bjGIZ6r5xSg==","signatures":[{"sig":"MEQCIESdEZLgxO0lyAtwuwpltNm1Ez6UuxYskhpTVk94GihPAiAj+KrF14/Daibyl7rLoDNI+oHm3oQCq9a7dK1kIHbJSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0isECRA9TVsSAnZWagAAIiUP/iZL8Cq7EQfiKUdqk17x\nn1M0nwx88XEXZIVyEOsUV5SE7ONa0u5MwxbQSHjWWNCD4ctZ6Z2x3ecS65GE\nUGT6LPGNgiNmiq/GOHBpkSXjJa7A69MhPDIqkBElHSd3GxRecoXj2C8PAzAx\nW9ZDz/JbTZZmZ2MeeMX6UFcNvYVPpqE08l9TDNAJDd+uNpnJbMtzNVvGyk0/\n2WW2YLSw4V9CoBAjnAxz2lyNdTrP3iAc0YRGFfYEFCSmisaJtYMvFa4DLISr\nBviGMihoeyICbRLQDKd4e+qnEeQxtQZjLpl3UJ+pwPxDpSWA0Q0+/BWtcBhV\n/QNW9il6UPUTQTiBzDDLyfc6SV8D6lHUwt7mViy9kK2dyUQT6grAgLGIpvGj\nWqz1xthTBzdg+uCnLu70LlKlesx10hzRTLuZ7znGhmwrGxrUkEolIoUIbYnA\n0eX5hFOWMlh7XQI2x2MmWYvEoygJ2TYhpv1JkXRcubYAPY6f5paLpeEz/zdc\nRbmydhRxNEhX1Ly3ByDHGVwjyGRa9HI53xDOAuc1htEDVaggUBJ2FCxEeKqA\no/vjj3KWpgiQihuAbKNXF7jXbHThOfiimYWrTj+2fWT2xOhbHHkJEJsRZqjw\nXIosDvZdnJ066NneuJt2Q/61ADhCgUW5zfdLIX1yeIOF72iuefMMP10UvbLq\nm6kU\r\n=+YhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1d86b11a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1d86b11a_1540500228093_0.9293912612546256","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6e8eee0b":{"name":"primer-forms","version":"2.2.0-alpha.6e8eee0b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6e8eee0b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4d4bd75ca0b7ebc63eccc931db09ad32af18cb3f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6e8eee0b.tgz","fileCount":12,"integrity":"sha512-55KMnOLbDZ/KjI0NUHYpDO6KXLx5AFSVXa8wk7W/GzEhD2m7S+IQrDac2uXB//wA9vVpEfHNOj0pmT/g5Zy7Xg==","signatures":[{"sig":"MEYCIQCISnlWpQ4B/hoXOywYZmSEDaYJFFLWU3Di4z6eAHEciwIhAOJuZ7pV7NUUpM8lAlx0gOy5/Mi20yKLt0HGYRECtNp5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0i/LCRA9TVsSAnZWagAAC54P/1EtAnVNOegeVMMHLUkG\n/rmrtvFjDGP5z4ZOa8MscAhS/lYCEd22h4Nla/DirdKaH/ZKk8/zjGu1SNTc\noLTDr2mEUqC0EnZBR17G4mzFUuXGfjVcbfAkRJRwxugLs2RypubOGrKMD4m0\np3vIkk+Q97k5WRnZP+dJ3jfOuelvWDXVibjXwvg3eY9oSe11A9YDzaD6j9JS\nVGs0NdKbJQaIwDd97azlC1KypNv6RaH2trF0yqNHA36Is/as76ISZwaADDJn\nhP6Jq+dhwAmPahXdGWLqB3g4lvOmTknE7J7NXIODzqmdLTVIvG5iSUIAYsO5\nn8cvExGAmStjgLhBM+YLa+mHFvuO9hiYY8N6cH/1ZBCr1rlOsb2+cspaGXN6\nsTb3e1XRuxRu67e5xxyxfWc7ZmkDlc7VXUifWjZzywznVxnveVlC9EAp6/zR\nWcMcpAtQDdVSSb7l06Wkiza814lawsdoEnD2GGb+ymrw9yCt4Wlm2qyMD2ur\ndihafIWgjS1MaEIxb+zzZJRcV9QgXUzTk4ZLcp7/Uf0b5WaJh4fYcEZ5R7Hq\nCMsPSxMEctJD4MLoItracKWWY20j8dxyI2geJPkv1SSMOAJHNUAF5WEpbv1E\neske7L3kLQZBF72v/uSh1UB5jJiV73bhVqMi7rEjZ5eHrZVhFMUXJMvqY2v1\nYHDm\r\n=ywlg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6e8eee0b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6e8eee0b_1540501450925_0.39027604953403383","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f5159d01":{"name":"primer-forms","version":"2.2.0-alpha.f5159d01","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f5159d01","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5a3cc9a5751d428d93e097a07b8f245a1b26ed0a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f5159d01.tgz","fileCount":12,"integrity":"sha512-B0Kbm2MtpA7Rti/WHhTSTBpxjP4UEUedCAYcNOq/worp827nj47b6cEzj+GyA3U7FoESY+JPj3YupdIqd9E32A==","signatures":[{"sig":"MEUCIBoEwMwu9sGk8y+9aY31Mi0YcHPKWRIETafXZ6ZYel8eAiEA4yG4ONKRFZfdqSH71oJQj8cVKGxABTZB6v8IEPvnZzc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0lZNCRA9TVsSAnZWagAAItkP+QHltZ/9JVzPeX1T9k0D\n0clRld12l4AS6rseHBF6vVXEf2V5VJMz1K4IOpdipYP3Fh4tesVSbPhLS8Lz\nD0YpH96K2dvpPuoaFxtbV0MWh/AlQr2tXftzpZYfad8geQhlEFCAy8cDiK57\nxMF2zB8eC/My6nyL5BUMGjrEuU9EAZECQh+n4dSn6nKWUv12WM6q2mcWgr1g\nA8KpwDDXuL9jhdtMiCRUXcV3vtFJH/oDUQmxdFsejpwPk/e8pLASqVn70ehC\n5T5K9ETP402DEQRRqV6h/zn7tmJTmgCIPJEEfjhBTN1MGVPjyD/a1lxWzQli\n2k2doM7TlTlQbr9Umfp4wguAx1zuxQXRKa/VO+E2ulv1y3I1Rx/wyjAyLX/i\nTX378D48ImDwxpGys1arCvLv5WIXyqgjT3oe0vsll1PiNaoy95NhyVI8lFlm\n7wJtwn7JhLK6dIcp56MtMkkwGI84Rm6Cx2xZLAlu3sntXcskvtffrlVAQp1B\nJx1ThYwI9poNcEXh45H1nPpzLjN1SqN9JtEIQYH54CCUtNI53U5/D8+P0II9\nQKFujFq6Ij5G6Vbujn8zguePuJc6YyHJQj4AB+tOnueADp0Bg7p8vrmw1nFm\nOR5ygOpY94pfYZwfguIhq6BdN49jQHhWI+azVuOlyjlLHzpGPaEb6+mBaLM8\ndlBF\r\n=DaJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.f5159d01"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f5159d01_1540511308332_0.26780612826169925","host":"s3://npm-registry-packages"}},"2.2.0-alpha.71d3dd4d":{"name":"primer-forms","version":"2.2.0-alpha.71d3dd4d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.71d3dd4d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"93f1f13f56ab91cfc0f652ff1fc1c61112ba914c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.71d3dd4d.tgz","fileCount":12,"integrity":"sha512-RRNJcH0Uo4r4ESAEptONUqC6/Zu3AdzKLJB5dbWjVQo6Bj6R7zfqsier8abbZ+JmR2an6yTwlrC3EoTi74JaTw==","signatures":[{"sig":"MEUCIEydyQpDjusQUN3g/kKAwuDEjjzaPD/cGDEofijUXupiAiEAjRKZ19FzpoZOg3kXkm2h5mWsUW2+vjzXgNvtVz0/y9g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0n7kCRA9TVsSAnZWagAAQ9AP/j/yw2MGI2M3bRo4S9bv\nplOrMjb4PS/ZZXOoM2kyk4m3t2Gs2KaHiOWuz1esx+EkyiYeiNBN92U0m1Zs\nkDI78ksh6Pkrjlinj91zbEciq6b0Dn7+QL4RP8DrxiX2IPKi8YemY6kA8dwV\nocwvp0xMsBmJm1mUv4lBTHfuwy+uTAhUSXwDS8P+TMvDcn/w7ss73NtUXhIY\nEpz8rDdr47uIPx12L0lT1bZW4FYvH7xxrPjdYsm4rxG6Bw8bbd2cl/hdM60j\n4yFpeAJI/QC00mjwfE0YOpbC/8metjyKJv0YmT4THs4VClTpT5e6Uyt6LrQE\nMdtrn4mNWSkKMPHA/r+kXsQe47EOT+mK2jmAj6UhPfjhV4RnVMSt6+Jd8BPW\nkGBun9cm5BhXplXD+lARowhHQ6d1pFnkmBmeV5MKLySqYlxKMYodRTqsCHPJ\nwOOEUdDCjFDIZVf3lA9stizNSwK1kGUdNMIzxjiByBeSDTf4Tkh0VCvIHNnB\na0z+28kSwUmyNW/2fC7Q9mhoCx77An+XUnserS3Lia2jE1W11enilMydgAQu\nlINwDRWhKHTH+HFBS85WZLKWILQ3otzcPixQPbaIstd4SOjdf7XG/sTwrtGF\nHpVejZQ29jcQtuSzHon8WPtwdbtg/jV8X+HRb1fEr8YpXNQHC43RsKMyMtRh\nm7jN\r\n=QGVl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.71d3dd4d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.71d3dd4d_1540521699865_0.8334359892441932","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8147bf9e":{"name":"primer-forms","version":"2.2.0-alpha.8147bf9e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8147bf9e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4af802d74b9060ddc3b66b601325dc175fc446bf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8147bf9e.tgz","fileCount":12,"integrity":"sha512-a3Klvq0e9BohGKFSUShxFtN/bCMHcGBIDFahniRaNYVbzTULsV4CqCWzacE8NilAebpflD2Z55FyrSGL7fuUaw==","signatures":[{"sig":"MEUCIQCOCuiRt/ywzPkbeO7SdTuvK69lCz/Anfw07dZzYb+OigIgJk7UnPD8qp3Qg7i8ucAiUzgLGjM/9wuTpakuONjEAIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb0oEXCRA9TVsSAnZWagAAomkP/3gjVBW88aFdyI6ixt7h\nYmpVdpGvCIuwtBojO6khmkhISEFTDwpvYHjw8FjpFggGdu4H+Vvklwaz8HjY\nPRurpJG5W6RVti2CT9BM/EPp3VNWHSl9n+KxGbWQPvCw/hjSKfQS/x+tiOr3\nT5XioQO6ru+gzCI3FMfnpwi+yu7g5tE4S+4418EyUOv0tDi2dZEfyeCKSgmD\nX1N9GjMsLB49iWeWpkqLuTC5AMBGsCg9/i4NWkY5WHBY/m3igGTCT/6BuT12\nkFQhkVutxPerK0e6Ogos49/gEj9fhF9dn/N+/82z5dRCtIvJyCgm9P1ZgbG4\nTsvMOZfbmMMxGnivZsbz2kDlFLupMZ5CE+rfO184YpNg0opI8mpUz4rta7Zt\n2wJS0Oer4V0EMryi4shBirmhrBjY7KhKg041a5yL480S3VvRrkO10N2aJUWU\nlGVRjFa0pysPTYyGq5QziFXifOIlZLIwLUN8oxvAa7F8vzPHzpudQzy4mNUB\nXzMsZqDZVdyIQOK1dTU+MPgr/AbpeNbnpw7P37lBfb4TqZAICY5sEcTwsX1q\nb6ZmMRzOJykPynMbOcGmvikrVbjbuWK5bFotGuMm1fGiQvEBaCBfVCE1/u1R\nv2Jw5ohTX7AYOrOK8U4tQtKokvPdWK3RK16P3vod+RAqIza1z2JUUjPqiAWX\n+LfQ\r\n=SVVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.8147bf9e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8147bf9e_1540522262933_0.05036935420489885","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ade07006":{"name":"primer-forms","version":"2.2.0-alpha.ade07006","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ade07006","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1b27c6371cd71834544df90018f82ea52e03a006","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ade07006.tgz","fileCount":12,"integrity":"sha512-Fx03MuRyWAzomD5ojXYw6V2QW+mcfMfD448SLhe8FpLu3+IVfXCIpWytTuzJ3xdkmcgS7LB8B+zvgV/W2/jg8w==","signatures":[{"sig":"MEYCIQDk9+SB9u8mV61wRTeqwdV24A0jq0p8UzZkpuwGABB24AIhALaTWuwUWqnLsK91gVhSS2hWloJwCJy11UvVRq5LGCCg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12PHCRA9TVsSAnZWagAAvKQP/1BW82M/P41DXM6E/svG\nwte4WVhUBYub8Qt/OHsG7TBjvZzKrpXMWCsgUtoYscRKL1mAN91U+AdHwPKI\nrPVlNrk+4PGMqscdrq+B9jBu3rOdTATAZ7OCTEO8goIMomPWmiyBTNI/73+O\nRzbGn91CqbBXgCWyYrkmjDWmYXZzEXw4iFoXaYrZXcATYx+0w4kIp20Gj6TU\nxM80A8N1ZH2XnaorOMav/Fd7k804wh2L3AFw1VJeevcmAw51m/Q6/nOLqODP\niG5dCzMmBE7DP0Hus5taIUANKlozZ7NCqC4tOoYw+c7xezrAcuyHIhtfNA/Q\nO0A9A6eS8WbEPdgI30r32JmhHb8uDvVmjX8UHenl8Llt8NGIb/ssKuy0y2kK\nT6RfU//H9H984ys0WJVErLgNV1xRd6PUbNKJDT2CHLwWoXAM9hZL1w3tNjgt\nWYYjTJp+fJO0O0gMgVGtY3gfyNlfsIf7b4eLbFy4JtSCKolHlRQsFhTZWOLf\nJeOzKBL5znvVipoQNAiegQf13XdEM/8XDawP1yLji1EE+GMqMcveOfyCFDIb\nCapm6nAmHIibSo85NmMwIOE5s6DIzNkB0hTxedadrLSLbiZ1nR71jG7LHHd1\npcM7AuCxr2qtxV+QkskAOVKI9F+phEQIM5UaT3ioUV2LW9Oir6OANOc3GvoG\naS8h\r\n=1y5b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ade07006"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ade07006_1540842438243_0.263658302852801","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6e00d1f1":{"name":"primer-forms","version":"2.2.0-alpha.6e00d1f1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6e00d1f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"11471eb980b342c81bcb84500ba6faf09bba43ad","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6e00d1f1.tgz","fileCount":12,"integrity":"sha512-nYq1XfN4DKQkm1b+jXHeJhlxWnVubVTWwEtcyRXIyDopdvUl9CB3cSMUIJPFU1Hztao+pr51GleRL9peZI+DPg==","signatures":[{"sig":"MEYCIQCwUuWyUOOxc6T/Jj74gjVyRiuonQWdHH80V3SUCQNW/AIhANkQ3XhNu0MgjUnyciE62qhTh8GjgRVk3PchFPrMjvBx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4SNtCRA9TVsSAnZWagAA6dIQAIMSYm+ask2b6MZ3G0DC\nyBExkrBUTZ9xbQeq6cNzhEaTdG2Jcv4b5xWrWGxcgqNePYtMv/+k6RNjnYK4\nHiwrNWBnUZtPDvDKUnhc0iTE629J33FrxEMIbv2MNMbqkUBO6iOjerQF1PD8\nkPEQ8/uh8+natEx+Tj/fhaJrfKLNt+a3qwOVMtMxdWAW72dn7nGsxeRmrONl\n9UyJILcbrhEDaC60EUc65L1ip8ECCeu2kNn5/H8N1tD/TOHY2c49m8AZFStB\n6QisUwOLPTpzV5n67z+dBPZsQc/6h96dffmU+ywuKZ7O03Y56wlF5DghYzqa\nlPANsxiEL6vbUoIJzVAtXcMnu1kk+qn9vL19BhUNqzepPdSnhDKWt26P22hW\n80kHnSKjBoFPaCXEG+CjoAtmk8ds5OIhacuVcrUNfEg9wBDLdE1gHqnfwyll\nQmUP3I2xRgEyNLob4mL/6N/kjasiD086bTwO3vGws9ySdcCSRU17DJkD4Rfd\ntSXLd2xybjlXvMLAWtBukiUKIDgwzpF5ME8vUj85qJ3ulK1BvB01X8tLcaAq\nQY4OyKHSIemZ1MUMKP/bkl/dUSXWDZJqGF2DhIqNbqw1+OSnYAAhCzQMLd/P\nQTNzkfjGdx9ExhpdKVfJrWGPTbwzqKsITMiFIhAmAb6dGRvUO0l17636Wwcx\njIIB\r\n=X+z9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6e00d1f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6e00d1f1_1541481324387_0.8199422907289862","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a81416ae":{"name":"primer-forms","version":"2.2.0-alpha.a81416ae","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a81416ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0bb3ae56fceee2927c6b51eb54b8674da2930302","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a81416ae.tgz","fileCount":12,"integrity":"sha512-CHtyE38p5TnxauiCKeRy/ztqgiZNbshRrBO+ezCEWW0BP2MOlHZiMwuWCimpeolVc9mB+sI8x2KE8SYYuhto6w==","signatures":[{"sig":"MEUCIQDPPMBqRbcv5bBA8+045w5OoUmxbxImJy4wK5Wi//LfGgIgY8FYjPaYLbj6Xolhyv9Q5QC+S0mkfXrAePK1Naavq/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4SXYCRA9TVsSAnZWagAA880P/1lpPKmIvHkDFaq2KsrC\ng3tfV8d9lFIpNwNxcLYr2hzfj5EajRktbjhswNTE4KEY7fxo5v93i8OgYv/s\nBEJR6fuwHTa4Zta+pwATIuNZEcW4KAEmFaxEYM7yoTvAE8G+f7t3m+/8kDT7\nsKd2ckxNh7k/DW+w2HNsolGQdhMydX3vZuT1v8vPG3wj8u3ViOGqt+mxwhX7\nxMIL5JwFtv0X7a3ck81DOtuRTy1kEart3BoaNbkIxoeq5SuWNN6AosVCGqxt\n4WDt0ci+8roBtiLh46SfLyT8013KnH8JEZXJFwMsWQdP8dMwLxsha6QKkuVJ\nmUn/DT2ji0hfsovEeOulLNr2eTwqm1lvuEPRv9Pbt66V9u37lxJCTsd3aB/e\nHNEz6unlaO3KMNXeo4fwSlxQyjiPOeVcceDEDMIXoXvA0WMyQneCmNlej16+\nqqencvS1bq9VRJI9kpJ6NPD5RJIQjlTBFvTWQo9+GQ6DnsyoDorgtvJN/3dF\nJwMZPoRsQNKJB6MMdPAt9fPLg4zmIc037xa4m03YkWUbJ0aEUr1zsfKZUBy6\ny7GGQlkvMTabE0UfOEoi4NcEYelSZZsiqbkYKtycPI8IvOtUF3z8EnE7ikO7\nvmAHW9VoqLicuq2TSMcSIbM79XNC2oLSrLCwl72eICmEQmPv0JSthRp66OJd\nA4Of\r\n=CXNa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.a81416ae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a81416ae_1541481943739_0.4765135451558","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3487d68e":{"name":"primer-forms","version":"2.2.0-alpha.3487d68e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3487d68e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4afe24bfbd60bcadbfcc2d940e29824764b16841","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3487d68e.tgz","fileCount":12,"integrity":"sha512-KGY/PmMBvp39lo9pCgu+ERyDBvNyujVkInJaknAvb7GWY+oLMJg6B0pg2D2MiGPWeRc5/tzlEFaTB/z2z4L7iA==","signatures":[{"sig":"MEUCIFX2EbSm0cdhO6VsP3oEgjQl123X7i3pwnCgamvs7VG6AiEAwb3DBKYciqAPrQ26JaONHRZOn8a/ZtvBh9Dc8+jBe4Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4TvRCRA9TVsSAnZWagAACt0P/2I/V5pJWGi39o3vydwR\nvjZx/mS49rxa/GeowCx40kTPlOKgjrJm673nTslWmNw/8GzsPYdaZMgeLBAa\nJEOnCWPPd9VeVSpnm4Os+XJmCaRuiwnKddzavEWxtgLLP4mwWuE3Umd3YGXf\n7imkuBws1ocf+uyxXTDSEISko8bQADTnkhx96z/6eBe8K7R242msZhbbSM5k\n2VZuy4KJWD/ZKNNf0AkzqSBhMo68wCHVkKt72+s6DIq/VN4rjp1vQUbtyHQO\nFkIOfaoArzIO9jAs5wxMWc19n1tcR3YOBPFMl7vvs/OyVQwqVOTWBC3AEUFE\nBb/hdBLm/HpoLEikEUsffzsgWK/aLc3wz5IncCq7Kck3c/vw0WfUOULhEqNm\nSDroJ4pKZ0yoqNRmf+1I7PZUchlrxsktYrJGPHwirPxVE7v72CSJFE8zBB5+\nPlAu6qc2QllgKANmG84qmyS/G0pyFQP2mxMnwILCzOeucZIxu/G/Ggt2QYlD\nBb46QqR6Gd2MuxvWJeOkOPFxOrngk8RZ2q9VQglZcdGUirqzgDUE8X4CgEpv\nJwW3hT6gCfJpPJ6PSawwxBeUGZBgNvy5ypfBsxjS3nmTeGx4XYol0pcKJvnb\nmmVOiw35EGbY/pGQQTEQoh5p26gdpYBWNBiX63L0HX7v09Ql0m6BlSgqH4FX\n7z4h\r\n=/Q7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.3487d68e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3487d68e_1541487568989_0.9966369415797152","host":"s3://npm-registry-packages"}},"2.2.0-alpha.deb27cb4":{"name":"primer-forms","version":"2.2.0-alpha.deb27cb4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.deb27cb4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"03c01d1ab88bcc7357d3f2d203642e39074aba2f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.deb27cb4.tgz","fileCount":12,"integrity":"sha512-nmjCzKXQHMZNqQZHNMyTszOmve4bA4ltBSPCa+b/DambV8Loc9IspFuaaAyd1ZaW9gGeWFXEumz5fjh7IOnmMg==","signatures":[{"sig":"MEYCIQC1ZtpgePkA/Q8LBEBIs8kpe99qQhOubxM420QKMEXdbAIhALOHPHtd5olna+cS+Gbdw9t7uME5z50Grr88AyE8MwEz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4T4LCRA9TVsSAnZWagAAZYQP/2KGPiCjQ0xKiQpDA5RB\nuZMcZcGv8ViV7XCdT8u5OX9BUDjsgWYrPhIP+vMz3MvEbwnI9ii1A9c49yp7\nx8J8nG7NNBT1pmff+jBGSa2k9X/lUSbICJeaQAbwgeWcPiuv8vqHCvJdLu7G\n8uXofc508ZJrg/X2w8szyDLqhH8B0/SMxcGPXkSPvK0jWQAKWY5BK6h9mcia\nk+U8LLVFVZljy4WXyX9zL5KNsUX3VkWmimQ+PkhiSAP9k/1HunEjaIAhdqOB\npdvR04YW2V8U/wmUGwj6a69BEj5k4F7y+O5DBU+ZXXbAjmf5BvO1yVFTuQsA\nA8aauC658aP5mmtoW2XcDlKAbPQe0iAv3nbVdt54JnFbpXQKfdIyfwBCWggW\nhpesSqeuXgeCqEhcdsQ6F2+OJgEbe2Dr4H10PP6yr+gSYw65EULaNf2ULLP7\n8hiRxMjKctXoD7kGzt+ZnZf64Tsxyskq8CoihlAw/PrgKV9ixDXOHwkZTIU/\nKauD0NDKgIUGuGcnD3ggI40w6CAjBub9jXnCyTc1l8F7m+P3wjgcQcNvKlLp\nai34z38Q/fjgDTFuC0aqR/+P9gok1jhJRb/U9S6cDAeQbcgtW64veD43K5+w\nZm7gwu12YDuHnmZ2jS9PYnKkMT8V8yn1rHq7A6O9ivmwauHDWQ2C7yXzc16G\nVN4k\r\n=87I9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.deb27cb4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.deb27cb4_1541488138568_0.4440862246219546","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c3a1ee2b":{"name":"primer-forms","version":"2.2.0-alpha.c3a1ee2b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c3a1ee2b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f753c8d0933a6ede8800dd6288ddca53f603907a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c3a1ee2b.tgz","fileCount":12,"integrity":"sha512-r4kcOnZBrqt+YgJmD/EcFMIoa+S749oRB8qwRzQNB5T0b9GUqcER1eAaVnvxLl2fH6chJFKTdCUS/dFiFPZu/Q==","signatures":[{"sig":"MEUCIQC4mOGomMcN/cYMQp2ytROwwh7Lvf9xzlfdEazwESbQYwIgbz/KxB8Wt4ULPvuByhLtVAtQ4wF4y8zixOpHqjC99Jg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4T5YCRA9TVsSAnZWagAACKQP/Raa3IwfS9tFXw33OhPf\n8T8SmbGr7fEFyAzzd5f6jac7GOpmN7RWayFTLzI+RU6StuUqxfEWOo0NsyxI\nGnlixc3j/urtyAfthgdY5/lDXiv0pYc/ouvH2Fa7kD5F9la/bMyS1R0TH8zW\ngTXz60LqEJfgrTQo9AQSKnC1CU5SYdHXzZfIjPSJVtWej+GN+XB+qmyx1Jk5\nb+lYxggdvlKd42IHr68NqcRj5+7KZdMddkvuUmktq1SDr7NNmQ9THx7gmGJV\n5eRK4d8hEcxIxmVIEP6pOL++BJjudLjFqwK9ouF4WhUr8wQZIQ6sWCMFSHD2\nWwq3B+5kY/hweOZDv+2GwrXkY9OXevq19WfxkeFF5zr2tLZHiVKQxaAOvAzC\nCVCoNhJ6lPhVw5e95iNDaQ5GlRyznUH7JuuA4qCSP5VgzeUu3XiB/vCBtE5a\npaBYltxez8D8YGeCFXNBEpALXT6tVdrytdQlWltAN0ttpAEwZttgaKzz8A2U\nTB5XtAes5UVCzmsb+B0AmEx4jxj6/JfFgDyLHOsTMso5wePYyxSfvDc1/jWM\nZYAhPCOOJvpocLx6E2ohlyzIjwnCY5FphwkR6S1lAxXMfww4hMhpdWKNuQa5\n/vlM4jnziBvp2v9n0BKtDZl5gXWrSZ/qvJf5GgwQBkZCeIrOzIC89+fKDohW\n5Kb8\r\n=Ozue\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c3a1ee2b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c3a1ee2b_1541488215717_0.1629796123440972","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6ac5deb8":{"name":"primer-forms","version":"2.2.0-alpha.6ac5deb8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6ac5deb8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f1d8d8b5815c61a0d3db9519dffc197e713b29b2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6ac5deb8.tgz","fileCount":12,"integrity":"sha512-AV00NZIBHAulNDd3RaHMRunezwNuFKUVnyZTtAWvULauB3Ow2vjFCiMQ0qzZFDy8YhxtgeB+ZfO7whdWC6jD5g==","signatures":[{"sig":"MEUCIEZsaxYX4zecqT5M6HkHiylcuQ2FiRoF2jeFgHg7VHLCAiEAxGNbkrfq29RiFkFgjjJmMkGnyhR+rnxwgtb6tOb0tWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb4U4BCRA9TVsSAnZWagAAFqYP/3f2ixjteTC2JU7yVyRQ\nQOGIK1N7LYOlmt0sdsRu5F1gr4JlBqrvs2FGtXAOBmqvV5X45J9TcmGLqd6X\n8vAw5EG9Sd9tbZ3e9OjprvKbcwUxvfUQC9NIFHmhiJYHJyyHw0eU6zJSGnGL\n+CyICWLjhRGCm76ldpcUpmVMyrRJWQHfJ3UPJvhTlEktiSAFQnTBbKl5fTpj\nxdwKw6x6qYKq/VmIY0JQZXrmc4RkjGBy7rb160cQxrL4zlDa1/wg4R42KUxN\nZ0utbBR0zawDWLyTmDo3EzqaLHtN6VDat+WM8pwlKvZbMHuBYtKhG/CnAwSA\no44dZT73uT53xzq80UcVJbO2VU9c1FRxXXVhYjIq5SzQFb4CxXHk+aCaJ5za\nPLNevOAqtPGdRGnR+NAJlPcTHMcFWhxyFWht91gmJoOz1z+nPaySEY2+DiNf\nHzOeX/hsW8Aw/nthcjFKVCBqtfaCABuri78grGB+Ec5+oIbWVQhJxdUfjwVc\n7MGya7/eR7EixHvxtsvm4h9QQL1FCRb+hazJmR+9ejiWu3LPQ0Rh4Ib4iC+R\n5sVNxneh96/9L3oM6BW3bGgexXRsFWjQer/dDkTEJwvhz0XGZxvVnhQIvkIz\nPfmc8KgH1RQVtGiuV6p0MkG8MfUHMtt/DdSrA9/+c3uMyJxVuKz5Wbw/Jj1a\nieNf\r\n=xlhQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.6ac5deb8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6ac5deb8_1541492224278_0.1685725083383509","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c12761d7":{"name":"primer-forms","version":"2.2.0-alpha.c12761d7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c12761d7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ede49c77b17e73b69f30dba8249dfc44a23fbfbc","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c12761d7.tgz","fileCount":12,"integrity":"sha512-aXLf591DoyOYljQd3R55z80O01EF5aNMNS9Y5V4Wp+sBPD6tJPEo5Ux//L4RLFoPhGILslYJJIgn1Bw7oo51lw==","signatures":[{"sig":"MEUCIQCSmxLfcS5yVvPtWIJrntTFH7tqMYKAk1A2zh+HS5sZ8wIgYVqGAjoHBkWSuPg4Ud/McGNB8tfyTKm9yGtcWvD9qpM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb42arCRA9TVsSAnZWagAAFcoP/3gEnZdADJxp/LvLUrjF\nWXGaDSmv2ioINoLNb6HYnUWUQBpNMwO6cFwx+S1IIYD3IHUX2m/BBRwA8h7T\nAp3it7CDXfXPbDQLjkH2SlSHGQ9VGJrcgjL4YZgm1poPPNcIm0dyOaSs4WL0\ngZ+XjiNInO0aGDQ27MRrrSIKp4ctAWlZOADVm/c1qa30mx8RXsgk0vDNXveD\n4UpGP2pa0DgejWfEMy2wLiyGPXuqRAwk9Uz2ZFlbmvTfVe03SdYx+6b6Hxu+\nlTSb4cdtBuNOArI7bQOmAKQjh52zmbSScMWqXD04HVeOV1wWDjU1EYCkSAhj\ng7Zmi517XdJcTPTwSfdli2Qvg7+HdjFIX8HWxndFcoAh7RqkkErMcmDIGuSk\n0YyW02FGYK5XCRN2w/0y569JyLvRgXObxwTLJybWG0bCFUBqqzhzV4829aSp\nQf2LS2nfCVCSSh0zVd3+bTFto1TP9uAoGUcnptrPUBTzXC8VY5T7kD0BKE5W\nuX9lXOTDBNAVGgvR69e2G0zSXfeVGHXyPVxxb7cIrkMwVWcEkHU+iDzfjELF\nRYWhVfBw0V+flAVPLIMz53nlJJGaUN9cKw0Nc/V+MgO7u/BkGMYKJTZQoySB\neoU/i9P/Hw1HY0AXJYjCI0U4+0+GlQWXsM/1cCAScZylG0BWmTqA/1L8eJJC\ngZxu\r\n=bjKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c12761d7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c12761d7_1541629611121_0.10443181605354557","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4a75e7bd":{"name":"primer-forms","version":"2.2.0-alpha.4a75e7bd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4a75e7bd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"64afbab847fe2552d27a2c33351fb717b860e64c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4a75e7bd.tgz","fileCount":12,"integrity":"sha512-0q95B2jnuy4Wkex1ybc1u+PgNDRbZao1xLM6abD2WjLjB1dQNteVwQGV6IrrstZ1jWRFQx9JbWc2o/HOpXssmQ==","signatures":[{"sig":"MEQCIA1j0LaOTHIeCbyl14CDlftaNfHdD+k6q4KW1Aus9VPIAiBZiQUcIsORUgTrPW2CYuoGLNwWNlxZFywobSSVRM1trg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ISSCRA9TVsSAnZWagAAQh0P/1H8B9zt6j9AZXox4cOV\nkUIYR48REFUdz/eeYMIzJ8IXaMS9a0RDmnqcM3hURGkzXoLLuhM8rGPxYJEx\nnYiuVmCQGMlNJQAui6Ijtv5Pl93Wyvt8MbuSfKNKY3mHm/PagfwtcZpkrp8o\nIJTLR0dXYn5wiKyvI8gjD3Cu4C8kMwe10x7hw+JYZcOnscOgASrmT2tgsG/2\nwkaNalFy0JdHNSzXdKMcCLijvQqhrtGx/TeaLblIRFVWUMIQRxQBuYyIzh/d\ng4MQKPPQDrMv+W9/1cqncKdUJMspXXwwIAlWh6/EBCtrCCY/UrmvjjwKlXr2\nV8JJIudHxEHqWNuLpaFVolcifFr/G7gxGlZunCA57rDq3CapabvNiSXVa8/6\nJTfWm1dL1Imdbz5F3YUYXJU1b54bCwxl+2V7OTEymNw/0pbbnZD8jW0EpO7M\n6t9NzjJsssQp781ekREGDBnvp5YLCrnnD1wWOGSf0N6ifPcfjBSYVdg56uX3\n6xzKqH93m/KYrXvVlnF8d0Jnlat92wWuz96W2nQ6pg8v+RAhC024G7b3yLYZ\n/swfN19osOsvbnxnVW+DhLZR5UF2ChtSc2rfMXdbBWZ1WuxPG/2iUWsyz28V\nL5I2Gzd4t8elfhIyVw/UkeN/b01NQ2LhNtCEw/YpVcEAp6s+rHq8RCN+/Y9o\n9WUg\r\n=cr5+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.4a75e7bd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4a75e7bd_1541702801812_0.157955260658031","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d76fd883":{"name":"primer-forms","version":"2.2.0-alpha.d76fd883","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d76fd883","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a3b9cb4f766a7ea99b01684c60088f2cfebb72a9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d76fd883.tgz","fileCount":12,"integrity":"sha512-/OXMP7FHOEXAGKJmIH0jNxayxgxe1QhEqqUJ7sS0tb6Cvj1w9Nl+Bmq9FyrQRWbJmVV4LTMMszRtR45BZRXK4A==","signatures":[{"sig":"MEQCH2bOgidF1deYb6eAtTMne5T/6FUk/+VErBEABMEfuusCIQDht7eAJx+AeNql40cH6ddoj4+86jmK6aFKm+0r/mKLgQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5ImdCRA9TVsSAnZWagAA2G0QAKQgM442qlwwSEJGZzit\n49837Pe/zc2lQJVo/1w0m5+ncJvdfAgGtT+4G1TFy3WniEC1Bx/Ek0jgYq9p\nRWKIrIw1RsMZ4JZVnwbzbX7kBBewislDm0K8ybCs+cMIAENHf9RKeg97dHF7\n8AAkU8O1YOTGcf7S3+YafoaWYKRvU5Hz/0VGrfhY+7lGEFKtIFjEDvEhzoq1\nUwgXFGRYOWz3tHKjxj2iaEDH6Ro2gqY3oi1dLllHYdkcVyzeYbeotaSu+8UC\n+6yKjJ9vb+InekBA653nKgiVA75zsycy0X5INQlQ8Bj7lZ6BrBOIiPffjvYa\nU29tWgN3Z/Tqxc54/cltMDiEe08GNiDaEGlLjUxCYP0bDiuBUZjdhBOsXYuk\nsENt0MyWBO4LQWn8xlS7b2LsgyKw0t+Z/xujsXcLVeaePEPRXufVvWYkUuPo\n7I4xHC7SwaaaCZfnEI+Aq9/btOpmnj1q0HkPfAWU8Lsz27YfCf+t9xeBZJum\ngrb7JT6uQ2aUzdbuY3wFMMitLhYwA5/wIEurphrZTVqhWHnw8cl8MV7UqaAv\nr3DW+Nyc5pG1poQR/KIL0xewXB+XLvN81/ANczFJOJewGdJibsAP2t9QR7Vj\nye8zPkXnwZKaG/Au0DNc8CL6Sr0Q03bqRmvdQpQlJT9s6R1oO66SOxrfHcep\n4U1g\r\n=Rimn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d76fd883"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d76fd883_1541704093221_0.8654201107778794","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c2903f93":{"name":"primer-forms","version":"2.2.0-alpha.c2903f93","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c2903f93","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4c64958d8d226f29f0f0b2f1dff8395a90f41827","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c2903f93.tgz","fileCount":12,"integrity":"sha512-7tmWudZoGNJP63Od+gRJo+XgaEjK5UdI0Yc6AMf7sJb1bFMsmAZvP6+NjKXE/VtiXT+5talaEiVKxVbWr7QZ6A==","signatures":[{"sig":"MEQCIGOlTD9IwE4IW8Af2ZWYfh+newcWgUfGdGH0wXBaX4q5AiB6h54i64016XdGOn3ziyYVMdglZCb9V1LMlasO3IGIIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5M6VCRA9TVsSAnZWagAAS+AP/0qpBRDVLXCkNKZNgSr5\n1ZOKELBRvRFhxfCd2aBQbfAEDaqc8jN39kQRPOLKyHMH6ABdpD2wHVNh+xSW\nYUjOqyc8I+U4bMYGl5qyEhZDIRrVOTnQ6ykaJ4zWnPtMZtd9Lx3nwISJ8gyM\nKA2TQQ8Y89oMKN9HDv4KZWERm4nR2OHixeR0UNITl6OEc1JXFRoToCAfFWAB\nTiGLfW7aQiGJVgoPcyxkdmuVs+FsEi63qSkrcsVvHLjij1ei30zn4/UkqpZf\ngbWYYKe6LQ+buex7u29oNN6OTnLKncrdTIk3qmas0W48XzScY5EYJd4QqseU\ntTyo1CJQKeXoJl3+SJEMzS/f4+WrZILjGtXgcNspUZlBAOpydDAiLjb6zAPk\nnlDkQfpYZtC2IKGuD0npeUSruLiuLRpu6dyWDIYPkUqBTFSyoZFOEqK3e71j\nqEne2Rkkg8Crn3NPVGbfijPeC+JEsB+qYzvoJCybgFr9ulS0i2i7k6Qm/KEE\nuvRnHjQmEe2rAoFmL0f5X4UxuZ8vAu8Fs0aKBVoLZroQGUfD2tcBIM3kjZWe\n3QJOzwMBE/S0OBBOSdZjY0mCbsRHTiaYW9ArShWAA/ToEXOGc8f30f1ZT2Ci\nqNOlvatPwGsmOZzs3DJfg/spicH7SvKDnjbH88eQ2hE/8Z+a7b3YwjB9t/hs\ndzng\r\n=+YBj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c2903f93"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c2903f93_1541721748668_0.024508767666899134","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0fa93277":{"name":"primer-forms","version":"2.2.0-alpha.0fa93277","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0fa93277","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"41819a05a494b3164ddfdb96516cd868fbfbff57","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0fa93277.tgz","fileCount":12,"integrity":"sha512-FSXcZqJe4zwKvkJfNLlqPK8JW9tBBrCyTD68paa8u1cXEk3CAIxRvmYpc0pqpopEDGZfXgcu07QaZI4Z7E47xw==","signatures":[{"sig":"MEUCIQDAbcvKXRfmyJ/mV1DGStuc4yM9kP7xDKrtrxPeJLb7lwIgO6a0B51YwPp7HOZS6bAvsUzkzr//pP92FIvzt76bsLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5c0ECRA9TVsSAnZWagAAVsYP/jLnL09G30tKBS5KQ+FS\nPRELQc9ZxsPLhJQg2oNL/OIJeZvMxkzsl4ycgmDJDbBLKAxTZ31fw+wPGGK7\nbq13ZQva7OHLfOD1fkxmhQ0g+ljV95Vvc2P6Dh4wNrvj015It+i9h7VEFnyE\n5wYprjqTPTqukWNf64+mAcoq27s4V2QUHeiR3RMnAwcqNYXGOZW67CuNWCkq\nAFG0L//LUYjRPINjQj1LjmmbtHBA2VnRlPb/XB/t/qdUsGPVCRj6Wd6ugGQ6\n0NF4UZpqqIEZPlzSpLMgV5fjYy5W3c3eIcRqdBluWpqtZGsTXXJlmRlzL3+Q\nEIimCLHFDrrfyKXIWplhinvjwnSXhZptthNihvpKOxJsGoB6SliKBXbBFpQH\nFXx7zk88sprlWdUBDlRu4pfPyudURD1RTf5ibRHFus9ZkjnNH9Y8/edDM4s/\ngOuMTNp4Ki/OnoMRrifVFGJS4e7tFLongpRM+b2CMLflBPFP7j+7vWTsa3lL\n/3hX1Fqsq4y42pZ0NsXUeGNHGub8f+7b0x0t2b1OFsIOyrwNI/8xZ5Cd2XpQ\nwEIKSfjsStl8QoG3ikhAV3hiKPz2xcQv2SoivXvWbqgnfFQL+f3cS+tjoGVa\n38GcOw+OWS4zn+6c1VQqkOYDTss5fBWOZVjOrRb+2Md5GXF4muWrlzSSwkwN\nFRGD\r\n=QwsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.0fa93277"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0fa93277_1541786883458_0.8616470047831439","host":"s3://npm-registry-packages"}},"2.2.0-alpha.92274564":{"name":"primer-forms","version":"2.2.0-alpha.92274564","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.92274564","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2fadc021a5482c8a071004f1fc34c0194f317123","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.92274564.tgz","fileCount":12,"integrity":"sha512-G1UAJD0wzdDc8826YUQvliCIqIHMn99cq/T0iDV1bM3QzS3R33qE4aOcLi4tw0A9oNN/Ld494OZfeWCvLw39pA==","signatures":[{"sig":"MEYCIQC6VZ1y+e/UYMsT7+6P2DA/J5nW3PknQWOOnGu/xvVMNwIhAIXT7/ZYkIojaKbIloVwPGbSOmlWHXP0wBv1SLl1tB0X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5f/XCRA9TVsSAnZWagAADqgQAIKrgSgSb+nROPQBsDp6\ntTPHdIQ55EZ3/4JNTwcWORbdKJB0PiZAcGtc6Dv8v0cu6B8MF/Sy6NNppeNn\n/KxTbf2GGytthechaI854gVsrRQLOHsCaGfoE+1ceByA2azpqIL+0wPHa5uE\nZjEYY/zFL9ZXFNaPst4kxgebrZVL8tO3S4H7ONP7WnaKLGIfyR3d0qB20RzV\nZT+gSTxWNLH8cuMdJnEHRWX00nhbFRLpKdoCbIzb+JHjESEzJTWBvtilOeKM\n9J9YQNIppsV3on5hEr5E1aTnlbSeW3FnzM00PpR3VcBuy2jKVmftT1nnu0KC\nRt6l7nq4WRul2YTGw4/zp73ut4L3J3Tv8cMzO09vcHALRqxJYsZQXGmbol98\nLpUvENZHXrK1QJDXYYIMVENCgAEp2gO/CrWmaTORTSrGMYq4E+GfkFBPlgDU\nzkWqZUmi1lXTf6XWg1jlMBfaoA/jRLzhomeEU5SFy/Wah4zMuLDPFTlt2Zgf\nLjU6jnlRaLZHjXfQGJwBgSGZijQAJik2DGFQfgh6b0WMmER7wMHBoI78U+m6\nbW7OiYBPhk1l5QyOiVoEMUCZ+plS1mhvNBG38p/+WemP63ItvgN+KtalqsI5\nq+2YDgVYQRj9e9IzcbdaMCTPzfD+f8Jkicy7VhfmKS96vdxUGpoM3GAqJ4R6\nz/uU\r\n=Ejaf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.92274564"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.92274564_1541799894096_0.6072248885638736","host":"s3://npm-registry-packages"}},"2.2.0-alpha.19834d12":{"name":"primer-forms","version":"2.2.0-alpha.19834d12","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.19834d12","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7e196ea07b7b2dcec75f4b0bd494f235070fd143","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.19834d12.tgz","fileCount":12,"integrity":"sha512-9aBfL1za33K8yJQEy2rqTQME9h4PzmLNjg9TKG2K07dvVH1VBo6Ht/WUTVD8GRThOqeLeRiLfbp55tksR0r+Fg==","signatures":[{"sig":"MEUCIQCcs7JBuQQFtQOMJCY6GYfkIOKFT9HVF53BQuoRogNw0gIgIK8qPhVUJR0HRme5Cjok11zD3bLKqRPpkBxAsOMJwW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb5gfmCRA9TVsSAnZWagAAugwP/ibU4QB9OHEdRQ6sMYLx\nag/8qJzmqYsagrVmfq5iJ7V0s3Cey5a6AUbzLNb1dXFa77qMgtvGDCCZTJQQ\nh2HEQ9kiNCqb5tk3J0Uov9XMVBWOxVRhwx5ETOyQOfT/tw7X5fwItob4BARu\nTo+FtzVht3B35jqu6KL3dVY2ajCaFcAiyQkAHDCpjzZDlyTwzquMWr9DQaM2\nDSWYOotYls2ZeZBg7Zcqwsp/xpBt7S6NFtRYy+AJ+vqQy6eBlwyfPNryjFdH\nx92AkOHpuGmv08ydacvbI72/E3Kt/Vnp3JzMl2rPutj34FTVc8Lg7gcAgk3C\n5b4pvVWuL2hTyeUsRFiFdkl5/cnBJwrB7x2Fr6s+W+PbV6+K7OCekaYLhulv\nmuPClJLnISn0IsvHKVp9dVNo9FMKsBpbX0ZTp5o2yUjVtVEiD3TsEzfWIdRY\nc0WA7V0nDlt40N8RNbRSjOu4i64HHF3NRp8mIg24JctFBOlWW8aR/DNu2LMe\n/CtahZDCFywLTDOnnjL1kyLhSDT7BD3+NquyJfjyBram50YEy+TphiUF7O6i\nZOjZjmOK/pVUzIfhSnxsCjNEGzR+LYj9Jdfn52y/BA/cYk1xnv4jD6GKFOEJ\n33e21rwkx9RjlFaZSeWOpfyzhENVPg789EPKCZjKOy7oKpbqMrtasI7Cy/+c\nLICk\r\n=XCVW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.19834d12"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.19834d12_1541801958085_0.781924655192918","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1c6820e3":{"name":"primer-forms","version":"2.2.0-alpha.1c6820e3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1c6820e3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"177542f4b52dd3813813958b47320a1ca34c5507","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1c6820e3.tgz","fileCount":12,"integrity":"sha512-LYM8jqcOOtJxzDu7AzWwAdoZ7L5m15Dx5yS7y2lJP/piFEcve80EYQoiVNm6k/YW76PuVyw5WRUx03TlRZafyg==","signatures":[{"sig":"MEQCIFqG+dXqRWp8OtrciyFw/wNOWzVeAamZgt55EjVZWMlLAiB1mAZht2Scfu75xW+DL/N8B0hK1Q/+QZdV4diqm4BCAw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb60vdCRA9TVsSAnZWagAAgFcP/jndmbIhrCbwpV031a7p\n7pN7yxyfC0qMZW8b0AEBYXGPr5Ol2c40TelKgcsr0xO+eiAYQXQJaYdxKqEl\nqMqoLy14j0lBQsNY9kwzIY/0vOKqNh3xcMiCsWxlEqPeVjmk/OFn4fX0B0u5\nb9ZDtixjVmRAMayku7/bboVSI5aKsdEpKrGW/QVuQAtF4Lmck9An6fJg0mPK\nKfCuSnKWmNPyIxAJ472YV0IMLOGtRWnKSlwYyvZsNzR2JzmTssF3VPC3Nm2k\nXjXNTdJsLEsy4yBCcf1zg1Vl3qMOIXD5EBwzuCmuj8mHfl2+PsRI8r/D2JmD\nkfjlwDaJd7Qa2N2m6hEnxqVuCWBgEhO9ZXrwe8zpiU8i32eATUNTtdbQNxcv\nWHEGv/CY0WaGmZkdITmWitOhQTkRxy8hs0cFpmsunzI+pVQ/uSjloLNw/D38\nl2WlYO2ASoExaygGYawImqvt7uzRXB9Hmv4EoLQZl0bHwht9FHPU9OczVvmA\nIZ1MIlKGWMe3VocCKoo91w8syJ2QgXOjriQVI69HWebZxaYU6sZoBJRVFpUI\nyuWPFj5cVw7/fH/oZJfVnH9MY9LLP0Tfyr+Ymd+x1vhQkTBNI6XpLoJy5bCd\ngoBMBqG05ZpMv2H4TgF5AhxdL/gAtkoI9Z8EBxzICL5zOJZl8+a3Zif6dZrb\n0LVJ\r\n=6THW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.1c6820e3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1c6820e3_1542147036877_0.38192576028449765","host":"s3://npm-registry-packages"}},"2.2.0-alpha.26a2ae18":{"name":"primer-forms","version":"2.2.0-alpha.26a2ae18","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.26a2ae18","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3699e870d9ca71570e57ce1b43e3ba7d5271b979","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.26a2ae18.tgz","fileCount":12,"integrity":"sha512-5Jw5bJwc81cH3V2JA+LSEqbpgPK92aKNBL+wJCMjfEh489nEv2whhUoPZUch5B3duSsZ7+rb/VCIlWm8m8/xOg==","signatures":[{"sig":"MEQCID6chI/vaoso+SMF4s0th/m+R1PZr/Ao8fy8ynZgqd6aAiB1ptIDpZRH6hxt4llmMG0nT//uSGGBklVbRdq+nK+k6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb614SCRA9TVsSAnZWagAAUSsP/RiK1NjPa2aInNMhIw7p\n7c1tVrLCBLO0SKBe5JlOYDdA9D/tqYgJmJsm8gZLSjwBdm6/jnr9C7ZSCYD7\ncF2yjNEj9ZlbZypKJiHF0C+NjYv8aaVF///TaWVHowqav8g3jqv8JSPV2O3Y\nMoExGslilqfXSuR5NzogYiHc6MKcULcMMW7SQq0Tchn4iOWCoS3rQB2M+hPb\n3mgBBN/GeKkJ0UX7uH0u6HQSTfQvOpi1dZPDztIJzS0cchNdca3VXTPlMTAT\nRwBinHnaAicRdxU/B4E2srr5F+mIVAAKG7qgUSq7LrqZ33OjuNz2w6bB+0um\n/F+tS/hNmqDYev+8Dsc4qDCnPHoivz3gIKvuIvrXx25nBZj0tnXSF8CA4k3A\nmuhmeuzKfiThSMtlj+3BgCRw99++CJgazKgDuaX9gjNAZZwuoJu1gkJge06I\nNk0WNTkjQJeY5h/7wK6XBnsu63keI/mfGWuR7/I8UOD804nDyqZHxB840Hob\nH5F9nwG3g36+ufgVQOctsQPyg0i3zS4n7tbW8Em/4hNeEUC2cYOdIkX+jynb\nwF9XCKFBU0ved6+Xr+W+gKRFMNEQ6MvOH2MoumuMukMIVsGlLm3kEPqcBK4C\n9MK68pX4uo9/LxBwEBQsKXnPQMObzx/0QL+GnWqr0HMvF55AF+tz4523omFL\nZlQQ\r\n=0lsp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.26a2ae18"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.26a2ae18_1542151697275_0.4653823041110492","host":"s3://npm-registry-packages"}},"2.1.5-rc.1":{"name":"primer-forms","version":"2.1.5-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"964570963b1998134928dc208e077125e722937d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.1.tgz","fileCount":12,"integrity":"sha512-yg9ReAJxYAuGlmFGwqO2uwxKiehqGPkVuRWVnc/H9WnsYqgXsA87m9pQaZhj2XOjYj4/N1wlEjOonWdVFfyoww==","signatures":[{"sig":"MEUCIQCJweaUo0+RMeZPJew7LH8E8C01V2u1b7o1UPwgG8NWBgIgS0dSaTJcxlEXuwRBhk7mT0TW4t4nVSrEHON4Y6pYca4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb62mSCRA9TVsSAnZWagAAJR8P/jyQVsYd128u0jR8OqNY\nr5uLJde4RqD0TcmL+XmqyvtjCxiawNGgmGZRtdJKQAqlP66sTr73JvJ5r3K5\nyd5DsRJbdE6Ny5rpp0zhjKh38K9GYJqEW72eC9HODXlgMdAbtnWCzITVRaZV\nNUHDrCwWAubNEgKUcXYLiYQ3gZT3/bv4QmJTfm5xUmhSQKgdNhnPhed1aBVx\n+AGVJY5I2R7QRDblWg2bm5Fh+eN+LjRBYl5u+GCyH7bF3ID9Wkz3bivkXz97\nnrfxGIktjw5kmftYTMgnD4rX8ffwIi/dBoapO5OYPMUAuCu2UruoZ2X9dsUX\nrKYkxWfY6RANQeBczxhLGK8WMJTedkDavVuCOXK7NEfjNjReXugu6WilUn/r\nN9guvlTN/Nq3U1Do7o7xwQOVXGWHJ4lqj3YjsAoXNfaIXzjWGx3NTmSqKqoO\n+wT+Md9/3DeQBt5ZFeo3lZ6Hnwr5p8mJmUu/n5YoUpko07/EcNN9nc8F8cfI\nrsvFw95C2ty40XaNGe8e+cOjBzPyJngUXMQuRVWev+vqwzsmhvGoDo6ebedr\ndj3Ol5BZSYiVCFG2RqTkBbwNq9PB3MiChO0+Y+mVmNJ7+ut+ZuXIcMG7B9ug\nGOh+yEkJ3ifkUwCvkDVAzAAk1GV2ngLDrd10KX4cTcfQKdRc1dlLquzS2ZcT\n0nFK\r\n=dpQg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.1_1542154641491_0.735027980561449","host":"s3://npm-registry-packages"}},"2.1.5-rc.2":{"name":"primer-forms","version":"2.1.5-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5c385be8b959529582ce14c50c5129c0e4ae2273","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.2.tgz","fileCount":12,"integrity":"sha512-sSHc6RAklQaF105lYpMqH0mjGjiANOR4QXI+lL7vkhwAQTo/Z3KLXfwq41JtY2y93s30op7mZwfKTGAAu/oD9g==","signatures":[{"sig":"MEUCIH7l/PXxkYEyZ90XxzQRZl/Jr3JT9V2tRCvF2BugDCAhAiEAtRp52LcsaM0DkmURXSArKEla3AaGCCBT4wciNwGB+L0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7echCRA9TVsSAnZWagAAiqIP/i7s9qe863DuQmIdafSl\nmyHjiKo550ENJgpETGCtWbvsy7g4aQBQATXoxMt87zwHBv3oOjutKAjT9W8G\nmYOFm6v7nyRFm+JiOw2WOzEg2UHNfccMw0qGXnyIim7TuZ8Cfkqnv19PTg4/\nXruZl+g7uZjshma1JPHZqmoqGPKjK8uwfeowR+fwv7D+zN57MNybtUb/hKBT\n2WIDjYHyrOTgmtQ5P5MwhqZ8VMWp43j896tQH+ZZgCoX33u9eoAroUMNRsbV\n+nKl2LCQLOx8/0q2INTnzDWBsKExrNC6oJV1++aIQKWa6iO11cdYez9q0x+H\nKJMIL+ZSX7hdry1oZbsY+QcfWXaNosUlPfbw+6omuzf97AqkOrDQfWuL9aCg\nrTyYvOBRrRYq7G78XBKBOdAy3h4ltunpDZvnHP+yqmcF69Dl74629vvoxxyY\n5ES7xiC0fKbCI3HFEFZ8P3Ut5rTEr6Mobwm+k0sPgo9JQLb1/aY7+HRKi51C\np2RodG0hSbQC7teC4BCqChPDUQpHYaE5Xy971kx574Lm2R9c73z7niwcucft\nlr19gEa+0ENHKENA2wuX9b/nJhOTQsYLSwNBKmf00QjqLUoA31XtoeGLaxbq\na65daBj/iJwbxLDJz0rVdxqhNHjds8yEuGWb2fiAiV4NujFjuz6xJKcHDVRS\nNyVk\r\n=e011\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.2_1542317856502_0.3344750232951583","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d651913a":{"name":"primer-forms","version":"2.2.0-alpha.d651913a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d651913a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7e0577ae7009af89884b6e644c486fd659b566eb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d651913a.tgz","fileCount":12,"integrity":"sha512-fWiKoPqXK+umna1iT2FKch9UjjffPab/kNHPM//xsrEZ/T99PAp+48u3335yASw1e0MY8laZ2+r6fufi2+mtdg==","signatures":[{"sig":"MEUCIFHMeB0g8kydITvcv0tRN4IowDmj5AF1bKsY5mxQn2UwAiEA//W/szPJIKjVPNJEyXnbc0Pjl0ekTktDbV5EnDHktbk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7e7FCRA9TVsSAnZWagAAwS0P/jYfBrCN9Ow7TCXD65gb\ncl65WMd1ZKwknHA7juA78voFVSPomNVg/jMVrPsKaVNhu32szVyvxKNMw04H\nefiP2rsD0jJF38O9YxyC4aoweU7JpNHi/L2bNU+dOgcQNMC8xWaDDGShUQHZ\n0DLUhBlanyI+AGpm22Me8dWyW1oK3ZNRKy+IvpUsQpu+34YK49AvNjKPe7eu\nZ/i0FaExIJmXRtYwTZVcssdUZHFpIlnCbpGBdUmxA5PMtvJ2SQOUH7qQbthI\nPtVXXqePjX5m57+8s6rgtltrakQLlFajcdIYP2Y046pPY/dVHLHR2LHk8D6a\nKAI7+Lc9marU3wA9dZs3uttlMu9C5rFAczltvGXe19ZuD3oaAQHI7GfAgqzT\ntbhf4J4o+7/Myz/eyA7yZLX2WoEqqaLakzhSEgEd61DKx9H4RYc3YYAWNSEa\ng2R16CfybD0Sf0VgUt9o1700BLoh6xU3Uq3SNmyUHvUO7UkBwq9ch3IglBN2\nig5M7xb+o38UcQ4wDGbN5iY43wpp9sgy+AVESSbFXEidFAG9dhdn9wzqKY7Y\n93r1NU1NwJOIs7PpkO3AMDnqLmDPWMPG7Ouf9wTBA3FSfyy4dxdyYv6eh5Ta\nQYcYXJ/XI1RLmah5b2MwpgVlpfki1xEnsICSEJkRa+aFYMbQBkfMB7dJwEMf\nU/dQ\r\n=mc3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.d651913a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d651913a_1542319812387_0.8522895079330113","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ea8762da":{"name":"primer-forms","version":"2.2.0-alpha.ea8762da","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ea8762da","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b97f24cc386db2b50f0cdd235228a9570ae7ec6e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ea8762da.tgz","fileCount":12,"integrity":"sha512-7bxQpjOENw8tQv4kCr9VITrrmreE+g5+TC2iAisDcjQey5PVynb0Ue+n06Vf/UUteso/Yrb+4f5pGTBOHgXspA==","signatures":[{"sig":"MEUCIC1YhFqTLBRYT/25tkA5kpd1/IX6GIYMsKCyRbdMUyqyAiEAk8KTEmSi9e3GiMTswjTmdgUFkOr9xfmRbgalbd90RsE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7fOWCRA9TVsSAnZWagAAlzMP/1+mI8Kd1R/59U+3z6qB\nbAzmBcw6Ju32XR3m6DdOMLEas3pAmCmYEBCE5g+LaUngf30Ta7JPnYL+CXM7\n3AYHD5xWBhSHqcJb90xw5OiQKqed/Dxflbc3f9Nher8CM3PrefpaQ+kigx9F\n7/O2dPKtr5BZy+c9maeFbti++mgHZdLBtJ3GEGiepiUXGBIEiAh4S6O4y7TW\n7jMIlREO0nZ01FGKxBe3oF4FrzgUZUIKZa80zv1v8OAatsLRVHsRdrhrC48t\n8ZBTMy8wCA4Yh1uoKy5TisTTXmWoOrD2EQ2WB+OTJNraBP3VJJ0P4DmFQTOt\nQVoXaJn4CiK2GI9NhXWbuLh7RwmG8O+6I90W4oPnWPdCHIABfPZbnSOLk4sg\nranc8ALKQe3hD4r0+jt5UD/5Sxvkhf6GAusefc5Adhb6j0tejS9nkRERqqj0\nE59D3tylMCkwvI++UQZeLAOkge8IY6phzOmV3sV/dZK1TGhKFeI4+nZD70XG\n56UtyZiFbNGpSPighG+7DmuDl1+O4w2CTgsuSLfVxII80gn0d+O7cX5lBboZ\nlhhM9WKJPtDfQfG9mTSR2y/YYSzlaS5dWgsOhndDBbFswYqiNqwLrjcSCbFP\nMo/xRfpJ59G84O/PQK4sy1GidGz0G2QWCmAQhuOrOnY/4V89ONVN8k6lDPsk\n3cQl\r\n=R3C0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.ea8762da"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ea8762da_1542321045753_0.5963006488358593","host":"s3://npm-registry-packages"}},"2.1.5-rc.3":{"name":"primer-forms","version":"2.1.5-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7afc440a29aca142743bc472bc96c1e18fd98132","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.3.tgz","fileCount":12,"integrity":"sha512-j52ClJgQVw6Z+O68mNbrmONSn0k5w0BFID6074aNyjwRBk1vOHc8SD1lVgEU9LwD7OuUjsU8SHH/51L616Aygg==","signatures":[{"sig":"MEYCIQCqSwUC0/a7Vaj2w1mKuoYtHlSmlZI+KcuM3k++HUfPPQIhAKnxZubyQUirQzqSLT2THqO9PUpUxzW0okVpLmPCBDSU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7fpPCRA9TVsSAnZWagAA4AkP/iYB/M1EQA4a9F5EXKAN\notnGSg3QUQvpTsSE0AcTZ1oAdVQGRZ6jCJER35Z+l4dqBFaSHwMVPVb6+vS9\nZfk4kYWLsbrcJ3ddk6tP+fX+gRzw3P/R0pif/gOzarXHCCiGpRpdyMil8tO+\nNEKmaOf53JPJtwZEJ81mvkqEHgkUSNJEkDj26hroRZ8mZ+GyiYh1Td86kvrR\n3bDjZu97IBH3pJlVRLhBGkq1vMU1pvqFyELe4gOMlqgTw8LAi5iymdEBQcBp\nf7SR4VoX8wzH+rM6+LhSi3m4f/5ncCGwijrDcUSEuujTHfy5yzd4Fyf+89Kr\nXHdUHmOQV5/P/zJYsmybSyeJl5ebNNvGaKHCQCbhPkHx3CMttWrJnVD2938S\n3gRDmwuop9TUrL/BKGe2oLvrpkdRaWwHVcWNKJTl8am9yF8SW/Osl5sSeDnl\naJfknIOYu2Pcdqfz+Y1Gd4TTF7OPrItbv3hdb5c2HaQGdYhcBJav5MScoYOj\nS3kgH4K/f4vAII1lDdh7xepWxfLhiuL4bzLqgUwZGm4PGUu0KLD3mXOePkDe\nhRPC3cJNoOtcFeW0WxR6qCS0Oo5Xkxqa2IuQCO2+IpjIIWK9bDepV/O1dUzF\n2OPQgqjSYFQKZvCPyalfMcFJS/lD1jHVPm0LxoeaAEuYQxt8vwVSoevyUAbM\nyLWu\r\n=5DI1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.3_1542322759310_0.11684605323322739","host":"s3://npm-registry-packages"}},"2.2.0-alpha.389964ac":{"name":"primer-forms","version":"2.2.0-alpha.389964ac","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.389964ac","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"957b2e0b2fa6b70bda119bd4ded94e9e107c8678","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.389964ac.tgz","fileCount":12,"integrity":"sha512-KEcNlQir5kOroORNmALKsyHY15K43RrnS5wnAwyCluA3gXuQkzTllnZGQvMZ4hMvcxsNDMzbXxRZnMoNymmlPw==","signatures":[{"sig":"MEUCIAqT2ZZpKnrYm8yaVDBQBl2fO8fR7SWaS0Jh/0PSM8zNAiEAnGuMlMFwnVF1wCjLbA+MfT297exszAwFVw5VjaRM2QA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7ft9CRA9TVsSAnZWagAA4ukP+wXBgZXGL9GQ0JvpbDZ3\nD/0Vo9/q2zr9cQ55xKkrU9qYrNhlXmS+2NuGe37CmE9gXqNtOkoAfMrNLEcc\n2l+lmeJte3LtOHga0MDRFAxPaeBSgg8xdPEbwuw1Xk5c501e9hX1YxcxWbBS\nGi3cQX8fRmkQGpxtFTdfm8H01op4aZAWvn/GMEKSkFpfz8WTJFV+mZ36mOEa\nU++yAtNVRf5skJj+f1hgFvrAK+CtxJEBMWgL+DFwPFB/tm5wsjrqla1JjJu4\nWrPVpfiISGaOVMVtnC/m2W9RiEy9hDzlp6uO6iCX2AzEgy4Q8OL8rt/q0X7R\nmebRaDlGsn4JGdJAg4lzZJjV27rI8G1sEaVW8Edl5FWu32RlwL4BsgpegOku\nHKMesqEOdFLZrzlAp6C94bSTSSzgWUud/QF6ZoEc8YHIgmTviCy5TmRMv0xd\nrx9Xe0AZRhUJQxrCd+DWsblBKkZtldiBRQWvl5jAaXARmoWPTNU0u2MlCfWT\nUKWiaVlSZUOdaLcRcp2ebcBix4M58uxIrCDSMpXQd5TDbWwaHhPxzXIj6MAJ\nIvmKVpj2eMtDAWE4BDRn+h4yHsp8xkP5AQY7kIRCIxXjw6+4I5VBUvqlw1IN\n8LS+wVPTr8sYbVZh4kaCzKfzmyG01rGhb4mCaoqyJYfZo6lBx/01twn2MxKN\nbVG7\r\n=v7n0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.389964ac"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.389964ac_1542323068875_0.13435833378401174","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c144285b":{"name":"primer-forms","version":"2.2.0-alpha.c144285b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c144285b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5949df59a50492b67c3fa8cea259be656f808a24","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c144285b.tgz","fileCount":12,"integrity":"sha512-j9bZj/JWDIw7F/O8TSZgoNMEJ6UezB1nQ3GkJ0Jo/kxVVoqwvgzwXkY0qsSYVxWHcsxA9/ifJwVKBAHtNJBOyA==","signatures":[{"sig":"MEUCIAy3M2Hyo6ajGbF4tOoU7dPdW4EwjCdVHZtyPE/CtqSwAiEAobluK9BJ9ToHO3gG8dHyA5l7D6fNtcCJPgf5NF1huSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7gWwCRA9TVsSAnZWagAAN+8P/2GmWhnHM8XmmwUONVT4\nQtJEXUoO3AXhszM8sof8Y6LWIUEIEx72Lpo6lGf3BNfjypqB8n0pyb4q9aiD\niLhrBs6wnW9NqHel6aMJshsVI3tr2uFDhBs3/q4qRUXOFq5aer+q9wmkwiWT\nqRyx5fw+Jm3LEFCASfEzxMunt60gRGkbbOHiPWx5Qupy55tAGZTxbDBT69jy\nOqfLNWiGA54lJLVtlFGpyXP0mCKwXoPvWtiy8fk0yvfNBqNsNhIvSJ/9rPar\nSUBsIORccU7hXR51009Sg/cqJZWcEnT6ggwSdQk+Gw5ddaCIqh+hFUmVL4xB\nKd3RYbc3YX1sMxkiNb9+qOXtkn0tcCAp7LFcAb22a8zh2TBLFSu//4vGjbGL\nYxnG0XEgw26F5UoNOqasJ7j2FIAevp7GtpuIG7EGNTX2f4VJDM8I2lshokUG\noF+gqqQH4hS+emVSA6AdfO00+PJz+eVoxWU0/L4l9ska2G5Z9AGPTKV/3B9W\nRGrQijHeae6sY2IhZ8fhW3lLt6XV9ZV1lOPIOhr0qi2TMNDFkVfYXR2ZmiT/\npJozWeTI7cROHGJLvrL5xoopWV0vzxhUP1/n4VXW8rL8nZPC+9mz9IpOfqhq\nUWgMqVoKqngp5Ku9CMPNvJjYv/1aBJE3hSA/fWPDK9sFv3vYWHxPySaAFu4b\nVHlc\r\n=iMNH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-alpha.c144285b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c144285b_1542325679675_0.6321867996482671","host":"s3://npm-registry-packages"}},"2.1.5-rc.4":{"name":"primer-forms","version":"2.1.5-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9a42d15fdab02d2d2238e2ca09d59407c1474702","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.4.tgz","fileCount":12,"integrity":"sha512-oX0K1Ijnp0pmfdd9M5yhyAfku3Fut25rRiwK1lpsC3iBG4DeEw4mOosSNq/yBDQ0fS42nZ6KDtYjAmbEyx6BSQ==","signatures":[{"sig":"MEUCIAbsJ4SPs17IW8C/uWEc2BH/Hk+Q/FCWApcqH7G+9pBTAiEAtgET5OhHBiT/gJkRb561kt65Vf8T9PeLc/Favlq0cCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb7guWCRA9TVsSAnZWagAAv0wP/2AxfELXMTavJe0Z/Meq\nEu6xnuDuVm3EtjsozvYv2ulCVCxVnugFQJdhdMXSmmD9aA3yQF6Sj8WcQJxI\nGfxkg27m9sdtx8rqikEN1ALxV9Qx/ujCVkaWRFPPvt6f1eIntDgKLfffbVfG\nIJBwD5GdmWGa/RfJ9WvynVkW3awDUS4HJ0R+SNCONOyBDvIlJWeD8d+TjJLq\neKPcE8voj9wMrF7RmvVcwT9K87SBiD0YrcMv4rUB8pz3P+DpCMsMKhAfJWUs\n0d58lpgtBPUjGG+rRB7Fx1kBufun1ItzLlPVu2U7KmVwE66cx+1EI6hGFWjo\npm7ul0fZm0jtaZJzwTzCH5mkiqC0BjhTN/HOsPDRoIr7KSB5DXhSwNd8sSNs\n1IlVLNlzfUFwvfnuiWvgZkVYCLKBf3WzHGlXDOAnbho1hzwID9kbV0EiPQLv\neJWK4Jin9RchOnYRvv/hQjdQ4DTlE2++4CuOrtfxYu8ezrkq1fRFCWsvmdeh\n5ejfQtEZptKXKWHo9vLm+gGypB37jBzs6XTjLUbIHSXD4VRiIEIhkWzF1Wbc\nAhzkDYChh8bv/mWuZMVeagzUh2hsGKyufb/oBezuAWQnFAevfDyQWflRFstC\nORVxSJ9JQZrfToTenPUBEtvaqkzXFmTupnxdofXxYnWW9PqusBa/6iktXXXa\nid28\r\n=fd9E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.4_1542327183149_0.04688467641679872","host":"s3://npm-registry-packages"}},"2.1.5-rc.5":{"name":"primer-forms","version":"2.1.5-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.5-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d35b68fcc8f695fd93f81a4a39d752aee237dc3b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.5-rc.5.tgz","fileCount":12,"integrity":"sha512-ltfIUFBInHysEK2IXmv22Mw0m6PuKKeDzS4fVMnjrzvtYkG5rHVDWzlT1cFGWBF5ZphybTgMuU+bTTVc7pcd9w==","signatures":[{"sig":"MEYCIQCCeJZ8dhRb6G2fd9aWZGKOBGD5WML9XcpTZw1TlAs0PgIhAPtm5jL+vpFUaMzefHp8DsABRrm2kyOGG5xL48SZdPJL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb76DmCRA9TVsSAnZWagAAkUsP/A10hwtZiEU2PyHTaidw\ngm049yLcPdlPeKkr8mNX9V2uyo21JyLz+WpUxCHlLlLodCnNNEK9KfZqj/qf\nJ5SbZ5zwfltL8VGPr16u2SMck70b4t9xUbJd1/IQB/U4Oe6r9etxnFg5Ny9p\ne9K3OOfJsyP4LSf3fg8x1aJAx1kSx3piKrWUoMnp7q/S2q8kqepoQvFiyGpt\nbUspx0WiNqDOU0DJ/ex68WPVw52NffItPopmsBWAizojMtC7WKPl+N0i0ZTa\n7eWNNiW/sxEg75HI57WAxqz5NGDXteHK2wxvpVVHoEcX+v/2rvwK2Ar2Iacp\nJfunrL+lGq/+rqQOpgRRWy2z9RdE2Ky5FJb6aPoNodw11tRbrX9ocHlNXoo3\np5HuFbBWN7k65msWUwHmIsb6gUopRFklblyx0Y3QGfkGvB/GoJyKZEgYARWM\nJKKZ9kxqr9WP9oMSI8WM5k7bV98k2qAd8Rg1wZczy0E9ZZgeZvWyOycM88mP\n+2ZLpeHkB4mgwIlPaBw1N0ocuodIDGXuB0drUOYy2gS72esXCRh8pP7kCU7R\ny8pzardJSylEsln/ESamqRmAn6KUoYAuGs/PhYv75YK0v606dEjuIRY4VUMo\nZvCrUSc8GMfEWCrFLQtzryuGHej6IHN7Ci5agCvDxIbfTf8yO2pggsySnvWR\nLPCU\r\n=cOK5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.6.1-rc.7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.5-rc.5_1542430942373_0.2411520545969399","host":"s3://npm-registry-packages"}},"2.1.6-rc.0":{"name":"primer-forms","version":"2.1.6-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4651f1c4e83475647f5a0e03ca66d3d24e7b59ca","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.0.tgz","fileCount":12,"integrity":"sha512-TzQ7buE3lCIPz6jrYRVn4vhzfR5ES8CzZwNX8x8QQ2zGwohrPUBFJ0NdoopoLxQMev5a+kn2+rRDqcYio/tlbg==","signatures":[{"sig":"MEUCIQCBh6H67S2tWnCirmaVw0ZfyDibizT/kinTWioi+w3liwIgT1efb89VcUmD6P/wIcpkLRkOhyBTx20fGRuso+jJ+GU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8x5/CRA9TVsSAnZWagAAhRQP+QF31aq2GftUcZWpZJdo\nvb94iYrieuu4pdmnbH+R95iv8/oOQp0LQXNvZWA276jtvnK34EcXadRomKok\n3YynPJRxbOTk0Bk6lPgzTHGULhW4A9Ew9RP8lJdVLWIv/W3Uk+J/cP+7MBuA\n1pCLdkQm5+V7BXpKBiYxpdsq1qoqpZ1SrclfgXZmeWcdWq1heDQnpxCnUkYX\npHpvT02RN+e1LhPTYzzVvoBSoS/3yZv6ZbKfDBmpEfoTYmVCLV4NfwiSrsSs\nz6tLIm0ZbMu3ev6gpCh+d0YfIoBlqgKMNewKlNkFjXYiUs5IcWq2yvi+RZ0R\n6To39iMu1OdiGMw4YJJITrZcn0XHCf5mqu9fDP/9qFeyc3XibV494uRAJghG\nC4jLfER9l2qZp+MlWBB+iw9AUoAGdhYXeKHmSXCJb0ysUCWNKB/WvSyhT+QR\nvuJTNiFKCgCebKFVu2gkq3xUfPBOwzthMIA1vYwDfaNEBBUtk/T3wXNo0ZLV\ntmEHhPm1ORIfAyBUKVunK9BSTmwWT+UNdDZXw/+7q6CORtfVBfB4readCUWz\nknvoe4m6Kgzz/4Uar7hk3Rc6Q9L4AZxe7uSUsK4DbyG9EB9Pzykng/p9syGM\nn15KnFP/aaphBP/RN2Ll82ueWqq+xQMENnp4DIxRrghb5YkcRdE8jtdPQPG7\nc7MR\r\n=QDoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.0_1542659710320_0.0030415480592000943","host":"s3://npm-registry-packages"}},"2.1.6-rc.1":{"name":"primer-forms","version":"2.1.6-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fdd7a5e7f7e211201bb9d849a0a79aea7b75753a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.1.tgz","fileCount":12,"integrity":"sha512-PdGdP9AB8M4YvO6Y29AIX6A6kt9dDI0SDdCoovDhjhXSEp3JHK2E2h7ZbRZXYSaRcXUOuZheQ9w/yxtXSD5UvQ==","signatures":[{"sig":"MEUCIQCrbEh7rv6MDrtpidw7xsRiJBZ9cYhlh9NdjLLuu+HqoAIgMQEDd415VVfvTM0z1KFmKmPOmc7Lhb6bB+S30JdUs/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8yFeCRA9TVsSAnZWagAAEi8P/Aw+em1svghiRyVjE7vX\ny9rdOEKrtYobnKdqDDmco8ItHpGO0VVCBJ5cgys+zjqZYalx69RNFcGNMC9X\n0U3XtnafFYxUKgqOnam5qh4Kvc0nxvMEokzxnOgL1LWnbc3atp9UW54z3pmk\n2cPEll88/NEKHQjMziNQor90rfcsWArQO346rBq9dsQFNPHaKGVR6WAh3oRw\nsCCVZHk+GJ3+zLzx9X9dQVLDyIg8ffAi/oLQ78QJqWCsfN7x7K9uqO5dEbU5\npclHAEn/cjbNMPwq+TsThSxEglD7MFxO2IzfOMBCUodj8Bq3xg7xE1kLP7g5\nkgRBXMAGnH/R3DDyqqtHEr+zwaZTCEjf/f+grLhFm+bCKgkwLCpsuUUlXUmc\nmYOStWpau4jQxlsuIIhKnVScZUXzbkp1U88R3bg22yruLm/H54fTYJF1ZbnB\nRhr6cWCQlhp1HAilROxVQJ81wTLu4rGwlZthNI/606JkwfwRdpzb2c9IcDjv\nitQ9xD4cQP7FGe4jg1P9Dfe+az4QE8BzrD6hMkmwcIhrQAUoO7/toRut+LBg\nANMYJen6Lhg9qKljAbDd22grWs4a4OhG9aIFN9m6sts+BCVLCNYzaeJakBXL\nJfNv/bzdoJcZPg1iqquJeg36fAntkoL7sZLHmbTRZyeub/1tV/zKveA8fVaK\nC0ws\r\n=QxeL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.1_1542660438857_0.1736457613071447","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e9889e24":{"name":"primer-forms","version":"2.2.0-alpha.e9889e24","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e9889e24","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5fb28d32f5f14838fb3d4bf68550c58b66b66488","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e9889e24.tgz","fileCount":12,"integrity":"sha512-Ph+LB4ZxDXT4aFFgqMKf3kDOr/+0v8RdYqrChwVgwlni7dCwig81joBK8yWNGVoNR9QJzyaP0F6obOOCxMtlhQ==","signatures":[{"sig":"MEQCIGEgcg1cd/InMNhfVrj7JhKUxiaIwBpf2JJ5160DQBQ1AiA1CihLY5+Xbti6szDEcfJiNMuiN2vrksYZ/AeQg+51kQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8y2gCRA9TVsSAnZWagAAYuEP/R2FrWr6N6Gv49j6YC7o\n2ck7ym98Fxq/pZDynvkHWGQJnb7eknJmIxetusZkO0GY0t60Prvuuo1EHaka\n7J10tIcQQnaDUOmqor3CRNAPqo58E4h0G/btoUqvcLHsWWKu4eQTWc5Pdqht\nG22pvKHydjfZ/wxsjlpungymZEtzHUIUhTFyMX13lNJnWKx/ckHoT9bSSORU\nhv4Z75soxEqghDMxMyiOxIjujiFaPU4Zhnk66Hc6/7iJgBViyMmQJtmwT6l0\notQTeUyIrqX2Gsd8M1M1GAfRQvcENgZXgmOzzHHtvX0B6CqMRYdEi6wfCoTB\nnjT6US4f4rdfm54yu09YwzCT6RUIY/ih6dtyQwCzNj6K56xIiaoqvt0OE9GQ\nJCh/fjz3mblLNjq0AAWhbIYdyPRfGMdmM3ksJBmSwzcyaSt2nQJoGC01anyH\n/4etm7aOUDIswL4enA+rZB8b2SvkMDp0b17s10xTCQ4OPyRhFBKDRSzWJP6Y\npQjjtyTisaJ5E5NtFRLzoHZHbFkxEBzsR573wfgtTkUw2+9fMBRHs1p/MQjv\nzJlabb6+VV3oEk9SV/hXXQ1OOlHNma9cpmCQAUqSZeWNg37WVG7lSRZD0Z+I\nR5gCpcVSUh7tLGfUJrinLUNmd8DqNeAP/nNwRLf6uXZZOrl6kPATXSZk4Hki\nUOIX\r\n=2SsZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.e9889e24"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e9889e24_1542663583685_0.26504536987318894","host":"s3://npm-registry-packages"}},"2.1.6-rc.2":{"name":"primer-forms","version":"2.1.6-rc.2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8ad73017fc869eb2bcf5591ebb52507e197c32b8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.2.tgz","fileCount":12,"integrity":"sha512-vfnxI9VhIY5640h48bR6/N6W1qzTH8hH4ygdhr4TZu0e8fE0befQTal6majS/DOY76dC4bTtfeMI1oZ+5ygmnA==","signatures":[{"sig":"MEUCIF3+mpqSLoAkT5GgVtC2gPSq+I/PqfJtB6FD1ssaVwxWAiEAo0FIkBhrA6BrA5v3nuo7+IR2fvNMqF4CCenVrQ8TxYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zF2CRA9TVsSAnZWagAAYuUP/i18ojDqrptvkzSBgXk6\nxlUSY+HYk8gRR9qQGBqZT6Gw9qVLvm0qP+x8VcttzE/S6GPnkka6VQcgfwAw\ndy07HCVO5jkfIMWO2LTNOFuGuVt0njPou2jyzch2yzOcCyffFGx99CoMOoL5\nWzu0uoUTVka+KjTbylszh5/XDX8vYAc/CqrZAr4Ju4afi4fjRhyXCYB98guZ\nKdnOiyzliS1xJLSKCFLe0Nirijfy3CkBnHiLU+WPP2pJEtzVwXFiqwDqA5Jp\n8avAsmVCG56qnm1IknqsMbcncuhL+tdg3MdCxSfuGhmHE39j7GUC/XWthqUn\nuEE3KlZYu+UFb5qpHCMg9ZaKKFDz3BAebMC70pi/BTyVOwxDxH+MiIY3sIgP\nClW5HzMJhUPI/zpJDtK75eSCcOYQn+GZYy/NDRPgS0bQPLw1GnjHp4ZfGFwI\nc1R7i7VRCpGOTalOEY6Q1NpY4B98TSo3I0XE7MinNmlit7E3UR2qQglJSq6S\nmGyEkXA3X2PtyZl1bmcTmk2LRGqfwPFqHInzk5i7dbsuR+TKx3u0Y3y9o53F\ntQrND5N0bRAVDJOmosvnSXR7ndW1j5nC7vWFK5KygNp0yYOkMNUM6rnj9q6M\nmbFUUJqYheE82B0JaXFRs5uGjHVYIlHUIRhmNplxvojWckSHTfVK2zMfVqPk\nzhGD\r\n=hdit\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.2_1542664557920_0.7394172512483508","host":"s3://npm-registry-packages"}},"2.2.0-alpha.314bc862":{"name":"primer-forms","version":"2.2.0-alpha.314bc862","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.314bc862","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"59f6f3f3090f6cdac7c6f105dceb28c1c1c5f320","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.314bc862.tgz","fileCount":12,"integrity":"sha512-BxnBbrGkg4TQDdGAeTSr/ochDBEn1p3YPtGLW26YwgBgmpU4STuyA8gSWBCiyOaZKyUsT0ioWjlFkIIYzKHKIA==","signatures":[{"sig":"MEUCIQCiLiyGKl/YMNSI+eyGbOGkUQsLKubrKHU3/CcTFzy0jQIgdZHz+XK5mQE4uQQuEGd68lzglGzgUow8ubhtYo82PsQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zUvCRA9TVsSAnZWagAA0rsQAJR0KxuKM7mymAZLdO0+\nide/qiSXaGYbTE1asJaVag+pkkbuJXtwUarVW1/rGHP+TQks09iJeQmV3nHh\n2gQdwIlCK8fhtg33CcDFsLbi+EPt/2DokKsl97kVT5QQNUq3RBNvm/6VuOBp\nPIVdlyCEU1A3udLptkPCZGGsCkZBEswpBNCDpiQmsRyJdIXoOL4p2Tm/iYx6\nuvD21o1kFLXM7BjkX0DvCHN1jdefgJ48W6pzl9DabBeDcAaFJ7RaAvxMBpW2\nwkjTRJUGbJUKrOUeICmxZdnh+lY0efMY1otjbLCjPzcyjxqQ1XWEDg+a3V6f\nMEPCJpOsIUpwRm8nhT7unUNtRyjfTScJpyjQHpKLwEdJ68gHwDeryBA1Tdgq\nr+QLaFc0kGoe1Jk9iCOdAaB67wdJByWTuhrAV2q+b4qLWNc55RLlNSC0f1qF\nwvtTpuKykr0lXrHoDM2VtQcxSMHBDm2wqCIu6cuNSOmMCX3HGnV/1H68VHiQ\nAF6Fm5ET+gWKPFndH9WAzr0AKoHvZ59iOEIeQoDRUiSENvNNHaNSnqOjSDjo\nu7rnsoQOQHLg8GwhL15lKG0QziqwS7DCrjcr9t46fI+dH/OgJiJ3ZAUxowR/\nHOISHdhK0FXnhL8ugM2HK1bfrh3RrWKrqMMo5z/kqpteGQWMcC8MHlrScPTB\nhOou\r\n=L8kP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.314bc862"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.314bc862_1542665518597_0.4763780885177642","host":"s3://npm-registry-packages"}},"2.1.6-rc.3":{"name":"primer-forms","version":"2.1.6-rc.3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eeac5ae8b866e9b1f70108fde75dedbf97bdc511","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.3.tgz","fileCount":12,"integrity":"sha512-BQTjBbPBB9VmBxxi0aZavecVAvwye9gnAl5LxQLlRcBqoNap9K7jQvb/SyegjAarFQUZ7LdBE/pmR/3PshnZiA==","signatures":[{"sig":"MEQCIGdU8lN289clJuHI0AQ5fsrtt3duYMM5L2wLu8koqyF1AiBsCh8yJwB71ziq1ktvPBoXKUlGqVh3Huvc22xQSNcgag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zpqCRA9TVsSAnZWagAATPcQAISiUz7d5DFgaIE8dZby\n5al4XzC/mQyeQXEzRJooIRK7UyzQdweOR/kes4nwcB/PKLBbhNBmm5vGm1JY\nuHnmpfZX1rwfGvt5nQNAwcV3quiXzvNrmd3A94KLxEBPkCOCjn04Nhzt2o3P\neE5rvXl7Zlk6GcdfAhNTdZTn/h5TxoOmRMxj/8VdOVi9Lz7t0ZHDvMRRhvwZ\nTAkpqw1gw4GDnvLW3y6xag6OrBFC8AjGezbvHHbf+spRU+C9TF8HpiLwkryr\nvNjM/doWz5HuANTqFlQ5R4aXfL6lELRnVYAC3rqpKKV/3PXPf21HLbU+UQQV\nUnxwGO2sZzIqJn+BozrNzKbwG7y2O0JUBumAaatl1yJd1ybpVzMbTIDmgAkA\nJue5YDluyI0lZhkngCuzKDO4EI9M5wz4uvFh9F2LFW8QeoIkDAwdJQXamg9e\n1Pkr4/WlsHFAJD5LtAc95o5kYROIt97uYvNdREd/SRcw40Jvb8suZ0QHGkQ4\nKdgggAWffbyDv+6ybU4UFB+XGneLM2m12criIW1m4bXmcVK23+midqsjrgkK\nKQ7ZFpVArzPqIyAK5i3BN+dZHJWf+1oHnH2qepmjbeAUYyrDNIm9j+qYusff\nAQPzH/2WjXlUnt+4XMtU6yyyDLAiB+SkoaNbmZiy9xvrT56LAzsOOelt94fi\nh/Fr\r\n=CU7U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.3_1542666851089_0.44278478458736714","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2afc388c":{"name":"primer-forms","version":"2.2.0-alpha.2afc388c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2afc388c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bcbee156dc3339f13e8b9f24d8ac70ea89d15751","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2afc388c.tgz","fileCount":12,"integrity":"sha512-XCEbwfLZFJ9AE3mH4o15t011N8+dTNwqSVQwrRUfcmKvooEaOb4lhe42NsP9ZVuYvUsppIRbmcZlHnvtdySFHg==","signatures":[{"sig":"MEUCIQDbESn9lwcFEcRkONSt9tsbzYS7Z8iSg05E8xYuXsgriwIgMlzAVMH9tA0FFOZfQzfG/0OLO98qTNiwuzSU/cy2Tgg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8zxDCRA9TVsSAnZWagAAOfwQAJHYZe643J8U6CwCoaQO\neHhN2qAN5ZrOFN54OdrSu3ioQhxYmNF4WvQHjIffS5+Fs6UMTH3/DLJwJ/U2\nhDHTmk2+4snd4JIzYSkE4HIEsCX/zf1NTRflD+nvBg8scgNiSE52w4h47Rw5\nSWgxnBD6P5+qP5BJUykxN0t7LiV+xVZxaSKD0BLMrl2ZmJF+nLlqvK1rV5+e\no5IBYKiCqas5sH7cH0DsKY5KGJeioBcrASPRXg8adAr8PTJQiaZ40TjpU90m\nsIleRMDNvOX9xNDSbJTBm5y9Z3SCaeAixNKyorwJ2j1GjlnpfvGIAf7NbNX9\nOOiR6/JwMuM91YJph5ia6Hh0HvZB/cLYJEBCfQhQmbwBtvDKU29nOYYnp6/Q\nPcfbpXM9IanK9xUEn2c4jr2JwaBK2vXLeckUZca6cwFIJEGncqAheGK7r7jV\n1YyUrZvMYt3nSrZ+kaci11TmG7gXyvAkJ4QIBWSRk1Lo40YOaUz/FL4zRB8w\n4jpC9xastTb9rOBNrupYTuSvaqSHaLCtNUV2ZfnEs7njFtZH+fYpgkTtjqyP\nR5qIuVnrV50xibT8rwnRkwFCEhSRuIErbwIiV11DHuPiL5nY6WfkE1IxvEgj\n62qr6a6MejLJH/OW4YMwcv15lT756mIsZ6LhyrsO/Ps+o4r4rKyVw4DTrYh2\nr4mA\r\n=LJSO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.8.0-alpha.2afc388c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2afc388c_1542667330937_0.07944332850090796","host":"s3://npm-registry-packages"}},"2.1.6-rc.4":{"name":"primer-forms","version":"2.1.6-rc.4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33cb3eac9376666a5ccbfb013103bbef31ae152e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.4.tgz","fileCount":12,"integrity":"sha512-3Ldoh6OKHn64ZyxO9LE80DLNgGtUPN6YwGL00zajPAsD5z5KEiZx6/srPMzOvlHAnSDa0RI99kKvO1vc/7p5Nw==","signatures":[{"sig":"MEQCIEobcN8beREA9qYdN/efczcjaVNHTeASEXpmTDT4F35RAiBYj5ltzh39VQRCka8p6AbCswimWQOSjPGOVWp7+K5tmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb8z19CRA9TVsSAnZWagAAHpcP/iCfGQoTJNHMDuqZfD6u\nM4NGHdp89lPJwMbGFGbljbLZLccxvvbQEkmQu9ArBemAk6wPSs19817Vkqpt\nuclohsxbzI6mSMs8xKe/nKgs/Dr/Jc5fHMk2jDmYAxJqMuHCg4np1vAgBSOq\nGyaNqnz5i7pUbPRZcNSUpC/UVVHn5CXA1e0XvErEkOcVJ7Z/qDgoHr/GBxhv\nTgwJ8vwwNZ5lji4bpNBgcEqOKEBzmuQGt3PyiFu4TvLL0IecSLh7B1u81lET\nrD2z7tK1/gFChW/N8y8cLEizJPWTQ54lVtO9WUbGvc0fSrdJE+pgQPGtWyYd\nkCjWP3CSLKYDJanPODLy+nYxMT/mO/p/3pYFrjHgERQL4TDRUfOR+BW6gvmF\nqU08xeLDi2M9H6/lSk1qaMq2dnp4bIBcwHlRSnfvrayU0xHhYMydahRHV8cM\nxaDLK7O8+/9Hnw/1RfE7gcWBgqT17q0TD7keBXQprKRLkn6dyVQY5WjeXl+t\n414sTP/16nY1+iHMg0l/v5MA8ODYl+xImTVs7EjAsosc/G0moRR8yzPQHNUd\nxaKWwNGv5iBDQClOvONyIl1W8QfnTfC70rHYTfVRoFvpimjX/J3PO6bQ327a\nQArHEMK3e81H+zPBjfn6gfGPWs7EFVq9PNg4uappyotNCSrXJh9FT06JGk84\n27FK\r\n=Bsii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0-rc.4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.4_1542667644290_0.5982694093685856","host":"s3://npm-registry-packages"}},"2.1.6":{"name":"primer-forms","version":"2.1.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7c8b67533859a3026903509038d92a9f62eddb3b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6.tgz","fileCount":12,"integrity":"sha512-s0ggx0KNIYQCCuiWNJ/OcWAXHIucjbqZKkUS3IqEQH+/MlUTM31N/gRc5c4bPkZZPCOvroORc5qs5z2z5sMjGg==","signatures":[{"sig":"MEUCIQCkojNZTwZfamj3HC+sZF5Oe27gP5tuNqmnVjNdBmyYawIgLdcp1M+YiXoCaDsTu9ewcAPk8ioyK1y8bnSQ8l2mdzg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87688,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb80+eCRA9TVsSAnZWagAAa+gP/3lkLKy3DlknI7Z09P5E\naQ+YlPqNqz9+2uaaP+N0hF54hgdx0Hmn6TvJYwlSIKzuAJhF6u61JDDR/2Ub\nqis0ArUS5L2xHSx5CMUX6lCOG4R/8SSfC7RhJAW8c9oZTPnKM6bkGn9ErDB0\nC8RZjob8qXZ4/A115C5XyzKRaqK9oZl6mlzwRoHnr/3cm1Pgp5NlFOv5DLbQ\n5ocmOVlCuCGKpkJUXPZWQgQasfmmwn3k04Hp3qBUAas2HiMxMgjRp3ASXTAm\nq6Yj95qHhQF5V4VkcxkDVQ+TYJGVUuNun/AshflGYwXwL7GKSlc+h+hkipO6\nsampWUFcxcbUKmK0AqL81arP+ZauX1qF29e4hJkKewzjs1SISg6OEL+RUrrr\n1rLFvkrCF86Hqp35ppRUTMarb4q9pTS0tZxgoKYUwEvPydjv50ZQmfd6gjO1\nDfa2rnyC41l2RIvzOHMZYI3shZYpYELYoTwI8XfOHYEloSDRffv3clWj/hw1\nF6YrT0x4gdtB+fH0ltJo0ikprZiXy9jLFL145i5HjBnywHAPb8rDfkI8bJrn\n9V6PEFZ9M8TYZV/sOsQByHaSVSmV+Eygc38K7QJh9ZPKhQiUPPbj4C5eUKos\nslPcQiSDpKfkD914yeGpfEBuBIdbAL6/Uz+NVwnGfo+BJzahIXCX7KD2FCp2\nr1PF\r\n=XUZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.12.0","dependencies":{"primer-support":"4.7.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6_1542672285596_0.74452006271627","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ab2b4e17":{"name":"primer-forms","version":"2.2.0-alpha.ab2b4e17","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ab2b4e17","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b3ad024dee7751280361b12c14ed77150d2d66d1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ab2b4e17.tgz","fileCount":12,"integrity":"sha512-RwnFmyho7/mUQnFqAToV+C1TTqGEB7XGwCN/tCV87g5S5u5vgNCFK4DZAWMPZ6yZM7WemMd7dQMEF7bPPBPbvQ==","signatures":[{"sig":"MEUCIQDJu0MI4zsd0NBMWgJStUZYszXQQBCVHb1BxZVKituk0QIgMRguHv0CvbMwcQKKQrxzoNdz859oGZ6UvNxZU60JSOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9FSvCRA9TVsSAnZWagAArhAQAIeWjwzDgDo/lX3wpXUh\nBPmgt2oQxvDXJF9L89lYzkpknbuPZy0tUN9pxJQogQbsgAPb7PLZpuVy9VrD\neAEZOUEx2xt0QiSZ48LQaTUWtN8N+SdqUUdDzG7wpUPuhO2ySs2NxyCdUjzu\nIACO/frzUCf70goaCclcl4X49qr9YTIY0gFg056LgGVpgulazF/lTqxDfTOw\najYoVKsBzpgsEK8WX9fim7zGPkCzitjvy4qkQq/9kbBtGbLaH6km8tbpZOtl\nShVhIgfhw2DhSdsDssz0bNgH6Ll0PF2kNVn3/zMPHOTdmRjVexuEX4Q0I0FK\nQZ34WGg1cXyFniNfI3Kg3A9ENnGb8SW3ifxw1/iAf56Nkp4pixSNKTVKSpWy\nub192ZrHoxwZO/4LtqFThXW3tEFHytjUFdl3VokaalEXNBEFxK7VIbn9YCMF\nAAW4aj5M9ZTCHcOVTO/VnN8FNbvrgbdHvgztp6TTL9+kHKHEhdZEvsJMugLU\nzsM6/ApRLmh3ETt+N2S2hTybTlfFDU/dGMsXZ8wmxDw0Y2WFmxMbfGqPTWPS\nKqTlqvAUgBr+fLlM7408m1ZP/2+9Tt4ZuHf5EkY5V2+k2BwouRxOqYFJe2Dj\nDWxq67ItK42sIizx6bMXxWHWvVbAYevAIxynVTyAaSwsDMCwEMKeCODEb/Yx\npzXf\r\n=JlEC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.ab2b4e17"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ab2b4e17_1542739119036_0.3715651485300746","host":"s3://npm-registry-packages"}},"2.2.0-alpha.62009446":{"name":"primer-forms","version":"2.2.0-alpha.62009446","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.62009446","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f77512404b75b7116d845edb18e50fda2e6f251e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.62009446.tgz","fileCount":12,"integrity":"sha512-492ChO/cbFetNgr9f0Cy/PDab83SJ/iM75TJ2hb9vy5Bpc894rCFmFdJftnh6Mrz3me/IBLmgh9P3gpzodVbOA==","signatures":[{"sig":"MEUCIGY6EpVVoIAIPJkf3y3kqz9MYSuTX5DniV7PL246eHCMAiEAjLGlSlyf6QrNxzyDSvLGF5FlM8b3T82ZrrEKf20NDRA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb9FYhCRA9TVsSAnZWagAAYm0P/1Oqmx2QAiCHbfjEyRZ8\nlOx3ut+SbvnxdiicgRkAnXFKHsxGYrIB5yLJZbqxIcdqrAgnvgVir5BOw4HU\nd1Ydv8TtzoqSYQnbwN0dXje1HhoULqEBW5CsuzbQkJAXH/a1DNJlw9ltpfsH\ns8syBFxaxw5hTVQLzu5DLjwzsrcevC5/kt1GXz52HGswztnRj6xzD8eu3YkN\nzyRztOUSPvkc1sJRbhkEtfRfDfQz/jNv+Me2csTEMt9Ypd+wfBM+a3Y+azMl\nzG/7Ck6OILE6U8QuPKVR+7d94L2ozBd1odDs+OTumH7YC6Rgv9yzKkuLy6S3\nmA1Ega6SFOmpY4nCeU/G7slWMs0wZhFTBnz+hiJ9kQr9wxOeanZwLgPZBDx7\nHKZbDBX8dGLaS32/VJUql2H26+rHwY0+kq8kmezsjIO1+X7InhauMt/aRAUB\n0YZTL55HXmXSvvrcN8bxLIU6IB6ku2gHcGMeiMnyCNHVCpNAyjuhi47OBd/3\nCXGcftTzkBXEIA/BNcfYVjBtyWMEqFB2I3VLypczvqYIfswy5JtYkX+J47Yl\nBNa6EcUb1uVHnkPDiZHP67zv97i9a/Zn3bKlDWmzywx8NJ6bEWVr1auxuHEa\nJad1eM0EXHaUdMCKTprlQcg0GpvqF39XHnmh8txGVTQhss+FCdWFPC7pGtia\nRNBT\r\n=V4Yh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.62009446"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.62009446_1542739489250_0.25915431907514264","host":"s3://npm-registry-packages"}},"2.2.0-alpha.bc9c43da":{"name":"primer-forms","version":"2.2.0-alpha.bc9c43da","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.bc9c43da","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8b6dd8833b2a1a1b36275e09bcb98795228a50c6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.bc9c43da.tgz","fileCount":12,"integrity":"sha512-V6/fk3Jkwlyb0rUwUlLgpD6CR+ofyJPQUVoYWSi7S31mCKacbXg53h5KVYD3lu6QY39xGQ0Sctml0qITEmP7OA==","signatures":[{"sig":"MEQCICwS+Mh8EKjbgMN94tMivKrWVgY8TOO+2lm8PfEplSURAiBh7lggE4EJF05r4vQVlNcqp1DOJ4oxCzEJwn93f6RI3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb/E4KCRA9TVsSAnZWagAAbxoP/2pbrGws/Q2WDTq22bZ+\nFla28o4DlJRoAa/RbF4AwQ+wi7mb9KQtvHcI9vt7YZsiy9Nx7yPbFv1UgGPP\nCn0Io8wps/tZYx0ZnNgp1AjUJkiezQi0SwlqZkhU3Ui6AhhCrQQzp8vnbPlF\nGJzCz/+agKQPg9czGto1cptLXlmicjJg0ups+EatlMYqBKr5pWjWAUJVJ0hP\nD1uLip6kgQ1z5fN/QcAF8UHqsp6NdAEK8kY+NZAiXQqeaQEgsAiNd943v3Jx\nvkK7p5oqoJfsNxxqTpc9XK1f2OjjWbRVFR+uKOKGHfnXhoFE+BJOoZUSpx0v\nEyfU2Af64TDSpjAYppQppqo15ATUITSW9+dof4UQLJ5EimNuSyNQKvy1avbJ\nvUc1Fc1b4j4yOMEbbM9+OztakEKfZSU/54xRkYngwceOuKpbfen7s0zoG2d9\nhnTwziMemY/PiTLE8glcGnqDKJtt+2pyYKI7wccWdx/DIXdc2MUuWkYNd9lJ\n+ralBNI9GrqfY3G6dmAuK5vGI1ZNCUMgQJQny9ulG4u5I/Ch9uxgtmhZBRGX\ntlM1sDBJFzT44MosUCYt/EKnPULBbVTGE/dQVDuiiwsbGo+mVm+KKEw7WQYn\nIyx3QxFB9PCJblIFVbtn96qdQViA4qApn/F78cmXLGSYRXSSooHO2BECGXlA\n/bWS\r\n=0NUo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.13.0","dependencies":{"primer-support":"4.8.0-alpha.bc9c43da"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.bc9c43da_1543261706104_0.153448814907148","host":"s3://npm-registry-packages"}},"2.2.0-alpha.589611fb":{"name":"primer-forms","version":"2.2.0-alpha.589611fb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.589611fb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"acf26e6b4decd556bfd5cc952fb07371433a08e8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.589611fb.tgz","fileCount":12,"integrity":"sha512-3OOxIdmGVDnKm+1YpnWD8BBmknzzI/yHBJ7QwJw6eVJBI1vmF9qTGxBW6HqA6qzoHLzOK9Ds0xzHMS0HptHm2g==","signatures":[{"sig":"MEUCIEvUVLjQK27ezvEmSjGSJURzfrfigEVk+fDxeliQSb+TAiEA8z32PODOtFuJ+zbSwY8fgnDszDdRwWon/qpC0nvXDfQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAC5qCRA9TVsSAnZWagAAhEoP/iNyDvCe9eBt36w6uSRv\n4KTQYJsC2mtwrezZFXN9YdD4dNW/Pwi6jtdsrDNhuOoFwqhfzoqUH7eY9IWg\na0SBDEtso9k1YUQ2+DiksycCWed1oYEaM0ZVUKiBkP1hl8C7cUTF8i1W1ZoL\nJSG3zqCXPz115l9obYr1WAm+CKE7R0yCdcYbE7UZ59XSApAAbt9Nbo1fZBFW\nIr9UKUFS7RnvanBRTUDNxuINeiyJNdHTbHwkJ2eSL/3bxQDkZIZfkNrDN04j\ndhmzxgd5pSDPP4ywngwcPJMZZ3gPXhFhjA94kQMJF93cKEZcpus0srd5KObo\niFUeV0G2HSLnjzb0Un9oNb0QYEBlowW4y8oVFa4a5h/k+BteLYHexoE+AUO5\nr3d2mFEffX40utyi3bCCqCEBZgkAWPgCj8CLeeZhSkX2z6jqIoURh67dRO+A\n0Np7LI6BORdG++4A1b7c6MY4LD0v3BEIiQ6KMJsREaru2RJLPp8lE1S12xA+\n6sIHCM+YUULl4umLuJiWbnHkbMapGXbdEjmUauj3ATtl4ZPdTNE/Ac4BKtIz\nSewZTh7oyuPfFRSgLkvb6SZmBT72a/PGmPHUR4cwn7yRGdsF3Mtc8DW7/vfl\n4ORneR87Kzou9nAVDbZGY2I1VnPVKtmvB7MnK768uaEQq7OCuKLyNczey7/n\nal9Q\r\n=uwvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.589611fb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.589611fb_1543515753170_0.4844533070453443","host":"s3://npm-registry-packages"}},"2.2.0-alpha.640adae6":{"name":"primer-forms","version":"2.2.0-alpha.640adae6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.640adae6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b4764f4863ae47526bd4a1c5191e9bf93fd9a0d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.640adae6.tgz","fileCount":12,"integrity":"sha512-SgdxgAuV8H0dTlzXkG1oVjrDiazjJe0FgzLdkMP5E982dg4rMg6dRAjdVxA2pIxexwwcG5brlXwqnThfed3qKw==","signatures":[{"sig":"MEUCIQCOifKk4NEGr5rwT+jguNDcH6zeKuiNEJiUY1kJszg+ZgIgAbLpujfpYHudFEib+bNjL6Q54Js6uKGrvUywrkB9J48=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAYTMCRA9TVsSAnZWagAAVewP/0DbcFErcGKw7zjOXKjh\nmUZfhgupjug7E+rcE5gYn9ogodAebl8nrcaQgrh3e6nxyZ6Aq9l8pnyBiBbx\nKSN11196845PbLFFNd/rHsMF3PCmvSpedloCXyuhduTl1VbqKw5Kc9ZbaKm3\nisekpngAd9izYrVgPOI8YC4wXOkj+Sb0nvQr6Sv2LvyZbhUiK+7At4xbgPLW\n9tUlQrDo6rv7yYm8TvW5q3wUsd+VNl3PWy0c5U+NgOnEdsbVcavwJMds2jDM\nBuBdbJHuz/zhvcWihz0W6ttMwM2rdX4jXh7rkpZ39nGY7RMAbn3YWtr2CA+5\ny4beBKBoHkSYaDTJ0NRFkLtGXCt26e0Kel7A7LM6Pju8KdBtLWeKV9EhVl27\nFNSE3wCTUa2WJxUrvihfj2Xoe+7VVritsxBG6wpy6i79cgsGjmCFefdcytYo\nkmyAxxCHcnntfJ6F5d6bc6EMIvIRT502jh5cCdFjH49IoJPTgkWx9AI56JgG\na/Fh9qwS9b/uwpDno4EgTqFXdjfbgZP1dLw8eNH0rg8V5X7FisP1VTZPkHCQ\nunlBfaEYd8c3NDzd/nLhq4a/BVIgqPOVyHu0DNGeIgMD55ZtcWZjGu9wKDxp\nYnojbEqQzFlJtnuzwpZ5F1ifLXqDL8T8Fi+t+0+lg88vR1/qnmzbXCUqI3hI\nproo\r\n=fANI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.640adae6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.640adae6_1543603403326_0.6545738477435243","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9abc2666":{"name":"primer-forms","version":"2.2.0-alpha.9abc2666","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9abc2666","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1a3d47d2ef118bfdbcbcc09b75febdab11819937","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9abc2666.tgz","fileCount":12,"integrity":"sha512-mwFDXlr2hCacC+oITmK8B9jlwnJ/zlo/lOWah4baBeNoC9uMBOMZV4EryJnLKWfOxVlpduamOPRbW+AykVtqSA==","signatures":[{"sig":"MEYCIQDHwV7JropIBJX/0FATTckL+gArzGebVQyJ4Un72Kzb3AIhAN1kBOfvMnV24C2GSFLCLl1j2bHco1P4NkTTn3YIX7Ru","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAasBCRA9TVsSAnZWagAAPPgP/1axx1qQajeyeONiDEBK\nHpwEA2KFOSaCIB8IXoxcuAI5Y0pBdTjjwoQsJQK3DnQGpgtyxED4ry47ydBw\nPDk/1tRYsUYYRYtQ2lH0QugPuXx0E+4xV9n2vlD2Lpzp23FNku1JYaeolT5V\n2AcCblSUQafwjO4WTar49vmSGL6UKOBpakjOJTKZxr2xkyLDcsaJZNAwa0VT\nIoQWf6Pw8tfYbJFf6mz9EbnXh/bXeZD7x95KQyLBmgG7xFlyOf7aMgyodYfg\n8ORRG59kCkTzk+Y9ddnVXKozE5jB1UN4lEne8InP0giK5llaVSFQXmk1zrMx\ndeUm/27+JgIJLDg4Cj/Nss/w72VwzHQ7FR7IvM38Eqd043D17ftEr/jqhZ0t\n8WjzTPacQK9j4ktL56pYGEkIlphWdKhUf7SAY+Subo74+7Hbh8v6g9LQdz/7\nbzLQt4kykLZE+F9ax7UDXt6bcHW30GI0YD9oqFUs2naEMVY/twNfFOGh6Gs8\nBnsLByh+uIQqC9V/FEzNjaqOGvzQJSi5BKTlAZ5HPDgYHI0JJQ9MG3GReBFo\n5tIob7TVWntShqYW6L/ZC5FvL6693NIVDClvagXXk9jd8f94TST+zu+QYc0o\nh9EH4WYuo4Rj+63+NgZzJpBmgdHb++PNfaikcOrFq/CNzfMKI/ijUMg4gph7\nGswB\r\n=c24n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.9abc2666"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9abc2666_1543613184596_0.9951294612632677","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c96e9341":{"name":"primer-forms","version":"2.2.0-alpha.c96e9341","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c96e9341","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"660de45938e471cbbd69bfacbb19681d8edf5d32","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c96e9341.tgz","fileCount":12,"integrity":"sha512-N4evEq0v3UNUVJu63QBUhhI6Nl+cwj/I8s1iLgb4nfZfy6YKky+v1Jjih5bx2FZPbY7so4O8n+RKbndf5hVKJg==","signatures":[{"sig":"MEUCIQDXb7RNiffjgRzX5kzwHWPW2G1LLeanb+YppLj2VsRwIQIgPeUUje9yD1WS8r4BiundUfk7I9anwd66l4w/CTNpCMA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdUjCRA9TVsSAnZWagAAJ4oP/A7NtA9WbSn2RFkAi6j+\nI8pAwIoGhahBLC028pV+qf9K64hcHIA9M8b4jGknIrhF+nOt0bU7aSSHrhvj\nQPz6xf/DVs/unXo2BAObKVLGwhqfhKNG7Nl7JmzxaHbWQZ4CcnaL0sKhT4T1\nGSatZgN7hWMM/midF+GA2/Ho0th/EsglfrbI9a7308LW6+8FVCHhcHR33Qld\nIm3Gi5fbniwRfn2f70bfVIEAFkGGpHeWXcC8ipE2UtRoWNt4Mc8N1jOkodVy\nLBvEy5oVBVvfJIdYf95AG/AhCa40iKxyPNYbU0kiY3EwIZ9aXGUmzeFWQJvT\nlzoaMdZ2Fm0MnRkgl4lrEWFrx60p4b8biGgw6tE7x1/1h9ekkCvYWEsoboYw\nS1027oFRJWkAK/bG5AkrMdrOS45UY4r7rXAw1eIN872lamQCQe1mjG5mc8xv\ncTGsfZXvtDvXGgVwECUe/B6bes2k1fzW+3jCDwRS08c7I2aiId+Pzcd6fsmw\nErboeeWRGHY86hPxdIkEJ7PUXBfdWU7CbAlWBOXrCs7lwABpN6nRb1INjKKW\n46rzqq9Zc+tLlBsH3XvB48kqYsjmhDwjn9nCCCRA6+R83x9LWxMtIQ+Ngjum\n+Jq3ODJMzXEltDWrL2dXzs4LVeHFbJNRn8xUZm+GPnAxWiuVeCvd6rDDk+Ej\nDtW+\r\n=4iNn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c96e9341"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c96e9341_1543623970937_0.3018588590759861","host":"s3://npm-registry-packages"}},"2.2.0-alpha.920cbb94":{"name":"primer-forms","version":"2.2.0-alpha.920cbb94","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.920cbb94","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"38e62e9102cc1317e2e18ef57645ec89f82bdf31","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.920cbb94.tgz","fileCount":12,"integrity":"sha512-DVBqv0WADtGqOfHxpqLoGqqG+gZxFJvfdLjSdc5ftBIWfP+VGzlfTR1yjUKiLqmBkuWl9iwfStCWINH9R0jCKg==","signatures":[{"sig":"MEYCIQCsyz9avYMzRyby8BI7RTFYyGhPgUrSEDlqIs4MzKZTPwIhAIIlo0dOv/1yuhEZ+lnzT+FyuHC3vw+xe09oG+Ew07DO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdcjCRA9TVsSAnZWagAAbkEP/i25ZGOHHzbk1B79W67n\nYSbPCQ0194jz+ed0ya5FCgw9RzIta1Wkk/x0rjx9tzZ+X3UNxvrR9KqkilMX\nU07juSZ2OeBfa+zzqNxjqXh3xZusOcz6A3o08tF/acPuDfq7gGNpJIg9Vhnm\nurWNhIQJWopFNJZum4/UhEYYQ1pVOZEF8lc0pdKN+Ja/KMnKklQffXA018h4\nOLe5+YqfUdP2G4U+XZhellxl3k7MMJbCXs0VR242+wt2LPsM0Nm5T2i0HqTl\nXCsZ7G3LSOyLyiKMdp3LjBGGfx/eHmUcpKT0jvXp6B/YM5FeRLCjD9opv5aK\n/q3ZOXuyUjz8Z3oBjseZcZ5TrS/tBA/wjKX5278843GUBJFqFr3eRPILtAUe\n4M2ipIKxzuqxRszdNw9ZCali2yGRr7agDBxkTOVSTGiUnVawWdQs5EuCbx0X\nbO1JA4Yc9F/mq//WNaapnGDfBmS4wOjHjl1K6357wqZ6qZcYPDPgIJqsAqO8\nSrJX5DgM0ZhUxNUSsBZg31MPed0N7+NARQihP4zebXHESzg5YzHmNfDsIOZW\n7Pb0SE78ByxNXBu1+l5TiyixYoV93c4cVn+py1b2qEO1g1prQn2yqGmLTZHL\nzJ7gtCPDspMcgMG58Rf8avlo9qO7BEBnDTWLq9v/dMRtoWknAzv0IhULCezt\nshBZ\r\n=Kozm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.920cbb94"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.920cbb94_1543624482634_0.6384931482317611","host":"s3://npm-registry-packages"}},"2.2.0-alpha.10b12bd7":{"name":"primer-forms","version":"2.2.0-alpha.10b12bd7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.10b12bd7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7e9d690201321139ebedef0fb03bf8dbdcb2bb52","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.10b12bd7.tgz","fileCount":12,"integrity":"sha512-4UD94NEwXbybPpQIMVIV0QYSTKGldmALLv713NoAZnNbpRT+LZJ8U0aMc7V8XuGszA3TknNmAnmeZ3+2ATA/ZQ==","signatures":[{"sig":"MEUCIQDfh4OLa7gPxyocY09sgJ31IzSkKfgwEc94EXjBuFLd8AIgMOH0vzRwYCAjclxi0zAybwb4yyQpJFYnt/gP8gyEb60=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdqgCRA9TVsSAnZWagAA+PoP/1vfLGtVdtYv0C1DQTzP\nlOt/Bo823QTSlXCyLzxP11vROb2DX1vfPn5jyvdJHZSwe1G112yVmNKz6z6h\nvuxlDstty/JM88ioKSSM7yFY/YQbZiP2osfGSykXxnis0PsYfHNqhFyAkTO3\n7909e8gdCfr9MHlFaJg25Or0mnqB9//g7whGrBo5aE8pAmmssq2c/wx37v1j\njmij5lCyLbsakgGhQcAYAwx+yh8/ls1XYeC6IPW0cWHrtYFZqxNfDZvI4C13\nF/glzO6ZkgSBOB/6Wsnq9PC7i7ByDBpykZG+hTIpfrzcV3QBNbftLm6XDwI/\nogzJU/8vH/+u5+KZ222dct7nQfRUd+2lTbNOjwkOEH/WIuN5uvnjhFEWihqw\nvWwoNPKRNsXvrKhswo6iqLSPOfngwNwFoA6xd8khP9o8zlLuJH9H16h450xV\np5Q8YfkBOVGkOvmJ5xmOZ4MLy9spKh+R0VsO87BKyjdkH6Ubk+qU5YSdz4gy\nvWu5GzPr0HBLURLpUmwvl5ADcIfXLKZbLWtFwoWxuD74daqnVItRtA5g6iwc\nD+eVkV5xgrBEdz+a5/sw18rSrCCzABq1eQlapWWIjkRL574V29rL9Ez59ekL\npQkKeqvulP+6COoZzEJnsprC3oqAU0CUPMDGGqJBmkLyo4AHnznbaLF0ydAo\nRF3V\r\n=ZIfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.10b12bd7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.10b12bd7_1543625375435_0.373317461250527","host":"s3://npm-registry-packages"}},"2.2.0-alpha.60374339":{"name":"primer-forms","version":"2.2.0-alpha.60374339","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.60374339","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"81f0d34047101aefead30fefb7392c43ce39e154","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.60374339.tgz","fileCount":12,"integrity":"sha512-+5Yu1gpgE41hbGLAr/huAaMoFMeRVkTWytaQ+aEZjv49GuyxI0B9ZIVire26yNkc8T9C82cLH/UvMzrhZRX5ug==","signatures":[{"sig":"MEUCIQDn1iodpNgpQ/jdXAzE3okgp+Jjh9xj0P50EmvMPXrDDAIgJXs1linKv7IDDIOz0Z95N3iHatCC1zAUdW44uL1BKKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAdshCRA9TVsSAnZWagAAiMgP+gKIsmdePTJGwcdqX//E\nPueUT7EpssPoQpDeXKLM9v8NWsjYHg6BEGil5rtaap3BxSZGdg+PZLcPU00h\nqb3RsEJrW7BgoapNeQ2EpbbWUGiiw3FYOJpYKduOoNcTGXWqDPixr/9P2sOV\nuXJZ8UjWA48dEHqY5ijy9Eefwbp9Y9+OvZ0e2QB6wH/Wfd33gLjJbIurJfgf\nJvSyDT8KYcmBh3DFrBrD9o246XK6PRgkzFiTK8xAo6b9ZFwo+XEo4rtQBQSW\ne5rS7DnSSHqqfLdG/noeIqdy8QsU45hZ0yCke6Bt9UVpmTK5waClrSWJ9GPM\nR64LFkuLDkDzxtcS6ke7/ffM1FrTiVYYA4PFgm59f8WLoIyYQ1NV+ufMk3AW\nkhO1i3WcPIBLKCSKgGoJGPoaZtnowQ+Odo6hW7MUa6LQHe6D1SJ3b+FDUfhE\nlqpXTmG9bmtp8ZgcG5vbIpIU4akhrW2ZJv6RiVIzE42nsW0D0+F1+zUj/EHE\nb7U3+kp2DZrLcIaw0NfeA0RkC1IoU6vkBtyplGX+A0W3N2R6jE+sBwV8nIzL\nfwu9r5reUPYnAV8KUcYxJSXFWx2g8m1Ux4VauG+QPRuG7JfprnAvOfQXfE4P\nrfwUybjJxfUYWbMH23iQYgR/v7lVUbaeukauFNk4yEDY8rT8dxOKpxcrDquY\nAreI\r\n=82bS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.60374339"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.60374339_1543625504734_0.2407057572115281","host":"s3://npm-registry-packages"}},"2.2.0-alpha.72bcb091":{"name":"primer-forms","version":"2.2.0-alpha.72bcb091","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.72bcb091","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"53cc6487ec7da86805247ee77f8010d6c03b4487","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.72bcb091.tgz","fileCount":12,"integrity":"sha512-uOX4fb/f1RaPnLbNFiWCx3obbAk3141rHO+E8k27KdPzbfoQDbkSkLchX6Xyr/aHal9y89TIpPg5xzbeoX/VMg==","signatures":[{"sig":"MEQCIAOowGGO1IFj8ckULRR5XULiGBKp5bzWdkd18dH+JXsNAiBT9SGfXNOdsaY2O11/JyZYEFfbEY0a17ly7tvs3OQnMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBuYrCRA9TVsSAnZWagAAlwoP/1XQKLTGC7If4CimFp64\nHdukUQzfnNQ0bJ7abCdPEi373CnhT9by4L8X1x1tihIsjn39GQPQqbomppPK\n4ey2dKn+afYQOR546+O4OwUv8DLGPSg6pqKx5eGMOgHWfE7fEm96PaVS7RkV\nR+1JNnh1veAYBSQ6lcD7vMpMI5VhIGmU3A03rPTH+ZwlwpAt2RFC1ZVN81RB\nYmH1e5fvY2LgjubaSDDyde6ib6Gj9NHCCEllSk2gSzj6i3VWVG+UCioGmoXx\nzlVTpnwVo8AIhtoB+r7xqN7PxptQAgR0epqku3Mc3p4CjSbbK5F1G930Hrs0\nC5WF9PU6GOtmZPb980SOF4R0cuU/+aMeLcLuTlb+WSl19nT57RhL0OmGweex\n6AB9qsWCFyRyHxHApb4sznjz9Aln/zcqy0UpHOf+4Ye/4cxBULFOL3t4f27n\nJHUwHchqckmwDPMQ/0tOYuo+3sFH+L38MnEnFgqnHIp7+Vz2i3FiZWMh/kvj\n26Ep8D9Z4YIk5YbIcwbSSorzdqZq+gXyzE66KiKDHajS5IlubaWmlMQSzshg\nLcCcsoQugl397uawfbD+CxO9STY5OPcPlYO3Sa/GkP8vF+TnrVKulnev7vwl\n+YpF/E3gLuyHp8vlXSC6rug8xPjcioWifV1K5fvoZe9BOMqQNYWrl+egzpjh\n+w+8\r\n=cZza\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.72bcb091"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.72bcb091_1543956011069_0.4765087435792301","host":"s3://npm-registry-packages"}},"2.2.0-alpha.406e3771":{"name":"primer-forms","version":"2.2.0-alpha.406e3771","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.406e3771","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"da645d4e79825ece4b5533d4bd701aa786446b49","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.406e3771.tgz","fileCount":12,"integrity":"sha512-4/bQG7F03lV/JM1GW+GKGWQLr6QCAHontbqLd+gDrax5XppzWdxpSlW7Uw8Icc/6M74F9G9+T1Ampg9xGQrxxw==","signatures":[{"sig":"MEYCIQCZA5SfP4Y6YS45fS4qjnHOjbuRx9iEpBwiFGI17b/gMQIhANyNe8g5fP0lBx63vKZXduW49NTGbG/AisiD3JQ2BZfM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB2tiCRA9TVsSAnZWagAA8/QP/2Zex5pMUpnpIG8xrT9F\nTAvdGNgVzXdGzGaIm8egyhuIzjQaiAmV8BstSpDv/FPRX215vBQqeRugWQwI\n5n7b2w+9zLj2T95jEhf/34vxgryITLKN1REdm1oXY1dYC8BPH7RRIgbJdE1R\nMV/CY9UlLOskCmCfr9hisHfY0mMAXLX05hpNQCYwSZnaTNtL63ZVg5BZyka9\nuEMcAcEYyWkyhymjlDjB6puH/FthaALuXvRLrt3z22rbFJeJjUU8W/yQh7AX\nDzS1SE3269umpD12shuI6u9NVURkUT123X5mVIo/WztCeHbOYD/M5U3gjrkE\nEWzH1gYto+2b6EqWRy99UhSSgmSdNlWTD3PSx1PH1aLPi7N7MeTEVKgxNBAZ\nANi+2yOSJUxb8hyBEw/jaQTwvzYB0dO7WL1F5cPUyyeIcwz3tlmKgxCSWp1g\nZTfyO+TLcU8Ad+XT7MKrheF36z6CEF1Bx6sWzDA9MhfvqZ2p3/DuWzT+fzzB\n2miZyq0FFwGjLLp8h7Nj/8ymxPRNX7HPRIknt/b7PKBAxKO0qyp3fATbQ2ns\nDjkhqrhlLVNPZTZWC3RHhqBpWlzbZrBmnJnXK56VPYVCN/XPgmCJeX8q3lnP\n6U0C+2Gh7GQiIr0Qboahlz8ui7XLEQ4IioeTcsmjCCnJZ72N/0clPrIWEIqM\nh3I3\r\n=/uY0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.406e3771"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.406e3771_1543990113363_0.18529731004816985","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7b492b62":{"name":"primer-forms","version":"2.2.0-alpha.7b492b62","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7b492b62","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"393585874dd3f7c9307bab640badd83c610fd118","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7b492b62.tgz","fileCount":12,"integrity":"sha512-ozS9k+j6vsOVE3yAZD2rxe+HkkX7h+MEcyDwSGoIEGrBpGuvwdmE2RbefazyPmgR/FYHvBcEL6M0dTsSPf2EOQ==","signatures":[{"sig":"MEYCIQDQFsI1FtmyTeknYf/8lzW6gwOG8rnBh/ZBYbO+U0WiTwIhAJ5uBaf+sMDQ9jrvSxyoHcYd0LfVh45jAAu0TNGlDYOJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB3WBCRA9TVsSAnZWagAAhsYP/iDAQ9hs/JbHWmOMrKSK\n6Zu/fnYBEgxTjON6oyfwbUCdykRJ24iB5AwXk7zhaNnJVFE/7g41fplYlN+9\n7fh0Yc7lN6sYCUErbzBdCgXBgqkyOlJFmIVcsApmL4DzenMa1Nj91FXOWMmO\n3VbfbfF1vfZLuFsTr7hleXNE6csWolT2rtX6hWA6WVFIHLs9wvif0BqRHyuO\nsD6U9XnfpEbwxmCQ3rNaAWqeqI3fWC3Hxd+eE+4l1b0QDxzJzCud0rZq1llc\nT863emicbGRafJHFPlzBqBbhiiBGbwPrJSU+hTRtwza+0A9Hf1OpnBfHCVCY\n6INbByrY72+W8f8l3NbIKD9IiTX1RN7J73RT/Tgh5EeEgSom9hlEHtgiCEf2\nVasrwqhlEBob2zwhSfhH9uGAePI+t7oQhrz2hWPjAZE7IgMraE5pURrbalKI\njrqkSKAVDcFxkYx9+6gijFHHAx3zNu81bbXMNSjJhUPXEVIeAR/pUOCjwgoc\nxHpPjoaVbdptNZRKuushGl4sLL9dkGzqQtVTbDaC2jCC9HxuuzQ95+APxXn5\nuQgsYvWzSA/IX1nFXPtGXEX4mcKhr9svsfhlFO/P/M+hmRPz5Kq7/B+AmfGU\nHa6r5dYl/LN6QJsl5IA8xrPPN0+yGFWhQ2KkPtd7AEjHh2TyHPUAFvkdpHXe\n3aLc\r\n=90TJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7b492b62"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7b492b62_1543992704569_0.30527802808262394","host":"s3://npm-registry-packages"}},"2.2.0-alpha.076a5833":{"name":"primer-forms","version":"2.2.0-alpha.076a5833","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.076a5833","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7f4df24b9185526c518236fe6e857bbb3bc89dbe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.076a5833.tgz","fileCount":12,"integrity":"sha512-ApGcfgk3hOrEmfXv9XfhA1ICuhxtvr3qxJZX77UZeEHMjnoO6OCBxrbDYl0ofQ4QUFspVCc799z+1FYBc+tnMg==","signatures":[{"sig":"MEUCIB0WIpqF2hUll3mHZwaaEFje2oXUmqWoIeDtjgUwNrXyAiEAyifaXlVdxX9WyQVWuZNytjZo1djtgoq9at7OWDLgqGM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB5wtCRA9TVsSAnZWagAAFgEP/RMtJIClzNIggynNI+Mz\nhYkoyOhxGlWGU2SzYGIvqCpQvvd5zneSwc3uU/OTBFHetsc+KnEdg/yDakOa\n+77hQBO41mGC1QNOTHa/2BFjwtY6yx0HPGlSh0XblvAp8J6fMJ0IDr6+/Lk2\npyMTDoA1w6oPN9JoSfVZrtD8yhRIIuioXBcFQvo+OJ6//ZgDZppSb8S96GOY\nyzcxrwmZxCfyLiMJ0MIWF0Ohh20SbgQw4Os87wyM8w58tixgQcnr3lgKTbfb\nHZxsAA9sFhyMOP6Y9QC1js/nQ2+z4J/mS9++xpFXelvs2jYCKnX0cQpYisub\nykA+gRcyY+y8Ssc4pV1rBgHWme8J3phk2+aaoNqHMvglRtzUNTuQU+Mqu751\nLeqbfV0PoXN9IboNFpeJUezBvoHcwOKGU8BuwLJLVoye5jLn8l5Ab5zuwHfk\n3AxCYPSx7VEuH31phXiiVqcs6EcelMPcHot1QqS/l3YfJn9iqKgvll8/SCEt\nuNCnjCrND/MSIlSPt9qw1rlPscgyq5CBVOC9FzZifPLAJ7xAm9JE64FPf7qU\nOsHAkE8kuuAUW7jvlw33v+NjJBfQMkaBcY0UlzBoUjKTk7JV4AYMZoS/7COa\ndbYFXaZxqMwIQnOAUaa89ZfZjEqMiGDc6FXnZuLuXp4x8Zw6D6rB9PpNSfZn\n4MqD\r\n=PVW9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.076a5833"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.076a5833_1544002604836_0.2517054885675183","host":"s3://npm-registry-packages"}},"2.2.0-alpha.87a7c3c7":{"name":"primer-forms","version":"2.2.0-alpha.87a7c3c7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.87a7c3c7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3775b0348467c2165de114cbec48c29674c71d48","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.87a7c3c7.tgz","fileCount":12,"integrity":"sha512-1TQZltgz0BpQMnY3Wxs5qLOEfRAgjwDQvYfzZ0s+4Sh/zSAqAI4kQy5FWllkmvmIDtFyzh1J6EO9rUvGpNzvCA==","signatures":[{"sig":"MEYCIQDMxs+yM11CWaDseboaLurwDaUY8TOIm+CueITanVMYYgIhAOvk66lrHEMgXFfC+DRfXNndAcRw2PNI+qVOuF1VAtIl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6ANCRA9TVsSAnZWagAA//4P/jpuJ+SNObU6DH+c+oWB\nJjE+UcKhLyln4WDL6ksIkOItPghO+UOCcNuGL9u6mWJTCFxvegZZukIzgv+D\nUdqcE7/qCnGmO9VhuxDkp557g2EZX9FsBTMFLrhi5/Y57gvlgv78rDsqltwO\neZezcOLa/jxqvV8X1NBn3v5RGVxl4G6DmNqJUHaqzpDcwLNMOfEAzkxgCTCn\nAeWTyROR6gND2O5SY1TiyJbDI570xAIgfJ7a6eKgDHuN7VdvE9/ZxfnwuaOZ\nuYtN11liQC7WM1+U+TOqLQlcj1cr2EzUZX1re6avvoGSLJg0JI38vKUv46RM\n9RV3aSsnEtaZ7bfoo1NpwCNZhee7lBaFzYaykSViDNGDHm0XwbeowsfMZ6gg\n3pIDGzb1jSxaNGM9/YuwF72jHrWeRobOui+eZle7hZyylLri3CrHTGmwXFiy\nGk8hSny8yEXKspJxD50HbmaQydB2wsShMs3i84QVos+1ZG7HMo78DrsKN08R\nfQyFRZQspWegeoq/tBxlrDzatzm+KH/DI9hdBaOEa10AkCfLDl6TlusMz8Ep\nRmwcoGynBzfZWvrZYjxfYzmSSLQDuumQ2gNYKlqCXoous6KV2FYRqIeMxbs6\nry1D4w4wm2qj8TBPzVf12D7NMw1T/F2uQzEt/m1eVgRLZjmEtclAVlZlRz1c\n7LcR\r\n=QkUz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.87a7c3c7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.87a7c3c7_1544003596523_0.015025931106721124","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2fb541e8":{"name":"primer-forms","version":"2.2.0-alpha.2fb541e8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2fb541e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d90d262c03f2b21d07d83088bd623ccace446e69","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2fb541e8.tgz","fileCount":12,"integrity":"sha512-vCV/ZpURL52qhhFuoPsq2Isphk3KucbuCwVeY/VrAA3YhRSyJeMK6ZiJc0UAePSfEh/bFZZGRsINGqBMBd+MaQ==","signatures":[{"sig":"MEUCIQCKhL5Cw+/Ky1GcApLrJJ35bVHedtoT9lBfaDTdvdF1PQIgarvyDEADfPCCrfFQDA5bCk8e3yKCThMe4hoVhOzZ/4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6GxCRA9TVsSAnZWagAAQm8QAIh3BjlzzCtQfowmDGi+\n1tGDi9iuTT0G83thd70BxV8WHgGKPojKY+VlzRNiNAOsN1QlC5LAvxS/V6rl\neyQHmN9SZ2qh+GL3YDm4NCPNEIWO0xHucrKVR3BRpOqHdMTbHQuuf5rvEiEL\nSKm8YBSU19GwQnQe8pTTVFLpbAGomsWb/RD90zUxMYLj5qmgRfLC1mjzfz3P\na1PNzs0grGyLDuJQXfvWW/cx6btgc4bamada5vCXw0Yz1w+mpngKNL6hERtZ\n4W0+RHKOfACr6O7mT96ga3zIvYQdOXokxG5tz6MBiHHYPZzPyhSJu5GeIBcA\nU6KxpVG08crVTibYY/kFIAJkOSYyedjr2FF3qVIMRaSUPaDUxbsUlkHgY5SY\nibiE+uaWyYEL34f1tNMOvpZsA1IOX7G7SmbyHDeyDX1KV+exEbfpx8E0nM9K\nil9cDmDQ2WwEMUZ7arGkPzsQT29etDbuQOYxAitAL9FxBys0A9W2FpNbhSCX\nm3zY1C04+nBDaX6eXxnfRCaZ3pFqNAQKTy/HG1LplufPQEUdZKp2LnbHkRqY\ntZbREQuUEk405getGQhTqMRHmyeX6B03PSDeS+jKwI7D+f9pCNqAa5rejzKu\nAvWQ7vjX6Tp+PKiJJvRO9oYSj/Ja5mr0+y8S36l7eT8mZS/sQNtn658xXw4F\n6BGk\r\n=jNr4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.2fb541e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2fb541e8_1544004016632_0.31981987661497757","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7ad3aaa6":{"name":"primer-forms","version":"2.2.0-alpha.7ad3aaa6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7ad3aaa6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7f0a78e28d2b2ff5d4953c41c4f548f41d15ab02","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7ad3aaa6.tgz","fileCount":12,"integrity":"sha512-2b0Ac2lqX5i//m5JLdF3uP91I+LuVPE7TgwWoEuabLw6sZ2v++1sRH4f4gHpI5ntYLYEqJXPgv8eXHrcCM4CMg==","signatures":[{"sig":"MEYCIQDUTprHlFIalsRdrNoQWf2GRgqUift8hOZPeTFRWMFqzgIhAKgGXiQL55ZF8F0K33yiRJBpEf5qyFU7r0BQ700ix7Xm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcB6HfCRA9TVsSAnZWagAA0DMP+wWTB5Og2aS2tPzRQfdZ\nE3J9tQPUd67GbjcDuaYK6o+m6+YAH0X4jXjxyO45A5EmHZe43MXq1WckcSMg\njqy5wtlAzoOkibubcsucCs7IirVLR/Y3ZmbSIMR18XA8uILpjEcBSUqPo4zd\nQ/24VlbGm2slDy5N6/FN9na5Mcg/7MBnpPFTpLVvfRejbZSnYpz7P/2u8sa3\nU89t6yIKjBHba1Hg1UiDDj9KRnpHPMPksHJP3uT8FXQRJzpmQYJluurQJuaO\nqaM6pR5sUnoaSmF19jWX2bcZDxwYwPNRqozghQr0V+e3ZOJ7Ibx1KMiVrYYj\nGTIS1PoUcQdTvJA8GgkIEjjH9QSveDLi1kSw038t19nwIr0kiRvWPEjAmX7v\n42hnzrbfNQ48lnzIKgk6RhqG6amLHUQQHDyLN8K6QCYiiT+/cP6wDXJpgEEk\ngi8vSeCKs6j5f8n9NIF91D7B9r2uvzZ22jlF7Ji4HNwS+JBMEIDy/7RAhswg\npfFr3UsCe3agVO3qVeuevAc4qf2sY/mV2lxgvhw+FXfY/5RSGUHfIik4zxne\n9WKXH8oaeSmZFFRYaTy1Bvh5dCo1JbFWugOWNr8eq4b4Z+qtvNLV64nriI8S\ned2XESNKbIF+fsIGtxduYFoFjJM2vqbwc7k93Z2oV/+MxAMp7xTZQAM9LC7x\nqXsS\r\n=Ktop\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7ad3aaa6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7ad3aaa6_1544004063178_0.6957083261103862","host":"s3://npm-registry-packages"}},"2.2.0-alpha.335e7a0f":{"name":"primer-forms","version":"2.2.0-alpha.335e7a0f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.335e7a0f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5bb0bf8a5cb35dc40c205d24ebfc1667f2eef10a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.335e7a0f.tgz","fileCount":12,"integrity":"sha512-01uNumGaR3JmtQ5kLz7zeQDIJ0i3TO1OvHD/1eugzv0gY7tAksV1Lhi3D+4pUTZQRDWNNfkRyuMl3zVT/KO0pA==","signatures":[{"sig":"MEUCIFNsJUb280uq87cBCa1XuD8k6NcgL+ep3DL+rjPjSaCEAiEA0OMJDpJu1nWJYYOFvcDGI+PqGP3IEXjN5UrvBl8isUE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCc5CRA9TVsSAnZWagAAsYQP+wR1F4lUlM+PlXBWFkAO\nqG/YvGQrREqgzUnsqE7tmMEVWi6yosRV51LaU5bbg3U1HGsER1oRMotst2yg\nQZrkwRhoPUjGn8cw8dWYWvwhwiSoCSc1hkJgfUCW8JLCjLoqZYqyzrhmfmPS\nwMMRfI9TBozn888/X6W+9McRDDfT2xHbXXOLwjl/XE4csSMfo5mYydomNb+H\n9WH1GhnlMIGVaixjq8LLb5QlN0by1+tlLPxAI0iIUjEoNRf5xVmwqRxHRsgD\nhDSBGARBkODtP3xr6mKtuISYqJ10KznakQndVNSmTE6DY4r5tV6d/QhikuTP\nxvsN6hmS+DO1Fwz7KdpgMWLge5McKa4LCEh7tv8z4QhN3No6L5MakMs4nvxe\nH5HKQtIoelPOUoKcl3xg5e8t/fa8WqLOeWAzPCytJIgx46axDbDr8Rln7P1I\nLg2n5bkewgAbiQ9ABYlgTrOSkL5sAjiUMUk0P0nWGDRWJ/TG3l6i3ix5TbkT\nYHpqtfq4ZlugLcGdZwzvi6ruuan+U0GeruqL2HTe9njY7sKXWvBvf8KQQfqo\n+A1pwGYaQ/4Gc2b83FAQX/jtkfXBIyXcACzwOApKOYlmEuJcGqHi5p4WxnC+\neGuNSCcaWfzVpSboE8D1PSht1nQ0jUEJtWIQzm9ZxFTUMVxwz/gMdeBWvlmz\nPyaC\r\n=r7ai\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.335e7a0f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.335e7a0f_1544038201042_0.5236015429366987","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1d903df8":{"name":"primer-forms","version":"2.2.0-alpha.1d903df8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1d903df8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"24b7b0a6e21a53bc9c200d217b983b88a4809a14","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1d903df8.tgz","fileCount":12,"integrity":"sha512-rd+27+05VLF4TADBGH7VLTfVchvD2F80LWu1uwdv8MBmwJhNBqgbtCkRzNXNd+osNxANnFUvft/elhhAoDVaOw==","signatures":[{"sig":"MEYCIQC1Ba9B+Q/6M9KNcbuWeKVSqaWAkpGHGaTGwr4WiMJ8qwIhAM19J46hB6xWekuNP7qNpRmkQpSX9W9JdEV2FtZZMYjM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCCpCCRA9TVsSAnZWagAAyB0P/Aq9xjVWJTtEg/zlE2R1\n1N91zbcan7W5OPmEJngF5693O+1YT0AKEmlpJ7SAhZib4wbzFn+Xj1U7Cbh1\nFRDXY97By/8E9D+WHZO2Z32rPsWpnn/ncmLZ322QTs2STBt6buMZJF1m1Q5N\nytVRlacQFw30SAHbV056fS3cLNTI63NlhTDX9nD9VQdE+9frlvmh+GaEr3ba\n/Pw76RT3ph+Qzt7sC8xKXmqVtPrBKalC6PCnxzP8OrAhGWPCOLE7acAP7g2C\nDWC6EKw0UJQ3jAUiDzG02pnd4Y5uvNIlWde8LV6Sey2hAWHGfmIn4M7P0btW\nd78FYNtTs7xOyZueVdWUQg9ngwCkhdcpURAwZHHnuGV00hX4J0fpptr3hXp8\n3l10VN/sqWxieH4Hbc+YWCkrD8b+QAiJ8KYU+YJZ9LPlsvdaEk2gNvcYehgY\nIYqSmDkNsadrPPAqFxh57rC3CNZDmpXUa1HNogWwxrP4ehYp7SghAz7B5PmY\n/nNiJ9jtET4AIbw3+FPp1C3CodJhsEO1IJvkxsHhrPgjyB2wPdnCd/TWCwBn\nUJFVE8xmwkx3LElfbIhbCM3feP4ScL2cIrNwB8gEzNEWa2NIUWwEfpDINweM\nZcctbL1lcZTkYsCcBLysY5X2LQt/rDQsx27LmnVsgdFbO50EmrbsxfQyNron\nzsn6\r\n=HQww\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.1d903df8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1d903df8_1544038978001_0.14308559483410144","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5505b4f9":{"name":"primer-forms","version":"2.2.0-alpha.5505b4f9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5505b4f9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"da447de57234ab1a25349667bc3ca64143d7f9cf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5505b4f9.tgz","fileCount":12,"integrity":"sha512-svOJYsNiBhdEWHx0FzVvywF3E1ZayDPqsD0mCVf1kASOxh7HduBoji0f4uw+scPnBKdsq0ismc2kBIOoxN5gRw==","signatures":[{"sig":"MEYCIQDJORJCVoEZZZai3Hpeyk0kRUC1FdMVrIYmC4COz06mmgIhAOJgmRRQQTf4LDtuGIZNX/XbwClQBpR6Mhe+riiY3f2R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCC5zCRA9TVsSAnZWagAA3mIQAJTWEo6e09JZJp66hdNt\nzbLFqVJPx7jI5HFJvS0RGa1Fj6s67TnRxzSJMqhVCigpmtBW5vWBvuEjecPJ\nx7c+ju0vlE55WmMVYxr+UWRMg1g9U4M+FI8Mq5Kk74RTUXsLdQIvqRhFF6Pm\n66m70yJtaoLJp8TTAErwbssH2CJmCxFFP7bnv2nF9oing3gcftpW8hAJ1Gjh\n1XwQ0AdTrDXxjUuSI9hrN7RgQuXltYp4OewGHf9VZ7gF1Arr53hTXPwpVtYB\nkuWJTG2ePj+/hBOlzkd1IMKG8zPAJs9MGJIyUBW02iz7GN6Q0+4xrL0vATlt\nTPv3Tx84ug4PB5w2B7t8wxEtTodryXcGYCrSn4Uc1MOR2NEX6rZVtbRX0zpW\njcxPcETr2tPM9ttXcQ32P5ow3E+ctCelHys8FX4ssK5bY/71LYyQ3Zdizxs5\nRJWVRk5ab8c0oEahLBnT2rQLmaGZJNdP2wMyUAEYsN1GQVD4PCgr3LSX1GW5\niV2hQHWNM6XeXuURhoDRtHEMi14maAR1AYc7XCtcHYRmhVcIZj4GxMhcwndH\nSDAyzItX2o+Ua3TDT9F/kskWNJa/XNFVVOLBGTh8R4nE32Cx3IgmzqsHflkV\n0nl3vRGOQOzVUKOZtCw0DEK7h8VMPInUrvqCy0iqDn8Qf5Kgo9005BJAGjBQ\nZ3o1\r\n=qHT3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.5505b4f9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5505b4f9_1544040050903_0.1232278116785952","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c9c2ddd0":{"name":"primer-forms","version":"2.2.0-alpha.c9c2ddd0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c9c2ddd0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"860494a33917388c5232561eabe905a54170998f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c9c2ddd0.tgz","fileCount":12,"integrity":"sha512-buqFw7Y8skGWONb+Spz186v1mHTltioKNLN1r5R4t3b4GlpRr8StJceNaM4Wq+h7YJ5te+S6ErWrxldT5SlbzA==","signatures":[{"sig":"MEUCIQDjmp36F2AhPNneW1X8bD+K32vGxpuE0M/TjARdikxWFgIgVQ0lZySJGjYzoXfJwMKSn9Y9mEH35AmXIannXiqnsGQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCHAJCRA9TVsSAnZWagAAIGcP/jVp0IcdIG/1cF1qYRC3\niMnxmFCkhAAB1iL7bYXfJ2oowS8D/E+xqzQ1jTFqvGSh06SAKmjCp846FHfm\npis8nGEAMBR5TaK4yfrTS8ak+2k9+JRyCPBLgRhipcTpoD21rcZP86uVh31X\n8enlxG4+6CPecrAfQf9aAp1QPBHpqMb2xWWAha6R2Hrnvypm7io4GiUV9PZ9\nF5Y4VOuEgei49cYnhcnYcV/pYHyoKgEiPFuPY3ZOwwmZ1rLgRPVBSLZiovGk\n04gJQri3xnGrlIZTnqMyw/z7prok4eduswT4uYkbGxh+6yJh+6ty+ZFekuu6\nywoVERc4XTbOPQScL/3KHj2nvBTgpZVHqEWpnrUX7V4m7ANCk3Y5LIqLs6rE\nMWBg+C+xg1/DB0n+1uvpyGae129EnG4Rpu87bhQDC/lAbhfkoYSaJs9OWKOC\nYle7ASbcor6PLXF8uRTebhF+6y7FPKC6aoiKRVuvTfHvJ1dkCFlm52Q5l5At\nGTC1o5JuYPWMc35KrPDabdRWUTNPl89CkNlf7JTavBCegUPpp6sPJqMB9oko\nPYU01+I7MWijb9nyz6EExefYilyTTwrdTbEmngnjFY6nJ+ChahJOaj5H96Cv\nlgzSBGawyBnl8ITQ41A81tPe/C0DJhJaqShJsawn5s1GUkB4EaFkqlJJmnSX\ncxRl\r\n=0vUq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c9c2ddd0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c9c2ddd0_1544056840534_0.19180757278261074","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3a835d8f":{"name":"primer-forms","version":"2.2.0-alpha.3a835d8f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3a835d8f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"99c25f2d0cff3840b5046d8eeaf7983fb4c0ee56","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3a835d8f.tgz","fileCount":12,"integrity":"sha512-KkKyhO76/G6DAE30w9LKqv9Gb/rmB3IDTsCh0hRFeRb5BEan0vYGCxbpW6IByKYBVSAOdeHusUTmggOhlP+rdA==","signatures":[{"sig":"MEYCIQDlu+MHJFijKq+EeU7gvsNWC1BmTtYaz86exzMHbYalAQIhAJuWPtMEyI7+RVAVPYjAhGLyGlaWnAYzBGy5Ivuw1orJ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCWyLCRA9TVsSAnZWagAAexEP/3EjHTXlA2yE92gmGprT\nvIL5sGdDwdPkWDBYXiZayJdg9RD5VsTtj8CmGbMz1eeSZaCSFwi5pzHm1hHB\n0bQsm19piS1UWgtMFS/64Ae2mrsBlTV1wAlXD3irKuUmTeW54tms68BCXFYm\nAIAbBFdv5RbKDMzSYp7VzN9OEizwAYlFiRuzTXr/BJhPJLcwixypRczDUdXe\nb/Ox+jJCq8Phviidq/z7Zrr4BZlkdu57+kB2us8AHNF5HsKswSuACIk1oT4k\nu7QCD5wMePDgVBglljsmzNy56LGXYBfnEMR1zbFdtaIc/bpKDHqyLPvR9oI1\nMvUi4A3ANCHSTotGy+5ydG2TIMSKZgv7cj2El/w1TEbXEAznl/JORmo9L1Yz\n5jTYvee8tIoU8Y2/woft4bfALrCZxy8AlZryWn+mCUfrsFVqeTC+7jPYqAYQ\neSD1Pj0NQSn5aoNXwkHHPOnw6TgbamwEYitWyzjZz9m8axljKgHtB8MrO9oz\nLapeA7BVehxZMdRyfYFDLgJWYuT/+NHjPxBOwH2S3eiqdyftVgV6N+x2hV++\nDEeSnVELwQ/m/a4hBQwv8W75skl33dVFYH/r2QRf8KnCFnWM+Gj38c/nAVjZ\n/QOBjbvL38gdsLfyAGTWCL6VTsyndMEdTARwrUCYNLBVrp4UjYAqQWLa/Zlc\n2FRS\r\n=Zp+a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.3a835d8f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3a835d8f_1544121482646_0.6734336063493798","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a4606fae":{"name":"primer-forms","version":"2.2.0-alpha.a4606fae","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a4606fae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f9fbc45b5ef220e63f2810413336ef21e263553a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a4606fae.tgz","fileCount":12,"integrity":"sha512-hp9DFx4XYsn2urzdI5Ai3JRQ27fs+ooTXQeMttt3MKMPaQWsccQ8A4iqRZMpEo2O2WhC0SnUP4OImUPYyZvzpA==","signatures":[{"sig":"MEUCID/ObfQGQ0W6fjhNNT51OZiMmvR4I/7NnVUBhYoQ4pjbAiEAx/QIQUYK5zAknVNO4RzxxYFdWO3bh0uTiBTx181a4M8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCXHiCRA9TVsSAnZWagAASYwP/jQHFAKIRKFg0Gac3e5t\ndwf7gS/WSHG4UqeqxxozKzXno2Z+BhBm2fJaAHSYWgE/Wqt3CVJrAnWyJzoK\nAw+hANYDCJCDeB8i77PB+eZEFX6IRSIea5o8RhsMXpPJoVZugzjb+ln9hviK\n82kgr1qcnbj4H7xvzLkevmbphLD99u/IGp70HDunF6obOdAYL1EfqYnI11qC\n1+6kq/wOpKxdPs31AqERLHf1d0RAoMR3SuJu/wiHlMk7vVU2tG6+8h+M+Qc1\nBB7Z4gs7iF1h55Y9Q6DSRw/T+j8r5hKulrHnkB7iH2r4hd1/3OVAWE4eqhq3\n38BHz3WG08r4sQwSC5oU7BZO17ZQjl3UJ/cjnrNJqNJT6Dnb1N42oUJmyuEL\nLMy/jF5mIEXXiCWqPU7LZYUfrDRRxVMWJtfbSUhkvce0VUNzJU14XEPUb5lM\nDy+FmLCdtDYnzERgEuVMcEJCkdjhTAbqbx1o7u6g/zX8QPTYN9q7eABN2euB\nqQz6jjOfPHRX/azQE3PubYTct6Jg2NJm0Ef9IWCs+hlhI6BCkrJ9RpIFSbAA\nWqGp0kJizqShospQbfrn6asHUl0FszUsnYbDb7l68wmiBXHHXpHxlqWv6Qc8\nSsfBFMkG7qeKZqKfisT9ZPyf9FQufwHQbPm8LAvq8QnXyyZ7vlfb0oiTny2U\nLi1Z\r\n=GYRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a4606fae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a4606fae_1544122849839_0.3095981546849951","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1a319bd0":{"name":"primer-forms","version":"2.2.0-alpha.1a319bd0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1a319bd0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8c95a1b4d7b0c1139d0ecf0e57b15df30f483c0e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1a319bd0.tgz","fileCount":12,"integrity":"sha512-JtOu7WmIGVYgQ3iOVfIsHESo5KOvGDUm3DUVNRhFfO9vwp8ayeLiUk7RNpg+OVdwOn2sHGywarDAaGhKzNmg0w==","signatures":[{"sig":"MEUCIQCLlxXIV40P2cVMM3Wj8mG3jXYz7p9ktmL119Q8aAGLKgIgGmZisUhjl7FGIGmJyUkn0q3XCtzPvNJa7caK9GrJVfk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCX8NCRA9TVsSAnZWagAAIjMP+gLUlf8J5Tzxs4moYI3d\noTHT2nYoOc+oqQn6fn16r5LN07czvTGxPQ4O2ms/xvnTtn+/LaLo3QdcGdBJ\nKO3pB1S8Oa7m1DkwkRQ/A839xKmfsBwr7qCOq3IApCllB9Rd+T2pQv+oyRRF\nZrGO0AAfOgED73gw/vDAwTsCf2vvy0Vs6tC1xegZ7JwO3InL/X5Yz5dzHBqP\niHGvWDpahHHYhSxkXtkHVZw5ZFfY0SS408j1a5VbJ5zos9cjJ2k6B5gvOz+v\nz0a4H/hPATsS31zNJGbRzQRv9PiWucHhm7GT47aM1jgka5GSeIYqTYIB+z7f\nt5bHWt1Ob9rwZXfuhPRzSluQ0IbPqLq9JM7e2rmOLVpXFw0HBoV2t/Okh1GH\nHMcp/vHk15CaZP3y1g64+wd7HYInwqZRJLw9gPe6tDM/YXBNssuYmvcMSL02\nquXsAaiZ0FSe1gOMhRNyMmUUSfA8DHdhiiNTRBMjtMRa9QS3yFnCNa18VlEL\nJT2Q9NqKfpKrgsJ9kcXD3KseSFwS/ocGByhnTYOtH0BBabKSpASrGHMQ0B7Z\nocW9CqAKLEw5dHp5srPLB4ovEFYPaKlC1+/3hixS0pzVUeEAQgC8ZbLZ53Tv\ng6fSMnMkaK+2dPTM1EH8kQK0BiSsbd0YLdLlgIpHtr/R2BVpGQLS7vbTTWUL\nhI+H\r\n=CjB7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.1a319bd0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1a319bd0_1544126220471_0.2013523824703254","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a59a2bd4":{"name":"primer-forms","version":"2.2.0-alpha.a59a2bd4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a59a2bd4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"347f066df477f7a2e5c5e81eb520602763fcd7df","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a59a2bd4.tgz","fileCount":12,"integrity":"sha512-Fs71WfGKdwwAheGKiWGmrdCRHBI0Tzcc7PeFmK+PTQEv46Sl5wIPvavYkw1Q34NZuXaKEKE1Opm/+58aLCgojA==","signatures":[{"sig":"MEUCIQCqcssinDHhvy/EWkK3PwrJe31933l5djTgS+23vBmypwIgF2yJA7+RDDzKRU3vc/xWu4PjGO8B5H0RnzeRn8UX3yk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCaRvCRA9TVsSAnZWagAAJOQP/2tovKfCIulW5nZRI93K\nnJ7AdMPdI7hCfAxpHb57ZmJxEp7BArq7PTbjQA5ffJ2Xnb1257q8Rhnpyyb9\ndF7qFCQyk9mZK1MET7/CJp3c5QR0i48kQFdW1pwZ8F1M2muMDztG4DBSRQUI\nvShq7YpbHBPxXk5U3iLBCYfL93GhrFvyycG6xFTbPq/fetsUC2sIMF2j7Dm4\n8XQobT6jv84D3LE7ftr0D0lb3MT7Rh3ykpLZBNB2PVXf6g3jXs6OdeGSgGi5\nUWTTlocD2OnTXjHHcN1XnuntYrfsdqoZB5E3deTQ4ioaKrwXglKWl/rr0y97\nv1u33eMTPIeUKrhF/9CYFzVPmU1Kkgz0E6st8YOlEEtVoqoztl/L3PkQ79Xy\nM9i/2+UYB9H5zIB8JP+0DiI/YdNz317y0sXk9A8Q3OLCfiWcBcKLo1SyzAwK\nXK3mfhrqIS8DfDDyHxgRHeOS1aBsq8IFexGu4i9wpCBwzHCNU2B1y65hxnfN\nJwUJS2moMmgbxMESmC0izOacoyE4sg3s3HwnuoNaGpBY8atu6Usxp2OPveaw\nCMM0LBT2vnGoVsWhkcVH61lOf/XZXEEw0ok00R7uX7d2nVgXC4hLzsDRVOmB\ntyw9IOfmdRcaS/hPSSArc25UbmJibjg9WiOvqdUe9IOXwRe/ISpv9LktsoLv\nebz2\r\n=bnBv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a59a2bd4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a59a2bd4_1544135790770_0.9486570508228511","host":"s3://npm-registry-packages"}},"2.2.0-alpha.97a6e91d":{"name":"primer-forms","version":"2.2.0-alpha.97a6e91d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.97a6e91d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4743a0361e1f48083b26625950902a3e58f971d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.97a6e91d.tgz","fileCount":12,"integrity":"sha512-GjQmk8qQQBMeoFBoBy4jptAzFEiKqCxfe7Prh3EISttVbIdj12WOuK22BUAe/weTqqFf7E5pLywDDXkus4l7Tg==","signatures":[{"sig":"MEQCIA//eUiZFTwPFPsLaRlZwhITzmktk3lf7zNZlRPvZkGaAiAN8ozp2NcCCgNAq1YNqCkvd3XSnAlJB6Dh0cgOrkAHyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCjHXCRA9TVsSAnZWagAA9g4P/3SG/ZyGDur/2oseW09g\nOp+Pw9R7HKgbF6+bkm4smaiz8GDV7WDU4nh0doaHgwXcXfZK2h8I6kUGWixr\nKavoNcl0EL90/1zDY/HkNURDNyC6PzhT9NdmJ4juZ75Oa1GHW1pnzN4wODLM\n9XVGaE3CsZy3D0sF5TYjkxdd+l7n0WI2DxlF+tZKl4FjQu/KBTobgudnOQX1\nZxOzy2DqU2XnwUMymc0Zhm9tgNGb0zSIzgvIw9M6Yf3BLHME+HPI5KXW8EKY\nvXmp/z0i/a9aFB1ZC/DnIQe3yjKPiTz/A76NPJ0RmjitTNGrQ1+i4DDDhCZs\nW/UtdhJCmkwJP2Ilg24o45Z9Wkbizj8P28lRFs/29qz67uvG3rWs7W+mYxPm\n/k3qoEI0EZHoLU50OzC6oQrY0is2Xz9J9UxvOZfg5ke4dGScvTm66MEGA7nS\ngq/EdRQRIeRhqSqzZ/8cq4VGX6H9QkmJ6Ta+vRWvQzlp+bqCrkk4/HJCMZyv\nrbku3XTgVIUzeEuU7flYzF46AmK0LGOaEnK++pR0jJ7cgYLNR8FybHZ/IUYx\ngVqe7YtbRzXlMRcEjpss7uVDxTlpBAAMgQ8huKByQVa7bMJvGjhAhVUqGH1t\nmh/pK9GjxrIllXwVpSXfItV9z5Kv1laQ5HMd3LVnxOcFPUATQLjO24tP7uTl\n+WCc\r\n=c8y+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.97a6e91d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.97a6e91d_1544171990934_0.6544643658991023","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a93e3ebd":{"name":"primer-forms","version":"2.2.0-alpha.a93e3ebd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a93e3ebd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d58e3938bcf317ace7887438ed757ba8d4afe40e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a93e3ebd.tgz","fileCount":12,"integrity":"sha512-gGFiFTgP90QQu6mpObyQrmCUowo/Jd/oOGp1pO+wFIw6BlWavgfV6bgwoTFBwS2FBNqa1y067/fsrPw9BdkgwQ==","signatures":[{"sig":"MEQCIAUXP+o11v9TsWAHRLISy+wd4MsNAP2qxOAmWIXWAdRdAiB7iBfDyspQTDpgFfvGhgi2MbkaUJl6E8DlbiEsGAg53A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCj/gCRA9TVsSAnZWagAAW4EP/i9PD1aBDuCV2SEDULnZ\nZqnbc+zSKLSC1CxxZlCHNi7gt8A4QAdpEHO9SegcYn3EtJqc6iK1TzmM3neq\nT1/ZpSKItJuYVc37gLf84oF6akEYx+frcUc/3dGJC+5a+vBwR/+n4ArUhWgR\nYEXClF+5S6IsqGdSLRQOKYGgIUeWEcRU8vCuZjIh7ETGbQuVzrarqm9r++cK\nAOWm9MvFu9dDG/fUcXH4Jjdsvjk3aj+hPywCBF+Wq8xG2v9RFtm+1d+zaqq7\nNKweSA8r3AYdggTCmPwXWCDgmQML9VjhK0LiEsMQ/qmK2hBD/Y8YvarymWfA\nBkGH82Yr5L4/HqqMBrIHGmI7RESU/uLQYMONxHgTBBs04vPTlugv+vTndfLq\njRHAYzJ+qxMw1sUlGGysLZZqJ/w2OVuNjNJe/nYHH43u75tAXoLIBCDh/8LU\n2qK576xVy8YFlvIy4kXwxtknIFaWiNlCHCeVw00aGKHq7DJ7DqEpmJ2mvL5w\ns6rlH+v6gQ1FXWbKttTRg/euKkMo8Yq/03plws4QHiDEQ/cmPSesx5LJYRhC\nnYX2eOOKiAlBExCuKslfEFBKMmpwBXs51MDtPg5e0FoxOKfTAzsgCdbWhbHI\nGp3DsWBtpA9DK4tMQLNpBQikXeMkGIq8A1scwfpIjYm1FEmuwrLA4EN418sg\npfrK\r\n=erWz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a93e3ebd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a93e3ebd_1544175584352_0.1117616861955173","host":"s3://npm-registry-packages"}},"2.2.0-alpha.46beb5a1":{"name":"primer-forms","version":"2.2.0-alpha.46beb5a1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.46beb5a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"22295a5095198031d27a1dd4fa3f4b34b88a6eea","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.46beb5a1.tgz","fileCount":12,"integrity":"sha512-+X7GDu505ChFnRZ4KKQ7cz93dvJtQ3KzRMLFHvYw1WTHJx30l3bKEiNh9pW63sK16uO3vDkcQVgsCWTIwSdHww==","signatures":[{"sig":"MEUCID/STAXMSBwEI1oPjzL/XoCAhWsXtNqqzSOklYSQqiyGAiEAnbLZf8wpatgM/iz6UGk1z47FlOHXNTHQ0DFSH1+oc6g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCswQCRA9TVsSAnZWagAA3KgP+wY33nG8td9bjyZawo5x\nnUwg8ywV9Kqe/WewHD0LkzfsxRIMWsoTfnqk1VPqySf4xEKOk8Lsm59cVuyu\nYiJndpdmyzNizLLeZem8/5cAwUWyhMFun+4UUaedAvXonu5ApOSxJUwsELz5\nf36hid5hnkEwAqkzgOqsQgqfT3x6u8ZHz/Rnjc9DQu5jAp9Yj7sCk9YjfG/Z\npL3nX+mcWORacEr8mJcREpfwccEzJMWgX0pHqrAFyEGkeyKK1DXnA/NB1NC8\nqVD9b91/3LP8x0O9VoHv7rDV+yFn8o7yISmNlDupfI3Wb2204WdhlcpKyR7C\ncYsWB5sRH0dCORLC8ibH80SLdLZ8Y2T9RVwOxrtlsG/qMPco9Jbs5ernI3Z0\nPKVCATZA9wFD1153UooDY6Hifvc+1jcsY3TjY1qs9CGaprUuj8Osp5VizNgt\n1rzu/oKJZG1YE4LspSXx22o2HVmqF3J96iDqzzk/SkI4JiFBiTdW5070gVjX\nOpo12FGUWUZn4a9kY/oaAlJwzRWn4D2vrStWni2h9G1FRi7siAJxyocCq9zU\njWMQSqqOpsTXxjogpZMYLENdc7/Jo6txBOO/yQO+kJcjCjeG4k/ivx12TRnD\nqzJUI3sRV5pDNj987X7RkouX/30X0GJnJwTQChiebgbLOOpxe7jrV3CJydX4\ny9BR\r\n=kJO0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.46beb5a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.46beb5a1_1544211471377_0.3298684669630825","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c20a7afb":{"name":"primer-forms","version":"2.2.0-alpha.c20a7afb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c20a7afb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f031d879ceecf978cd07997b30d020edb2f8c817","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c20a7afb.tgz","fileCount":12,"integrity":"sha512-wHDBHx/exklDlRh55pGaZP/7274T9iFJp/BaQ7oqLgzreVWx5QZGQa482WwHX/mz/ajr3qIU7ZBX/9cS27e/gA==","signatures":[{"sig":"MEUCIQCSYKTS4fG9yN2/rU73YZhXIUd0kjbxlwhhRwMSaT/l/wIgfy7aYj7/VewADJWi5H45ON7sDV6oYyHyo62PuT2Tj5w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvbHCRA9TVsSAnZWagAAuvkQAJH4tJ4KxbK4YT58QE33\nRp8qqjBKOnli5+t2QOYhAJDEXSm//OXufodeffPU0uApS4GzXOet9ZBeZE3s\nxqYfHa2iGsBHIpaWswJOWqO3yJsFyWdB9V7/XHlYTLqPfWaFJuMRwPndRXyh\nQjggC9XxIQdQ5eb+/o7lrLnFHUYrPGXhB/3DMXKBwQzR4Qhxwtq7NBrwknrP\niiQeng9dBo6r7tCQvsHaWqw2YuOKjou04svf3hcyKx1ZUa9WY637uHrEB0nJ\nTARvDorvOPuNxUk1ETrtZ/3qoH771pxDBVv3VBMXbZFcoDvfJaBE+ZzhaUnk\nBOr5qXVdYBON3dL1hyGR/FWe35xtZdVen1F07q1X9XilBEMretGwyvDtYx0a\nR5NGEzm+KZqi18LN4wkB6vW1ZakJOaNXRhb/D8PSWQ3sxNIDzdor8Td63VOw\nJ9+ZJVHFWduxDHE4Mlp9rb9ZJ0In7VBhL97kpGygjNFrVQwZlYF+hwZjARzz\nUyVMirPM1m1Z9+nxA5p93WdYzRzihKbWMVngIeFiA9n4HhStbWSIr9OhYokp\nuurKfq8TYGlGEflaGpbVN6BY6LPes+QSvj11kNDbx91HJvSJVhDeo6N9drMw\nKg1aQeTSVxClp7RBYET2UFlCd/tuQUm/WbFArxd23QGlX5AeJuoqV/k7Nk4D\nlyVz\r\n=3WmR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.c20a7afb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c20a7afb_1544222406908_0.010934358266230015","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a369dd35":{"name":"primer-forms","version":"2.2.0-alpha.a369dd35","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a369dd35","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"122788a29903ef34f377fb369d3b8f4eccd3255f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a369dd35.tgz","fileCount":12,"integrity":"sha512-Fbl3WPIKZVXQauFNTeUIomJEJpyUlWaZk4RIIiRZ54yGGf5+yqaMemSWyuLRJLq9utTX6jMZbVn0ysWCQkOPNw==","signatures":[{"sig":"MEYCIQDhilv+uC4WrZgRS5R5hvdwGjzrU2DZz2UoL5jGuixrmQIhAKzuuaP7eCjFAsuPQzmU4V/aKrdwH1cwIdDrh5KxNETd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvdzCRA9TVsSAnZWagAAaicP+wTrHBjdsyFDndKYx4Rv\nlffUKTWtM+RtGrrvJo8Pz0VZcUdUPrFMmJzoYjJA6mIk2COs1OrXyrBB0TsT\nVAxLtEMWhfh6ARKz/ITrOAk1MaHV87pXm8WkAawy5FTKgd4hOxp/28YFfUJt\notm/9jUetICIOWVDqY+slyB43ycRcoXwAb/d4TWrpEtvkzaZk2x0FsiM0aaS\njo0v+tOOoEHnQaT9om2BkbPPT5He7mdecUy0lGtb2tByNIWwGir7DkSZRqXz\nr6zMZJwjATvXfJR43uGOT/X7CNx28fWjk19rIqcex+yMPEswps+a/0iwfKp7\ndUa+b/P9w4Hriq1CiA6pL8l9vhHl5QRa0ZNwwGcbZG/TRahZ86BypLEZ+ouV\noCKTtT0Usf8L87k/l7TJ/CNjXULbUXgIamy6Ch5a0v53nVqflMGhz8zWZ+ln\n+rbga/MBffSoFtuEqhNxyKnvklvDKX3pe/l+C5knRhTeb9w2tt4eTKF2ghqb\nM53/TXzkBadkK8C+RycsSjZi9pYE0CSXLgZQJjMzHaDmhrXs8OMZO6LD3R+O\nxYx68nsyTgKZqXpYZdAP7RtbnMuInexOt3yVkjkm/aM5n6FF3UlCi6XLosk7\njjmGmO1Ql1ayHpgbCSo5Lao7AxuIZ+ZTipQFMQRz2eMGVRyJ1pfiaw2ryp93\nipQL\r\n=kDBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.a369dd35"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a369dd35_1544222579139_0.1418549933683424","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d328fa90":{"name":"primer-forms","version":"2.2.0-alpha.d328fa90","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d328fa90","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a2bc1bae34ad466d758494f4a3d3efe6e4bd5bdb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d328fa90.tgz","fileCount":12,"integrity":"sha512-6x4qdDmL0tsb0pPHihc4KO1T7Tj5bV6VyV8VUmeXpeXLelCWRSbc/PURf7H+lzDaREsAS7s5cgAX6njp5BKDog==","signatures":[{"sig":"MEUCIQD5tCuwzLnn5VA3iWJRFjdWQjZw6mQum9Dz0pXO4igMKQIgBdMax8DEnAcrpjf3KCeOq+LeoPpmU0PB4cCD/khvkuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCvxSCRA9TVsSAnZWagAAQxoQAIQiEh2FvzMqa5hToWa8\nR42euL8fAFoEwR74qlcBrHoQq111sglUYxR4g9Aazek/B6Q6LJ6nbOUw8pap\nLVvlSMO+muV1/9nY2Lj22s5KZ+dxHCnSC6c6f/0fv1I1OUTrA7P1bguE072+\nS1QEwJvz4LXUNOxVZ9YmWOnkzI9ahYSquLQBecU5uOTJsmISKWDEPqNxN+eO\ng/q/RM44pJqjYeTLSL7NO4Dve7kUYYNyk0sJbuqgjM0yxZ/jzFOt7JhuVOsg\nvjwAGRruEFun8rYNISFOBGQ4krCamPzJsfDE9I5GIVIIRTzYp2iUm78ZX8Wn\n3CiDiCK5gNLiO83l/R3mtDNq/sdpDKu9hDor43yY34Aoaflebnuiizmbjvw8\nQ4Y8bPCbmvS1kBg0Ce+lzUNiAiVKsl6Dmqc5DqVedU9l7E+OxN5j0iDCpUys\n2UTWiBtSu3NtXZNYxC21LDa6StTFqFpr+VJmav1Tgse4T+1ky7fC6rTze3dI\nFpuZC+A8eZ3QzJru6E2SwWPRwc7xpdtNPJrTyow7Xie9w8KJoRvPfqQl/bV4\nkXAPCWCpx9drIJSOyTiQR7pgS0+7yBMjW4ylrg+Jtpcwgi4gaAjqXe6/EPpd\nOaIOVWDRnnMvYHSNtya8h874YkddjptFUxWhW0ix5HSKTMKicWXHYHtJiO5T\nnR7o\r\n=37GB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.d328fa90"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d328fa90_1544223825598_0.1716274272904268","host":"s3://npm-registry-packages"}},"2.2.0-alpha.bd244056":{"name":"primer-forms","version":"2.2.0-alpha.bd244056","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.bd244056","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"74d08a4309a96d648468670aaaeeebcb94f16399","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.bd244056.tgz","fileCount":12,"integrity":"sha512-cxbx8MEKlHtb4Y25qwS5N0ZSHE6bp5krDnZ5AviWxvfkgf7vl7Z0EZIVc8QzIZqa9pZHAo6FhLbd376mapCuSg==","signatures":[{"sig":"MEUCIQClws9uY2jiXjRNLslCV4dRRgEViU/PRpZscgxB5ofkKgIgN+i0NkzDTbNvAAf2dBVoVXciFVbsJ9XM1sY0xoFCspU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCwIoCRA9TVsSAnZWagAA0iUP/RJIQT1fvpmQecbXwOhq\n7SlXo53TWucppXQ1QBX8Zw9RVe+yytOCtapb7Lh/v0hN0SiTcenEzYk+oZE+\nyVzfY1yPDVgH5vMf7r9sYsQZRT39Fmve9+WdQ6/osxiqjWMbBadRiO9x4RWB\nGiFstLVdv+m3tcyfWju1/cwalV5T1SsbXfMHXojUiikbO1ZUTyP0w3zknFjm\nooFL/AYWNmCabzofc/ambriYxk9/HKlO/M2ypTI3le3iOgsHfztnxHHYQPmx\nypY7ihF2YONROxPZbSlME7uBvVjXXtsE50zZL6tYeKA/e3o1PzhQKVqxn4+j\n3m/+ECorXAJ9Gm5EN+MhBzG3rU1dxj4DiJattBDSA5WRz4DZTEzBR4WIDwyp\nMtpFBKApeJUMlQd3wDIYrgIcg/tPAnYkahk3jfE4jBT6f6GRvipBxKvhOcte\nf4K960IoV3U7H20GX2HNnT5qt/sL6c2NCkJ1YfqAHMP3QApIKa+aRKt7ld5A\ndgr9D4i4Ftq6/Ju4IeGStCaZthW6htXb+rhPuribenLeeDw5uAjNNBbiK6ov\nzu5G1SyF/V4ZsJYGDEqDBIID2S/iO9nFFSQgzKY9RqQm2945wr2w6IhxEgFB\nt63YYiuPfCAsX4hCijvEi6+P2he4n8NGwEKnFV1i90r6bKKYjQf75xJq4g9t\nGlJy\r\n=ptVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.bd244056"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.bd244056_1544225320090_0.7677958676621981","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f7b11c63":{"name":"primer-forms","version":"2.2.0-alpha.f7b11c63","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f7b11c63","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5da2bc7777289f63a10ad7200e126bd71b137729","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f7b11c63.tgz","fileCount":12,"integrity":"sha512-9z1BP7R/Mc7hIkBlS6+3wKdo98aENGRyKQ6YyCb0otu2PIc6GEdb/ScFPUy4oBruH4c0dfm4i98/h30BqYI3Vw==","signatures":[{"sig":"MEQCIGKc3AvPn/8VsR0oQTi+WBLW8P94bcR/o2R9Jz1dWhiZAiB4rfATdC/FxsEvQeUqsrmBXggu/wRfRH7FZljb66MFTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcCw2MCRA9TVsSAnZWagAA8BMP/2dfclpr0CT55/vq0JZv\noSqumco6vT/J0Sm7aqMKd/h1PaKeZx7boXBKZatRevchOSZfLJs1zHqLmN7r\nuFHUw/DwOb6Aei/gKjOGSrC3zutJW26wf8f3/EUDy5x1R+gqBIbVZZ1osjYK\nhe4dckfH2I/p5VP37qqYNK46hS1fM/asYts2tbb7uuoi3xm8btEUj0bZuY6c\nlDs3KqgGzvX98EWoHqhuvs2VaSnNo9FGsaTfBxQ9K9Bk7ULe12AClD0YN1ur\nj0Pcxw98000CPtcQmkImAHfHbDGcP6BGZYPP+pTfsMJmT6qL2PfpV+ZuKzji\n+tP9YCX/fQqdY+mngw8SN01Cfi2DUdfxn/O9SqAEtjCj6op8bK30zR36DoCr\nyIDqEhsFRmuWi0fjKoqaZSLUFvFrao1HufINpM2VLUbV/EZLovWlb9PRUbsf\nlrFbRHLS+UYoCjQC9B9rLTuY/f+ip2jaHDDn/OeeL8DfaEz7YWQA6X0XiNpp\n6NpnboOXqS9uYvVy3exrIQrzubkxMWT2pG4cCkTuLf3/vEoNLQ1dxYYvyz/y\nRLxLE5qMYASfHdaILjOTnZjys5xMEO3mFxnWJq86wF4O88oCjKuaGdOpP7TX\nFm6qhBV5tyY8DnEPlniXd3zq6mUYo+vpqlOFkK/Q33gdFyj4qlZHpqwpBOK/\nLHPy\r\n=//Z8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.f7b11c63"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f7b11c63_1544228235889_0.1312027119110839","host":"s3://npm-registry-packages"}},"2.2.0-alpha.714565b4":{"name":"primer-forms","version":"2.2.0-alpha.714565b4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.714565b4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2726942a86fdefd08d5fc5d524c0500188696075","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.714565b4.tgz","fileCount":12,"integrity":"sha512-ThNMmeT5aZuwXBX4zt6a0ReR4GwKuOOLl3RS5DAiDvP8l0Hpgwqsl3bo3HoyT3Zq5ey4gzpp7w9ZRfsjGh/wwQ==","signatures":[{"sig":"MEUCIQDuskWMP91Nyr2QY+K+TOyfKjbyGq6JcI7CVV77LSrOuAIgBxfvNn5MRVS9MksLQt9TLM4s8t7SiPn4iv13ejwKKAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDpGKCRA9TVsSAnZWagAAq/AQAI+wcsgyH0pcr2oJWiRQ\ndyBtO7KqdIpZ46hJLEWFEXYZWZ/eYnVvVCpddpvdytVyUqaf1+2KZCkdtlQh\nJIB4yZYD5xFxQqL+WrRZFzCIOLLSA6JfaOfUEULPbvCBwsaukvlfT75rZr5Y\np+qBv29OtnyN8vZXyWhGHtOQUeHhp5RfSPsWIKU5F5RBfl9gZVm/1uy74gt3\n5qvf4cxfx5LPkTs0czyW0r7ns+cxrpa/JKiE1Rs3SKXa/9wGjPqaN3oATOUh\nnDjwHd9YyWXjp0R9r4+DuzShko2gwL0UgtX6iSJiW0wy0xKv4NDL/PTOFD0r\nnfYDPFvqKftjoKQ9JSaAr2/hMc/AUpZrzsT9TIwCs/Lt7eibwFWSG7YoBL/f\nMrZnlHG/aKeS5SmnPG8FaFDojELDOVp02fx6W7h+vZ8Pw48dEggwSJwNtU53\n44aoqAkx6VIZCOwZNLBievDg+9s2lCM0hU4Lymr8H5mYCB1inzIk90l/6nT6\n4fpNoJtd5b3fRR4558HEKf7M00ODWFUyGthLxo8f+bGhAaZVMe7mKYG3dZil\n7om9VQhI49GE+QWyfZIf22/or7Jww6kNtbciVEFxYYBdcCa4c8oEpS1EFlJB\nJTWT1gplmQjXY7aR0UuOtY77O0D2UlOIJtxjMicdQG6YnRz+ydJeow2wrby2\nuUDO\r\n=1hNW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.714565b4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.714565b4_1544458634070_0.9813008580315346","host":"s3://npm-registry-packages"}},"2.2.0-alpha.456be6d9":{"name":"primer-forms","version":"2.2.0-alpha.456be6d9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.456be6d9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"91be57f8a941eb5c8fa2d6980f325d0fd4f1aab5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.456be6d9.tgz","fileCount":12,"integrity":"sha512-0fHEX1CuhHyS2FKhFxzYyETvT07xmCaldu2x4V5xy0VaIiImKAbT65UQ3Bd7+W+UrosybWxREXTBMM3ZNpm4GQ==","signatures":[{"sig":"MEUCIQDTMms6q+Ya0T+a8SbyZg/lYNwiKu3smqhPPtbO5YrlSwIgHs/eV1IyCKTCK5VfaYvFFZrYTwtsFV7DW+lqH50Ktlw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87718,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcDwFjCRA9TVsSAnZWagAAV8EP/jpfUecYQyiWPy54pF9D\nMzQ3g0WhpubY0qrf+L4uC6k5IJ+t1gHku0EHkwX9Eqxjhv3s5NMrdFzj5K2s\nvL11IH/j8MGqAqtCR+voX1sQ9SbwUwssJGAmDN5c7WRKYj8z9nfrDHAkt7ga\nfVCzscBDEmz+D0bZ3+UAxDPUVY98CjKZUOb6di9/ipPH9UpFWkzTDi0l8Gb3\nLjT/3qtmkmvenx2NC5yEEgWAhUlhblvoHaxqglJgzmF/X3Lzf3uackgmNuhc\nuhuCUNrirPTGTtX+/+e64Kx74jmQfIYuKlsxiqpUw3YmvfmvKdbnhFj5YdoG\nf5ssxHg9a2/d7WNWSbSZJ8mbEwqxQOuvJRNIfBRyCx5aaycdLzjzxWkPJcxq\n6J59adXmr4E1zpxn45C1BR6ClKceqTWmlQOnnKYyhwz71DuuRbWgI+aQI6Z5\nwEcXn0EcMzk8lLPyG64jxVNldleJOsgjF2HbfAw+FvCT2axvFZPdKDMfxQcj\nUiGdyMsjDpwN9kxNC8J94TRemjvuMlwpOMJLEH++gZ3VEgofL2R49QInTLWa\n+7P5w1sZB4VQk7u9IYVuHwjeuvW3OdrxMyE03Ba/FbchrDlGo3kcGaA7fpgB\nYt2pX+bti2A7TheS3Jo8RTtIyyJpkC1kH9+4o1Y2sxzY7K2En1ul7w8yXpq0\nLmjc\r\n=MU8F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.456be6d9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.456be6d9_1544487267207_0.6674882880944195","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0b0d1941":{"name":"primer-forms","version":"2.2.0-alpha.0b0d1941","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0b0d1941","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"29b992cc69d0b4921fcf638550112b0376605ff3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0b0d1941.tgz","fileCount":12,"integrity":"sha512-zSH7SD2LyLErxrfEkvPh2Ibij1UCREAnkArNVJB3HEuVeOQMlgiupFX3kSftixIH9WPbbx8WAlaRJtOQRLOTwQ==","signatures":[{"sig":"MEUCIQCGP/rLQeuRu1vBnh2IXW7w8M0lEYRH4K0pd92YA3tbIwIgQqjAPt3zPCaiejIxJQOR69GTOi/8fXbPNpOloC+GYOw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE0Q1CRA9TVsSAnZWagAAqfUP/i4vSgx7MaZzoRxIAYiw\nlM1X0kYt7/ajaPsFhmRpbcaAvyIONbTgis0D+jd18VGgt0Wbo0gldUzTngZ3\nX2nHU/yQlrAel0EpY3G3+pMwTp/kM3Timo3iwjgn7pME2x5XXsfa7gJ/DLFF\n28JLvL6LBbeaN5pEI1AB9XV8VUDfFpOBYTaUrf4LS0KMiWTlcH+e1YCoRwyJ\nDuWveKMRqsG9NoIDEDVij2J26aNa1dT1wQAFM6pEriH9pvbWkYK5Nv/JVOQ/\nALGRwatFMJMj/wvBy3qbMGL8kHwIvYRWPQm6a6UDdBk/LvL9BKSxW7npHauF\nlMOZhqwqIAwB2Ckfa5yzsELddCCsuS5pejOfbeUdfwez1xPirkGZuscLV6Qz\n74rAtRJeyy4QpcVq2hwTFO3Bd9UqRiB1OKGGnEc0HJGx8SYYNYJxgwFRdLaV\nM5mmZ8qI7xd7EWDhVecS8cavIXTWnkUCvZCoWM0Oy1B0ioHPS+CygeIYy0z7\nvpl1DkXrMuRafubXmLIf3VSZws7y0CUdQ+KpDG8oiXzeoIMFc7Tj/DAxclBb\nOvAug8lgIr8eY8854gRNlHWtk7zqrDnbGtANQ9XzwMF3SsMbzXEY2DxU9EiJ\n5dOq2sI4srlmefOL3JDp7NzI7wHbY1OattmmVbT0IayV1JlWqBPtUQEuavaN\nte+Z\r\n=HNJf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.0b0d1941"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0b0d1941_1544766516144_0.3256094341427582","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7acee306":{"name":"primer-forms","version":"2.2.0-alpha.7acee306","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7acee306","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8b033d0a8cc662b0107defede29ef52a38015758","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7acee306.tgz","fileCount":12,"integrity":"sha512-kIt7p64/eqSgtJ93MPcC4GGv8DDdTkTTd+TwSuwaXHP1V7plhdOBWa4aAK5vBJZeb4ffO20RX0adpWV7FbrH3Q==","signatures":[{"sig":"MEYCIQCQQ1AutpRn6h/dFiQzTlPUqJmTiRogpb52a7uX7MZzJgIhAJmGVTrItaqOKQiX0nqbjeCDDCT0WzCg2Hom5M5ZFSID","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE05oCRA9TVsSAnZWagAAeIgP/1IUUj+uS7aGXjyYzwgt\nE14QTAbVP7AZxrUsyx5n1AEpFUtOwwvoZoRDSEsEuRzZYKWX9n3WuarsCjjz\nIBKzbGHbkjJ/p15eZJcSTBZcAQvVUuoecYcxkgUFo16rpxM5LN5dLu6u2Fgc\naKypmGBIbfwx1UspZ2t2BcLIUMuMA0vpf+OJP5ia/FpQDK2bwVbe5YPSAAn1\nlclAn5yAGKNn9l2X3mLDhf/BVRNv4RurRyJP4GIdDneLl0z1L1gcezd/YZeH\nZa54pVesoH1cvvbHZtH32+EhK4MB3Yp4Qgit+8uO0EYFc6sp7yiBJ+VXAz+y\nknYJr3CASOs9ALy6o9saEzLj/11lK2rINbxhy8aRJik7ueD3cdQgixa0PqRn\nN6fxEcssB74Fl96VnLCylxtWBbPAOLWfyjAHtt13YD/rDTxj9pxyZDBvD+qa\nQZ88I70+Ukxa4N04Fox4kY9M9/Zv5kBIMSf8RBZKNzvkIeqlJRdGMHWP2s/X\n70wd0bv2dw6+Osbb9F1CIHZcgyyGn4f2suCMNJ+dhhKJNDFtCZ4Z3NebNELp\nRO7dCcQ/oiw6CE5fo8cCy3Gl3+O4X7Rl6Y3TPNBO99XwU19LnXBP8cMt6glS\nHkrCo/jwq/t8I92dsPuIii4OLjtSoNcwrZK9CEpC8RaZLmzK8Pk6zMrD045M\ntM3/\r\n=Hi8+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.7acee306"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7acee306_1544769127470_0.17700211933071763","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8d9b243e":{"name":"primer-forms","version":"2.2.0-alpha.8d9b243e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8d9b243e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e0586ded0f0846fbf45faea211faadce652c3a90","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8d9b243e.tgz","fileCount":12,"integrity":"sha512-T7kH14e6ja2Iyg311X6mPUtm+1XJFqdYpwhWuEthwuILaOLH2YOubO6K2LeH+ADtw1XSnUF3AT5CE/HdkGVOwA==","signatures":[{"sig":"MEYCIQDZ3K9BXr47qcHFFlV9XpvMmxTt0fyPi9hiEOMtj3HHEAIhALS/QWryp+b+18zLGyKu5iR7T1tShga5euaECo3Lvp7V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcE1AGCRA9TVsSAnZWagAA5xkP/RrfYDL5qrcX3s+9jtnY\nzMmOf1JkS7oUYE/QLib03Mq0uJr0DEMkN2am2ovcZKexy3h1/XoQE0+dPt/L\nj4mlHo65tnARAU0jtues3j6ML4mPfjBomR1vz3OufIvEso0KuF7gd8gN2jQI\nPCC7PI7OodpGQdsqByFNvlmzAhqJI4uWxKeb+Xh2aUDBbouliUq6qDR1+nL7\n8HbbbPWIHR36QUfS8E5av7Y+3TMotuQtb0vN/o8QLvaTvZZX7rxZIZgrKr+B\n4ZcqCCMn3NojqEj0iisiCpYEvMlByoxnP0c3cuoqsFuG5TSKJqT9PTZwLiPt\nAYHomLjTwiUiAVD+N1Fogg8yMJWPJ9cVe5In7VvJQfaPlfPxUqqnb4HiAu4w\n/2/NpzNVXAXyTz/AckkO3VEXCe9CihVnnFvDulC18OZ1fKpR/SY5Ut3eofDs\nlYbVaLvdulUgW7G5hBm5c5cXOkfJo2ni9hcrCcUD7LHlWfDwZ+No0a6Ygkob\nigRMaZVb42+ti1mkoXYNfvesvVAy7ZJVDZlOlR4GYoAEdGqe086Kfgo37jdW\nKthuWW+AtOJxKwbvyxkPcRDPaOTHlM6CDGalb2q6uSh1CZNUtqQbGAgcbFue\n56uEn50rx1NVH17ovO61w8pxGw6BaW2/JKo+wLrjVfamsyrQr6CEDp86VUOm\nUtjb\r\n=FyPL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.8d9b243e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8d9b243e_1544769541987_0.36107136162765885","host":"s3://npm-registry-packages"}},"2.2.0-alpha.084f709d":{"name":"primer-forms","version":"2.2.0-alpha.084f709d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.084f709d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"55394fc0868fb25969431b400aa90e467984be6f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.084f709d.tgz","fileCount":12,"integrity":"sha512-xqKZq6KmRMXdLVcfd90p/hMhpIHGS/MEJDZAMjyq2WHC/o9EsFP0BF3BNT2FgUHUA6ZX+WBiqu2OhZ2It6yD7Q==","signatures":[{"sig":"MEUCIFQAthjBYWPLdjpXc88tYz5nefloS4dDVP3pmYQllWdKAiEA6S0kuv38NJPkfardnnuGhGIkaquY2Pdbg4Di3weEfS4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGCq/CRA9TVsSAnZWagAAF1YQAILswguPzBWKTuE+rrrV\nFGJfVtQ2VgD0GSF8Ok1kIEln5NStqTNl075hSOz2XQhk3evN0CRJiKBI03VO\nv/u7q/Mc6sneJ2Y3hyg1NJf3XKVwrPjrksS3NjsCCB4X1GZp1jR8DcukE1xp\nxcY2v1O1aOJAKczHSOrfGXdIOvu4P+KOoI7yDWhy8CSNNgRaEjYGWWfQ3kX1\nDOw56vGElSdLo1+ZbjtF+sIaxiTmoNB9QnY21F9GO087c9fIGVm5IWzsbRWV\nBVOrs+Pee3jN3kujKJi5x8KYje+a1VvfhQLZzz4hT6illoI6UR14guFzyQd4\neff5EJbXrmbFK13Idx/0Bk0A8s2tHEpz43t74qJcjNeel11xzVmWVd15iyC0\nrCs7K80xobt6OAAYL1lSva5CAEC6EkjIVqhgdKWRpdyJfmtUHq76HCRix4nc\nBFmDTNgIcjAt64EQxa5M6ufUFIDqioALZ6fJu5dkUIol0dzTb22pfHJbilhi\n+uw3qjsV+i00TmTHrtzc32JO+7DrTe0xpP0rf/jnN1vYxT4IVtcri+iwLD1y\nH8kh/w1p27TltSnHLBrPZ7PWlrOPwgXmBWYJmuUGPplEfUVTlz/RtfOdLmIg\n7i//+fZa1jPP/pdr9qcW70t6cfReNdH/oBsBndGRv/Zft4oKNCa28LDi99Mn\nBfjh\r\n=5ubM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.084f709d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.084f709d_1545087679009_0.9104279130521655","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f5a89e25":{"name":"primer-forms","version":"2.2.0-alpha.f5a89e25","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f5a89e25","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd0fb304875a7effd3dba2f086c93e19184600b4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f5a89e25.tgz","fileCount":12,"integrity":"sha512-Wbl/SpzgQqEVmzdAnpvmSGhG3O+maYj2O8ycL8hNe8EMIgkD98uU9CPW+nA+XGjamPwjJWjI6SKTAlt6+MTi/Q==","signatures":[{"sig":"MEUCIQCNsZVFxvPLcnhwMIqDD9CmqtNaOLhNyNqtks3fWLt/ZQIgZTQ/Epgdm03sxsBr9xWYFSY55P2HE/LVJVi95Uk3ye0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGC1dCRA9TVsSAnZWagAAqDUP/RMjqEhK51+TyujBPPHQ\n0YTmAuWLlHq2/5wV3xYugwwEOISuNPbaLMz2IPbIcQNeOMYCWNVKXkoNSZ7+\n5YtOpMBXauVdSrUSMdlYwuoSJ5ikqTKdU/eMApOJysDBetRaqX4NQRaur0xs\n6AwsWm5iM+QNOoEl7uwvoMy1QUqdx0LyxhHTxA0k/eYf9VriPndiLbkoVCTa\nxoCNN/+3FDxqkeXOc90ZPUYjJv+0uRmB+ho6Dt+AHQWHvD8z0G7Xt4x38nBC\nlPufxqKbNIMRXv1Bpf5ua3l920xr/6yXvuKTbjtEhOSz1V8zBjzj4fGmj6qv\nTqD5VePm8CWgBM0pG9vTcOv7b9OzuyCFSUwVCw6/FsDaBKsPeiII2Pq9v5Kp\nSs79E02sVPU7fD5vDvZqWRrQV8dZMXJgErLlmJCx1FrRI3K9W+kXfdy8UbFw\nETzLC1mqO1zi0JCHdnbkYsliVvrEkFV0b0ripiCp+OYCcws0bkMndkZlWUkw\nGi8kURSChl8u/erbEJ5R0lXlSLuDnH1B5PndF4lHHWPmlSXNO73K+SYW3tfp\nrs100uQrkhIwH/ZDBW5c0hqXsfFPSeqisQDsXr21IjmRZwZw/ZHFBRkpvnSg\nXiqna2a50mUMqQMNy3TStZXJqwjnDw1uKrBxG4ldRVsST55rPkUt3Q7a7WYb\nxEGB\r\n=H0Wn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.f5a89e25"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f5a89e25_1545088348340_0.04521313655506032","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4586004e":{"name":"primer-forms","version":"2.2.0-alpha.4586004e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4586004e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4d2e6d9bcd816122cca36ff356d6d8b08503248c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4586004e.tgz","fileCount":12,"integrity":"sha512-Yy6VCHcnSLil2oTz6OyVeGeu3K4ebTcPlxbHFeKpS8a3MhtThLF+wXUfM2tmV4/p0tcpxMj2jWE6ydp8XdAprA==","signatures":[{"sig":"MEQCIGvwGmL1OeZdElGKcfzEdfz6ao/KT6wyhIgPo5j0TtrnAiAg/8/WPnFbokZYaF5EQLU9IAHSihXFGHAyGnkdZSZnUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGC4rCRA9TVsSAnZWagAA9rAP/0lCe5PC4GLYTQ1iKS3q\njY8J3BBCSlsUy/nRiFf/HpLwsfMTHJrvxb4MXlVitbXzitA6AOI7uG2jduGg\nz7fsOwjbiQiC9cfyRL+T/y14MOa1pQT1oxquhSGwTgTFOUmdN8kePHXwzEB7\nzZhiuK218e+o58eviDGUGEsetOZU72T90obE/Z3SvP2w87nCoS0MhcGqvzj4\nsslXpYIsUAOn+1WWzU8zexRBpga5p40iuDkYF4codKbFuzmFey6IWJVeHqif\nwejErYPbcRYee2tmE0vr7nMMvjwBnM9uItkocVdddwa7/gTI5f8THovk3N3U\n68wVABcPSksPGr4fN+ILi7e9AVuoUFggOjSnV3C5Z6kX6ZOk7zdWcNrXgfEB\nsGBmWQw/1uJW2QjcxzH9fdbSgntoaDWvj4chcyBWF+LmqG8aZyLGmNQ/fjPC\ntzqIBHj7Zz6c6GmA1RJHJ49RjDyfabkb038YQ5eW3MVjqzFM4aLDniC530cs\nH+vWbJCenkC9nfb3nORQqUARG5hymKospTkV7hRN4uugGf74oeA55M880Elg\n+x9EyWG6YLvRr5sEBSLCeL9VO2ntQx8QQNV33pZmdmq+BaQPsagbT6DEi7H6\n+2zJYmXjJhJiHmfEJM9gWz7XmDJoV5zcO2tkGk3AOcJcgoowXfO/qPmpwhMi\nj8Du\r\n=HbPI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.4586004e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4586004e_1545088554759_0.05165798888332218","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6289c294":{"name":"primer-forms","version":"2.2.0-alpha.6289c294","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6289c294","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b0c41ec9fff2b92c616c1d3c7e0553904aa370c9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6289c294.tgz","fileCount":12,"integrity":"sha512-S6ZmLE6IuUqHmP9zFS0TfxKWWoSRtRXrUvT5oc8EB2sR2PtFhfI5ydqWjCg+2jiSXvmHdsoxQ7y5jNKN3+YRKA==","signatures":[{"sig":"MEYCIQCbWFs8wHIBEj2WarrSHCJyudN58cjFx/VjPtc4WGEKpwIhAMuaqal5EjtFQ8INiSvyX9eJw6yBP2gsb19fTK4Bwjo+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDLlCRA9TVsSAnZWagAAOUIP/20hBUG5g6LPI2v3b9pq\ncAKpH00Tuaxk6xRc6iKkzhFI22boDiofjbiPrwxUDllu6UO+UvpQ5SiuTHwy\neb93fZF8gSvVOcHK6g2MEMVEkzM/GgKTrTnBlCnW1yB3GEH90g3/0m8XSYSZ\n3f8Hq9lRil0yCpdIzfN5b4KeYxnmQYd/bBy6WDB+pmxJvuPe36pxy3T3XC4t\nW9BfBCByGisY6ArgZzHSGNZdLjuPEurokryn512W6/NG5U5mZ0wcmDHkV/j6\n9BGL+alZ/E/s7NyR2ARncnPyiNl9RtnqSsV9ohB9BHVu6z416tMRv8B3qNGn\nyV/38191R+wed6/ibHTtI9SpHgjctFjqhNDFbqTiRmQDLaCj2gq9cODJk6mV\ntgQnZyR9Nqu3WaxnutUhzDgc26nEPs03AOYsHKOHTgIJtMt3IR7KNYr04Kbk\ndihZYcez1maSEG3dnngh8Bjyu+JZqwj742g2k0Thg/wyQtjxcfTw7DqU6vol\njaANl5VEUQIaf8B/t/o9ma04P73q9o04ZrNjYkXhzScNasVkVYnMoHwqOq9y\nEp15wCryIzhJc1tbu/SKF48Xx9b3wrho7ZmapoXv2fzXWxGmnBTf2c/AOeUn\nU77z8jE7SMCISXKLKHLpU70vBGRiBI1J0zBCNITiuhWdn2oP4eVCZ+/cw3pT\n5Yr0\r\n=N1tB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.6289c294"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6289c294_1545089765311_0.5922146451628012","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d4f69a27":{"name":"primer-forms","version":"2.2.0-alpha.d4f69a27","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d4f69a27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"16bce3d90bcf98e618017ca8b133422b78a3fbe9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d4f69a27.tgz","fileCount":12,"integrity":"sha512-1PhRLRTYL3FoaRHIUchA0bLLfRnJPS5zNprezJa3C17HEy0BxHiniCHVjyPWKPZcL0xy3IA0++9pNj7C0XoRKg==","signatures":[{"sig":"MEQCIFt5eeiy6+FDLK3gwedqlrwdi2zfDiHCDzoMUocIgQHUAiA30/df8lUw8r1r7nDpz/ocXXUzTfhFltvvpjo8kCLK0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDQmCRA9TVsSAnZWagAAdHoP/0H29VNszhLGoq/EUA4l\nkFIAw6Zb9gFx0qRU+zvJv4D8MzsjZ468J49o5GwDnpBgekmQ6kfv52b0DxdV\nIfErMcaXDZCypeBh6QQU1PI370mYa/xBQqdXuU0C2YGhVyNwZaWLZUi5NgRi\nBY2OjR1ns6te7k+EQzfciZqBwLCsObFlcVtDBzPHnk4eUrDyCQWob+/2t1Zp\nkbDfYkhLyTds0s7K0p4D6GzpmgHzqpZSkMjFOyHTMVXqv4nAJH+Ez9Gi36o2\nt+tCDNT7yOReSr5bXeTik973V5xuV1OF10s/GvKW0uewHNzhUlbdFb+cxgd4\nezhWch5WBz+uB19L/afOXlhwSmNMVGOMCsSMy6aMqprtRLC4Eo/WsApTtInt\ntq1ox0Trk1nXRiU8og1dMC8ARorsTcMTtzE5zAvShrwPR06+8ei+PlZ4Zvvl\ncOtYK82N/VZipHUjCqnkyp+jwSIUou3PGY7EHVQNLZfl4TWxcVjwj3nuVxv0\noQHE5OG7ALgNCF7BSXRqtNj1OV9NAAaxqqdwCX7tJGD95OmfUz0gBtQy/iaz\nqxaacAxXjGoE/4yY3tRuUSk4CP5RIGTcfm3wq4K0DvOeMDxdWNcCqWtKD4PH\nCSpHZXqc5Vi7PWfIaJk99pUyFCcuwtu9IPywdoTcoa51+i7ZAHRKdBE8pUsM\nMRl4\r\n=AtA9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.d4f69a27"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d4f69a27_1545090086351_0.341853479189554","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2a13841b":{"name":"primer-forms","version":"2.2.0-alpha.2a13841b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2a13841b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"acaf4936ba202fe786fae7bb4746e3948b38d3f9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2a13841b.tgz","fileCount":12,"integrity":"sha512-fmhv+hMr5mycCQZHIzXedbNPjKzbNLL08WUXSuXydpWLlo6Lg1H7mMpkKRthJjIyi7yiJEWlLKOcru6BpGVdxQ==","signatures":[{"sig":"MEUCIQDt/qfx9IVUzDBMPJdNhRJL018sV4WuhwVHXFHh/nvw9AIgW+pUY+zXq1/bGH1lZabCYH3e9nxfoa8g0/PC/JmweQU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDmkCRA9TVsSAnZWagAAJmgP/inFZFXRI9eiV/l2VQR6\nGNuUeWfXgJV6Y8ycLfLzGcI9Brkt0BqG1qEuPF2FHvx0VI0giU0mohz4S0PV\nC40zagj/D3/ojz4EBAL1MXYioZpr6UmZHsgb4w6VogIUO3deyp6tcCraTJQ0\nJRspmOrxif75rhQvcsAx3OywX1i6tHZbgpbh5ZzT3sYhn4FuhZdgfH3yNp0o\nXFT73YLyCozX7nPCirybdxz2y9P8Lphde64SG0qgjhn/uBQapvvUTCm5mWXQ\nuYxw2eOKaY/IfCzGtiywng192NLt3nyUQ5AJA346txLH5QsnAhiQEO86WcCr\nhXBZkIYVQrTX7+vmUFyErYbgGcIvWWAEIQFMcfWRD2KrZ6jhlz55rfDW+Kfp\nMo3KTOBe5o+7pnu5nZHyLDO3PZOpKzAYgRZHLleE4TFyq7ijISgqmE9iUNlV\nyjm2pKS/T6qdf+f/f7RJxULWFuGeWv0jVUusRC0ocbsIfRG+WRvXCKB3gFfn\n+BV15mqdxQ/U5ILZnEwOV+9+NSHKgiIq09HATaozabsRkidJVJw49oS+A26y\n96sM9rMMP0ujA3UeTQf9skduqBixhKf305sC/J5u4CtmwHFT9uIB+S0vExQo\npUuFWO8qtIbY8hs/K9SVEBqKt6pTGsP/hjEVu8JQNLPiusW0pOPYAt+RM/1B\nDJl8\r\n=niid\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.2a13841b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2a13841b_1545091492184_0.9685695256761067","host":"s3://npm-registry-packages"}},"2.2.0-alpha.45c8cf83":{"name":"primer-forms","version":"2.2.0-alpha.45c8cf83","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.45c8cf83","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bc1053926b3f6ca144fa3f7e853d298ccff86119","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.45c8cf83.tgz","fileCount":12,"integrity":"sha512-KFVFX/wl5fHfQUSH9dYdQUGvjWj0GIatgi3ZneEKahixwlRkRYbUW6sV/zt6uQwYEBUec6e9Wv+niIY/s1IOcQ==","signatures":[{"sig":"MEUCIGTspanJVovOoF5p/nlK4ubGhFWLCZSDnLsXznIwjO03AiEA1CKbETNOWgCrhQ9zi6Fea87yV9ozwEgId/mZRyl5+OU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGDspCRA9TVsSAnZWagAA8OAP/0jDMw/BRSAloHM1tWwY\nq07IHMJl76Yg5HkbRVglEqlNYv5PxTpR25gkyO5jhsmbHXi6n/rCnhjmbTM6\nIMfFPbduIgZJaI4lpJ87TBgf1+BE0d/RFqahNe0SXylar3WTV8LNttR2Idhs\n0WtZgPNqFS8Rt5s0RPoYUYb+Km/Djp+1W1dXCUxDy7mu5iI939TqxQ8rvOd7\nkNOSnPL22O2/y1VBPhiHaVuZ+0aB/GY8Rvu/mqNRUwU2fefu3MDJcfX0IxIk\nbOQTi2NOWPb00YBbe4pRNNcTKoYXs6Ym8Zq7hqkCDy5OHKooBUzViCgMru2m\nkOzfOEHNPomL3iCVF/pkEoXAOE7xa7x1IiSlJ8fYhuQ2rPwFhk/Oee/CIBsp\n+sUlJeu/qR/WLuxNY/KTmkto/8JcriBaNeApoXOy2shjK7XRGde+WXzU7vkR\njZ/1SrxHOn/sZtucdsbkt6rQyMgBgbKQHJ0KaTgcVRWCwwzWAlCl8giUvbIb\nERTpCpnE0h3ZaFZWPpw8bpv8HZsaXoluYmjiIk0yDO8NVCIMYbNDgHWdzbLy\npBiOq/sLNu7oCX6d3sIbk0WjNpMwYwNI6Rt/BKa6sPpoxHNpVtwOtxsNtsI3\nF+F8IumJNcw2q5qnvtRIPOQ2cGcdHux6egvYNJmumdXp0cKD3w6PlBNDt7Fd\naHhZ\r\n=bFDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.45c8cf83"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.45c8cf83_1545091880837_0.10044055201700064","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8432e534":{"name":"primer-forms","version":"2.2.0-alpha.8432e534","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8432e534","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8a39d0a313423234caf8dec75b5565c255f7251f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8432e534.tgz","fileCount":12,"integrity":"sha512-OqDQgaq8+VEVYuohDN4K99NhWNJZaT3Z8eIYYO0XOv2uMYZEELct3xo1ogfxoVkaTaqpZGdCNtAbiRBUmRsnrA==","signatures":[{"sig":"MEYCIQCVJqyTlHyrjAvOO+jiA1BJrC2luE0nsYSkFXcw6kVvyAIhALE3IIf0+SOwlWewNTdUrca1RurtXcGyPjouLqsP1lGu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGD0DCRA9TVsSAnZWagAACcIP/jsPLJ1ojY8cNvQMyYZx\neSur6H7kvLQjyoWd9+wnkQ4bMRFDNFWkMUu8ws7L41C7RUDrboJZxHDQhXfi\nf4AZLuTC10P/jIdiUdtP7/XAjCFIBwx7M7Ivr/tClT1KgyPSPTgxa/E3q1a+\n6mgX/sL+0mnu219+IAfszgE+p2a9XBY/iyBVRbo/pCYeA5fXiRHA+8EBCOol\n2rHUTNmjyC8LCY8ZNwIR986rar9PY3hgdLQw2NciQwVEYTIN+U0L+tCRVfKx\nVweLAC5M9iNlEg9bNNZEBB27zZKEo4xgE5fdQ7K2j59euytDB04+BPcvqMQR\nXFMF25NKvdZFdxO+lpTfj1lUEiFLdK1+M4cqYLdL7Px9xZkoDTrVLEx1OgiU\n3NrHKAcCa36GUycsxNJzhKsoy/3hBbPAmU7rxEZE0nKPnJ0WP1r/V5gzZaAQ\nKAjoS926bM4h8FNCEhz8XDaJdIKzqBeaNmX3hG3/Z2WKPkFYTyaBfdNkHzgK\nvCe50FqmHMCW0+aDWWUR1e7RUd17aWJbQuY0l1tO8msbCDINZu/obylcPyu+\n7TTXxkO3EFpqSWsDIZwFOCYmXhy2zk/71YpWGxKAnGlmVrVXbyCMtsKW/3VJ\naVXYPscQBjKlcbLGwC7s5X5U8rx/Nj0W3/AMy3ytPZlXTRZcmJ738WpQr1dC\nk2jV\r\n=n16U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.0","dependencies":{"primer-support":"4.8.0-alpha.8432e534"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8432e534_1545092354794_0.315965695987658","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7a76b326":{"name":"primer-forms","version":"2.2.0-alpha.7a76b326","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7a76b326","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ae0eee6f34328eaad154f3cd1952ae2a3864343f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7a76b326.tgz","fileCount":12,"integrity":"sha512-oDS1h4r0zeknEVGhy32gPhaAhbscMzAgssgfKgKdIL+FbpkfHvMRJy2cpz09JYCrRgDTNf1EXpl10MHkEYqFAA==","signatures":[{"sig":"MEUCICVOLwvxp3UpFPK6DQESsUivEHejimkCZ3FhsyTZh25kAiEA9ZKTk1Vf0k19LZtbB88EiPMjTdM/DfIu5V4rTMoLtjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcGdVkCRA9TVsSAnZWagAAHmQP+QGCX+SgoUIjJNKiSUyw\njgx3/QzKh5dFMH3wvfcEi+IYUqW6jFp3rOKEcWaGjkfdLFwyMsFfKpCyu15H\n/YmNEG1bQuPM3ct5k0vUO83903S5OrjDQWfN32/X4B65ZFrsP4zGcbtHphg0\n0DZ/e3LGFZq07qT9uC6c5CRAW7DAm7Puoqzf94pYO2djbnU02P5i+UfvpA/s\nzKeLfOjuAB1fPorXYw/nwY2zfgvheeJP2uXNMVNNMvnFWCh7Cf/B/S6cis6z\nXKL1qrY5Gm9pS6jQp4kYziFTufqSupiNL4Ouuo/FBZAYcdzWY1vcLcV9+WZC\n7oCTPd3BevTvNidENKAOFDQGxhN7CN+nLGxK3DgDO+yd+FMKbQSDKImfAl+6\nO6VCZp62o9OuoDJsMfrGBxeLTIuiZ54jDc+F796eaQ7iMuztWfJfOcI5ibuD\n6s4lKHrSKA/DQCq+FWC7vxGVcqvzGdyREv9j8/dbZPPZ7nxIyV14iE+wuFyk\nCcLvs0YIa5vAQsWAZ3PjAVp04IapVNiLWPQ/udhnfyB39tu7QHAvYjEljISI\n6gEGRFVpQT+yrR/TQpXP3TULnFpU3veW++mJ+HEHcD97xb1QUNHuHmaAPQpP\nbUHC71PjxZXum6u0aAU/gPYiCHiAxFfzzX750iLQDUHLOVuj0DBz2/VIyQ7F\nY7TV\r\n=cFbX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.7a76b326"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7a76b326_1545196899503_0.9710465882350443","host":"s3://npm-registry-packages"}},"2.2.0-alpha.52d5b327":{"name":"primer-forms","version":"2.2.0-alpha.52d5b327","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.52d5b327","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"24f89adac7cf5105cf914f1df48e540db02e5dbe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.52d5b327.tgz","fileCount":12,"integrity":"sha512-jLhEG0LkRVAK4HG2ZI+YBrCSqJiTQkaN+kQWv0GdUbKxWg0yfTgvDNnWbCz1yETfye48VQ7GhWDalBjGNAqcRQ==","signatures":[{"sig":"MEUCIGuEGTzGHt0fk2yS7hXlnA0nrZsVerM5/XUjkz+G0Xy5AiEA7cF2Ab4L/Ijroug87k54RMINCSjgFnmVHYXzCVR/QJ8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcG+/jCRA9TVsSAnZWagAA7YwP/i5Tx6aLwkec3Zpd35wf\nJ4dKFotXztCro2pkjYCoqLeIHZqtgYJ0ACF88gSoohZGnWAAcGQM76yLv1Ew\nvH5O79FMJha1TY731eXWCzzaT3wNzxKzI3Qw6YXtZW02kpR8kYU6d2JbLQhB\n6HYo42I1vcCIJ7yd+uNUsonW9KyINH5+oeIOoxHiuJDMJfXD75glDDsz2HyA\n6EOsYyevXkbAiJ31wHaeJkfDqZ4AmnNla+RerAccLQBy6aTjX0+jCqGtQSee\nqg3te/n4MVsSQZW8+VM/yZT7x6HjeU0x8trmLfwvp80oKeDp8BK1AGA6GzRh\n3/V1AG+aGp71m8cpXwF/7tuI0+BQrtHnj6Iioh4SUYrckFqKDC2Ba/3esu1Y\nj19dXXf5dCxX17ft8bFsUT2DU2rPVYiVyit7yMjRiYY27ES9fGcQavI2C9wJ\nBXHHFE+UrQ4STUJmR52v3MqFssVvHKDa6hgNTFc69PqGJxX4BeOMiQ+0SDfm\nWPyNpwu1ZO0jtODdcwy2PgU9CFHtHUJj6awPOHdDMhCnTwpyXqqLNVWdw6qn\nrtQnOXSLuNxjvGK3E5bfdDf0hw1jTQKPJjOu5AxsHydq0NFH5hLCf/klcV4C\nt/sETBzJu1m2OP1l/76q2w8NrawJ1v1e6/Y72dxxMb9hKe4Y5pKWkfztbWP8\nWJT+\r\n=+maU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.52d5b327"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.52d5b327_1545334754902_0.9069267765197904","host":"s3://npm-registry-packages"}},"2.2.0-alpha.af57a500":{"name":"primer-forms","version":"2.2.0-alpha.af57a500","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.af57a500","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"64a5992174b945b23d539271ea2993e7508de61b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.af57a500.tgz","fileCount":12,"integrity":"sha512-CNFSYCEDBFGN08YFxjLFavLncMimLmDinUuN6LJDBiCEiMEUOoJHexfcectnn4yrPo3YQXhBalzXwqgnRuU7Qg==","signatures":[{"sig":"MEYCIQD+hjxVW4RohbVxRS8C61nOfqE381aOXpukIo4xvsFnpAIhAPmLBvUdadTu7lW2a2HrdAaHOpmBB6qnBHNYNMcb352C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBh8CRA9TVsSAnZWagAAqlwP/3NAXeQS9RXRZO0h8DgX\noGYx+VFg8WlY6Dh0IMVypkFuDxRCLZa2kndiXoIGgyF9jI/2bB7aG/MwDq/U\n+NLqATOwkq1CB8ley1kUbCbsw3hKERrUEftkHI+hvpOXDevZiIGYLoEFcbbJ\n2rjfmPL9P7ohnL/evjID85y0JJmzYh+Cj1FYvDf2ayELvWZ8m2HZrorGbeX1\nLYE4Zc4ODnyAsZc1MNOQNUCdC4WXQfin3KRGNP5rlS7FvDWulE/9lE+zX+Aj\nGkZQojVTsjNNHK+pClrd90mXbZBLbnEqjCgYnQkS8yjMTu7nJsL/yjI86Un8\naMXYvB4iiDFz4dGBn3O9OC74Zi9XIutJVm4cSiJ45FXQCPrNOQcH9rgOSXN1\nFZRN1BbejhI30jOes+RcTeMQQ93DqQISSZZBGbyB/qQgivZeU4/LmGC6YpGD\njlpmRm12If6JiraywVwACLnde+0dsqwQo+jNJkyQ8IaifvEfZPOfsMCyIdFH\nafIwYX3zSlYX/su2ay6U9bnQSXiNR+VXy7S0JSLDC8uZpOy5TuaJrnpx6Akn\nhfVVSrMMVbVcwA02Eu6lYWSGXj/cNo06Vaz3KAGfTJQeJq/4oI/9HmjLQlnP\nR1VuOv9RU1rHfRU6Bz+5l+cYzJnO5qVzeVWGkpi03f1bqolcwWx+vHoUIjS0\nBoi9\r\n=f8/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.af57a500"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.af57a500_1545345147541_0.22179329591893104","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4dab7fdf":{"name":"primer-forms","version":"2.2.0-alpha.4dab7fdf","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4dab7fdf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8f0b8684fd7e0d660910d66db060e2a9a07abee4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4dab7fdf.tgz","fileCount":12,"integrity":"sha512-8QHqqrlJA3hk9Q2DZZe54KJ7WU/LgRH8KqvSzK1mWLMgo/F54X+0Whso6bkTKDBF1PCzPPXWHdnxFiFmEwZqOQ==","signatures":[{"sig":"MEUCIQCrNSmKOzd9rFA0pQJxDDJ567ydowsV+CkGBLv/YEaynAIgblsg8HBJ/qaZk6eKjZqRrvMnOXH7Xew+7uEmC76stVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHBnqCRA9TVsSAnZWagAAGYgP/3zkGdIs4EQ3GQN1W683\n0aXdXgURQdTkylhfnt3BvkMWRflYbMiKywMFTmzZc80IrcgS88HcctRvXn7P\nkqpgvK26eF/9QZYLu11F62W9xd6Dc0Ii6yXKBzTntbywmzrvQEl6B9Qx8+S7\nswFffs3+BUfsFRWwtN0GsIJqNxUc8c1wT1AoKIZk16NtEoZcbIwHjX1EkNTG\nBOQz5HQepI1gACtTelf/2ylcxDjc4J5UT6jDP5IMhO10KqYGagUrlChBEozR\nyHOa2Qd9Wknl9iRbx727ohOsMjIjQy3nEitk/paluIXG8D1dk0IgS9Zl0Xtq\nxt/5wLlxMI/qNZLh8we7dejtqsLguXHHqZn5adYX4ePgdDWtyKkWCUsyzTpZ\niH7V3JpvhphpH344C9UguGr47mBDUqD+AUKHjrQ/6O/YQyAbY3DO5CcUj0cV\nq/4S5pGDg3SnSIcjEBvspPl+igtBHPfyTATWzPe1SQRSSppE8oW59ySY1a4s\nfjpa/G2aKE/Kj0QRU/Y/aAO/IkBFd1nnBQE1DeKHR9Wqje+m+ZnVWR1BcS5+\nk722Fp9Cys/OQSZZqtiRmLSyfM7Oiy728BHcPI/LeMT76eCdxZepkur7LRfs\niLn2N9Dul4kBzmSd6KXuaE+tgzLNlt92p+RRQOFwBzaSLGT/uDVP21ODj/q1\nwt+0\r\n=bfsE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.4dab7fdf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4dab7fdf_1545345513469_0.8968745011519084","host":"s3://npm-registry-packages"}},"2.2.0-alpha.47ed2750":{"name":"primer-forms","version":"2.2.0-alpha.47ed2750","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.47ed2750","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8528110e069f3a359e9be8083afefa7ab1ab09f9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.47ed2750.tgz","fileCount":12,"integrity":"sha512-Xllb+CSVJJtVg/R/NkirvlaVKq1voEI2PPnVELLSsk6aaxTldAsyr1EzgwcmQO+wz/zfY6Cr3RMS2cT63q4daQ==","signatures":[{"sig":"MEQCIAOywq64LqIfdZ5GMc9WzfM7eOuuCHJQX4SL0R6yrNRnAiBwNnbiaPvA80FJJgqryOr6Q5tQtvsRAsJsPuWwaRE29Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHByjCRA9TVsSAnZWagAABZgP/iPt7enVgqqwoguziVNz\ng5BvbTHW12fTb5G834xA8iJe9tGmxm0KD7XHQmx4aBbg69Jk+VGrQLcGpal7\nYP15iNeVkXtk3fCbbSqZeCMJRfivCPMJc6UBzt2iPSKDzgn2LwGPkcda1lwC\nCC0p+ONY+K8glBLaej8vxp0ens2fVQn+mM6nx1946QQhnCTwCvKce5ZB+Nz0\naoprZR9+K4EX6uy1uV7+Ml3ma1KTrvHr+Nz1T3UoolUQGw00tXiAbb9R5kDX\nvwxLFliPXYXY4tZv6Z6Jz6aKkzsmHtaDvaOYiCElj6ZCdewdoJt8FV83WHzi\nG2HkP0MW2BVm9rSpt2UB4CJtpbUjH9FHEerGe7r7UAsp4G6bnbLbi/KUIl68\nDq/M1SRgtp/XrZGaCWdLozvHa9dYM1/SRrTbttosJ93bkXMEQ9I8dsY9Sopp\nlXQPAnuZo4YEG3qy3Df/Nil0mljI73Dw80UgKiWNU7m97pF/VBspTEuE+Lzx\nwZYF0SoJPl+tzhCIQRj6zeXbscyNjbv8Zw+QF8kly4QF0DwnAislLsz9Qguk\nQT01VM2fmlRAQwEHh7Bi/Xgp5LEoEUgFha8aQiPsxJQnhlegFmmudkOffz00\nJPkvii3r4IdG59VTidXQEcPyqS0DBFk0pNaJ2gJfBsH3+2p+HS1GTz/Mfify\nuWa3\r\n=PATV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.47ed2750"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.47ed2750_1545346210997_0.48354848072744594","host":"s3://npm-registry-packages"}},"2.2.0-alpha.82bac610":{"name":"primer-forms","version":"2.2.0-alpha.82bac610","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.82bac610","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"86013ae3f72bc6af2657a72102b40dde47cc8ec9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.82bac610.tgz","fileCount":12,"integrity":"sha512-psga3Qme/jGhWQO9ncHJh+OH7GwtSKlviF7UOyhiEGq5ay6bKYnNqBAUO2oYf/xHgmghjb2PWPOMhJVt1nY17Q==","signatures":[{"sig":"MEQCIAR1bDwcVQ4k97ehTXSYsLcuebx6oEDDSmsxEZK3IYqtAiAR6O2w0qFHAwd9rpkSyAYr7E4sls6/ae8z/NeufduEDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHCANCRA9TVsSAnZWagAAx8cP/13WRjf+cLWMgvozHBNw\nRtzeoTpVzEPTMdwATT2Ypfrsd98E58C7uiBSqYwhDslEYYO4o4rGkbJ8I/2K\nk3fmIckytNLcY6ZI7MMfQcgeHfV/vzEkZze4hiP5NkdImbw+Z4/2aMT9E411\nTt7PExE1NR8i+w6hYJ7zRRkh4DI3j4mTfX8qsEKCnFJvFEBzE4nYnIelnvxT\noGCpiZUEIU4dDJ8eM9X2MiIZluHxTXVHsPODReFfMN0xcxQzqBk5BczepayU\nUZzRHJZlMVbq9WhXz92L+xYTtZN3+a+p/mj+mVSr62nuQHEtPYgZYCK8//Xq\nis7JMjTGdbJ8qrPpeZzgG5APr5zJ8ugqGjMLOXJ5cfgyfI5V27+MkYksm1Wf\nHVTMqo+de2A1rPO6nblvSIacYH3Rrsfb/tvg+DiXJSrrPiKS2D5nh0pkd/CU\nD5Vgqc/EC+P4a7vhSrr0mDsjfuMr5RpU2Bsozj0UcHlQXGVYLCwJONqsJdrH\n/QSQRHLZHD5bhPoKwn2OzzMuSjs4aMt+dGbAiDbVbveNwIix6+lf592sTpt0\nWO5N7U0ssP1LhsfggBPDOn9gN+1i1HgZe/hjFlepCkGDfq95G4FcJeyCkEGq\nkNwirRDEL76umT7KE+gLyzuNbuDx+ZPjo2lbtV9Y80BfBt9PQ0WiirSirA5X\nwdnm\r\n=3akj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.82bac610"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.82bac610_1545347085107_0.8366675198751155","host":"s3://npm-registry-packages"}},"2.2.0-alpha.15a93353":{"name":"primer-forms","version":"2.2.0-alpha.15a93353","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.15a93353","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e22fc767833313fb00876a8d61a313152a31cdef","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.15a93353.tgz","fileCount":12,"integrity":"sha512-2p3EGRMWuAsVg+507eTd9X5+TzmEzmDAPfQ03VZlR8rvWfFRNJHgKebGWoNLsq6qzb3VycDElGY2D7dpnQrunQ==","signatures":[{"sig":"MEUCIQDPf/TjoLRNND/bSfmTGHfedsSzbiclp+N/jDlIhA1j+wIgedkABhvnHfRtJnSjgzLaOmqfeatv2YmPsZFIqb/7g70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHCJZCRA9TVsSAnZWagAABrkP/jygClVlRB8yo086HhCf\n3qc9Z9G+mTZbKDBKKxhSak8KC4zhLTakEHpuDzAfZSCe81frcKxwNFKfRZh/\n+KCAbUrUcRxIOtzrecddpvfqItSKzhZjvyKl+IOqcFSu4gdyCeDjoiIm3gQw\nY4JPrU6VWcdStCjKNGlwJKbEQDZ3QaWJ5wwQJ6nzg8V0aNQ18Stqq8NF1dN8\nBb1P57QslAzxLatajvhFnJ1L/m27I83ee51nlb8ASD4VeN+jRrWE3QsNxBnd\nBTT+/1f7xRcgHUgfBpjbyGLvdTSczPZvVrXo99ootWVXDNbdGqHFOhLfl9GH\nOflCyFTWw9fG0cae4/0EieANqZzRFpQppjpRpMI1Fba0+ih/ZJk1Hw88h9ri\nvLKWVUorLdoIRRtbghNzZR1N7171j2I3n+jOp6JCpAIhMy509cp6iE62k23d\nNc/zDWDcRBqiwGDKIFitLs/jMFm9rDbWqqELeo4sUCsxgZoVX8Mx6HuIWs66\nO6sLRz7ZUpzzPGA+8L3e6QVyiZpOSHoBKDNlDOkRexSIoktvaWpwMZ5q+rWk\n9OgHnS0NRA6uP4FnGuLU2x46dRVSRamTdgoY3w4or9JFCFk5vwyQYmy9xDOE\n/uDlhZwMLVF8WdPUuvC8Ynig8PW71LzL3/aIzB7UHqOTX3Acs/749xJHPiFr\n3Abf\r\n=vbuZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.15a93353"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.15a93353_1545347672772_0.7051376212884237","host":"s3://npm-registry-packages"}},"2.2.0-alpha.50e7198e":{"name":"primer-forms","version":"2.2.0-alpha.50e7198e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.50e7198e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"26169163b343b79b26d3c829e36bb65f8949ee62","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.50e7198e.tgz","fileCount":12,"integrity":"sha512-ZYnvaz7ClPHyOcOlMXUenGcAD4Wt4KZVHhPsVoWSf3+5T3EHFN7orcjc9nTRASsgqyfJlSjuLD5dZ7EiTuTIXg==","signatures":[{"sig":"MEUCIQCkUUhVuknP3mHaLq7p1GeFHR16uOSsnIOIkQ/2yYc5qgIgJwxQZfYXhVhVa6p41kvcWd12adstp1Y9DNmrhIcy5gk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHT0hCRA9TVsSAnZWagAAG0MP/0XE4k5EZbuYdO989I0Y\nVhjN/6cNhiuKBBPXhWnzz8geK9GelQTL6GTevJwbqwaIBJBBSVdEjvrCFvND\nURyKzU82MVRhnCLo0km1smzgUHJ05v+akIJqlyx3L9WhENsphg12+8gGv3xe\nb+mWuG0tzLJDDVUm7/XROrXmgMcemHKhsmZZaP1vaEM2/U1RMP8FqPpW+lAL\nrgscnuBd21yweJB+zGEsvLvNQPY3qYMfzPSIo5ptTb9ze1tMjlhQYWTi8yT2\nfF+9fqmgBxJv8h7tytsycDohS0imq6cYbocsROsQbp/Sz13wmnlKZ8+EXZNm\nlk4jhHFexJgxb09TbzLwbrG0CNlmr8O+XNojK3QQZZja/kghtgl42+JConpG\nsx0zfWlMfQkHJ7xBu39gtW9joMeeP8pqEKk8ubqwokSUUwBoby559BGInCsS\nsWNkZJafLS538WNqvYdV61zf4636OKnb3b5C4HoGgk8+RlRnqFLJdKKCdORT\n5eJv7bHnd3Vbna4tnGPrAAoPdpEZfgpvRykUv6pBieFAq90lP4LUPc1wVW+6\nPWp/1/PyGInMf43aRYtpHU9g40rhudQ2yS9mZzD3S60voKtKUGIsGMpm0Qsl\n3fMABnH8T2Jwboe8JkAFKZ0rzg7VSQBs7zmnHRH0rMCbBkAPayVBumhnCQrG\nz4RU\r\n=WUAu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.50e7198e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.50e7198e_1545420064540_0.22337440748932336","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6c54e75d":{"name":"primer-forms","version":"2.2.0-alpha.6c54e75d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6c54e75d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"95ceab322cb608b2f801c446deaa5d22b2fb3122","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6c54e75d.tgz","fileCount":12,"integrity":"sha512-1jyKMhdoaCKVqOSNAG6oExDyu9eVbOakWZCYO2tZ4v8Gcgn+hQcO843JF3mZOIwj6h5IwSnEADfTCSsrHoh8Rw==","signatures":[{"sig":"MEYCIQDBaTq5COqTJ3mudVLQrNBopvIlsZE89GL24PJCeodNuAIhAJT9/fP+rhdzFar1mbfc4KUySXy+htC2SSg3V9uwv3uv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHUvVCRA9TVsSAnZWagAAhsIP/iGrAqDjzg/YRtKwe8A1\niVTu7D32z5xkLwKM2bTYH2uKIR5ONhYO4kZ+ACgkbdKd2QvFnXFu1iifkQyj\nNLXjwfeG7GgN38H0A0lOPf2mgYch3BHGMfWhZ7o2E0axBDPgrffJ3gDZSHCs\nuCesoafxj7r/zvyt254D2rH0tok2w8vAXuryv+9QYJFBydsCdlPMkiMESuT3\n58OG7wPrkjEltKR+MTqR05YwQOJHpAe+XRcuWVH31gMAAAgmh35vz2ks+FTJ\ngVPE8EkVf69YFYAIWry7t6B+dFY9dTB0bixvvewKd+0sKAKB2rOvnJrq6kKh\nizk4MJPLj+HRm+LtH02VRr5OKzfnRwd6ElvxXHfuDg9DlsjBY9mEFV40iamr\n5ynGfVeX873l1JgRc1poNQd2tgMVeaJjL5BzWYU4jyo4xx0qg/Xb/3uVXu8/\nTXgX58JJHd1D56CNuYRAkYyEnj51UQvWq8bH1hiN7n40XAbZTfbnPi6swPzx\nzqmZ4oYVCyfocjL2TYXjFWvatV/qRxAWFnogeosTnU8ahKsRcK/uhcC1B+sS\nK6y4DdBvm8KL0U9l5rJKIxi6BuYQAWgIt0HNpTX8a53pdDesww/uniUecUJ7\nekrmJ2LFK9lKahwxidUAHuWQuxlV179xMnSbJakVGMuelkf/uPzP013KvWT4\n3EPj\r\n=fEkG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.8.0-alpha.6c54e75d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6c54e75d_1545423828698_0.2668276519741346","host":"s3://npm-registry-packages"}},"2.1.6-rc.5":{"name":"primer-forms","version":"2.1.6-rc.5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a38231b2666bda58addbc018dd356d04292ba0dd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.5.tgz","fileCount":12,"integrity":"sha512-2LjqqjXKsSBUXm7aL+x/LS7/0qMGgwDoo8/+lBF3WJL2C7N5Kk9k0ACIeaPdnh9WkaHOqkJB59G5Yzacx9jjkg==","signatures":[{"sig":"MEYCIQDG8GVPGAD2ea62Nn2OlpgsQcfDybqwM7TkeyU4CbEG8wIhAMSPSXx+/t7JdQS5prDgtDQzgkaLsqKiFaMTmyRcZBD/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHWvnCRA9TVsSAnZWagAAmFQP/295Ch6DRLLW0IvL5SxZ\ng0X0e87iujyNCxoLIva8zvL6OfbQN3cCjW8GHnl3+oLyosRikU1lsljqB+Od\nvlJwcLCoZ5bkjlE+owymba8I2wvBp1Q9Er4aRt0kVgy34KP6gZCAZfe4s83o\nPO30FOrB2w2JFZ9gxhMqTF1axJko2CDO+xTDuZ4QBVEMAqiZbM/biN0wKHbH\n+gRTOHEDJWQCv75mOS2Z+QIFwwWZ+i0aXMf2GUInqIqdLjpFkCqMDhysG2XY\nAfYmqzetulWshZOJOX619i9N0pQvuBe7yOXpIKVE/iaE/vuyL85tTFpbKM9N\niQXHtVpPqv7RKCJq5rREtl0/ia5MpTfH8+lTC57Vj0CAlWVlI5nhlcu6sHPd\nAZdMn8x3IHFrTGgAenl/Huzq6YQ2oqvLMGL4WBc3w9etrgpx8T6ttNcHWuVR\nninFIIYxTTdVCeGfskyXkuBherqDByCJE22YpoQH329g2punS8z3kQnPDRq4\nSa/1al2swrO2Qg6WR+h55G10Y7EQRbjcYp3jvQKTH4diRTTIuoxdW3zSmCmN\nVDp4ClgxnBP1XkBTA9Ofp4AIVKHGFi+N02RjFlvaZzT2P2VuCyLDljHrTmuT\nRtOiZNkXIQyhZZ1Hw1IxXYggwLmz6FLRNv0yuSFkWI5fvZ5G5dQy8tW8avus\notpH\r\n=wVnv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.0-rc.5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.5_1545432032207_0.9128104488419091","host":"s3://npm-registry-packages"}},"2.1.6-rc.6":{"name":"primer-forms","version":"2.1.6-rc.6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.6-rc.6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a6d9ed62dc3eccc3dd9ff46ee0f1da40dfb998ba","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.6-rc.6.tgz","fileCount":12,"integrity":"sha512-qeLqSWaU5h5wb32lhOJVkkP40V0O5jpsMhxnriOTgS0rqBY9MtUAM4pqVSerVdPPknd+PFc2bMDXLS6CWmFPUw==","signatures":[{"sig":"MEUCIFt4z2qY+vuPwNUXac6ANN9Y0kWQvUvK8MZt3Umza3kKAiEAxFKs59I/Y0/R2KrlCLEZjL7xG3enFolAa0yzZBt4750=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHW1FCRA9TVsSAnZWagAAhMkP+wRJkVEWZQkTy5nks3y5\nP90XXfeDUhnNpZSZu8LTxDdrn29blDroAvI326N+Txno7UgjrxwFEsUuaZXL\ngl5MXlmNl6lV+3w2mijluVdbZKtqYzqoleHk2pFQuNhbYN4xrV4RfbD2p5Kc\nHIVuH4aBDGJbpevqNyVshzykUFpYWYZE1d5hZc7ut08XCMiiCdYVuNkjEFeL\nFHBxsMWCXZXgu8/rNGAg1MtzJvf31lqIz1p0IwLF8I0d8ZqenENZ96I8ffpK\n5rntVXgedV1rSlQIRPSwpjDtvOzAA7bpoqP+GbjteNc0vZMnhOdN0H+hYjX5\nf2KlQulAo/QUT4Yvoth0Np5W3l3dANgdd0IVaKGzdOykd0EvV8p/ZXhKm0pc\nTFIySavcqpJ9+lgpKLRveVW+5ZXBIvT00veiJZ0e9xpeC1aW9G66sT1DV1+s\nWA6e/53ldInu6pQnbMaDjM1ge77Xu5Fqjv/43kp660cydRSN4IQxFoMZ2T2D\nqipT1hMljBJ8l+P5tU+b9o8SO5p+WplKyFqZZ2WNLCzZbLmmtlq4/p+48BRs\nt8cKHzC48HehF3DcJvPVfki1X8eXVsAV7OHYVAeIUip+9PRQApE2zanGbR61\nOgkBt0hKRZIIx4PNdvaKABPTzahl2NO4Otpb0y4ilF3I8DAr351dT0YBEbWX\n/Ce7\r\n=pwTo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.0-rc.6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.6-rc.6_1545432381471_0.2739180747745602","host":"s3://npm-registry-packages"}},"2.1.7-rc.0":{"name":"primer-forms","version":"2.1.7-rc.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.7-rc.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd260a8d484b0ae7a2c51753d6165de8be2355cb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.7-rc.0.tgz","fileCount":12,"integrity":"sha512-g/R3cRAxifyJvqAvCVKbWkpl5ALCujVl/LWYJDAWmnSu87ucH4xnCv0ycmKVze1scqXzV9UKOZA5XOBNAjjdDA==","signatures":[{"sig":"MEYCIQDvgs0UgTPtfe415FzhG6xNoM70PJGqYhVUmrfzeXQnoAIhAN7OENfGxBCOSOlDn260OGvEsuA/VwrZARrLG3CCFfZr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHXBFCRA9TVsSAnZWagAAqwkP/0MtpEMCsfxdZk1jL3se\na4CbTMJDtbpGenOJnsu6Xz91h339IypfdRe7TnKi+BAFKj7x1a9YzIeZE3vG\nWChKlMxohvTebCFS6v5pJPYwFszjPQzxnZ7gakmnQob7TBY8U4bYTCw/bPAG\nW7wfgdL2ofb92wDpHGkgs1vmwA9vCWqd7u3ZUFonpkEYaIwgLxqgy+OOny7J\nFh/ga1IzgtprnzRcFE34iwWCcoqKVttG7ROjiokzAOQGKfrO2Um2TCVCfK99\nPzozFbirg7JVDZ45ApikWmSy39Q5m7rJXMIXsKumSntBLZ6J0my5Wn4/rgmX\nKAdyk20ggeBkG9wJInSJCabXqahIgEDTZO5snrm8lH2pjkTn9ol3gvaV2sNc\nqAFl6oDfPxb0dHs8POcITUJA46/i7BM9Gz9eP5PNWR74sMAg84QFZgHGJDWR\nw3iI7hGXMWcy4BvnLSygN1fH2HZNu9EHVUdf7zLQColB4JSR9OrzlCTthyCd\nZRS+aVR0Pqiau/veJa0DxnRjryV+AefJvXYpHsfHRJ1UBCE7mt90AmzB+T23\nd2KLdCyazjE6eufbdKMk8zhGcX6RFpRyoVp9TYMiYB+tI7dG0iu4vLmfcWIV\n8cSocxqYuJy4sQx42JJ99H1w9keBEZT35arEbJ9rg3SzLgesCPQMXYqyhDAv\niphr\r\n=LzjD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.1-rc.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.7-rc.0_1545433156845_0.35218955301478894","host":"s3://npm-registry-packages"}},"2.1.7-rc.1":{"name":"primer-forms","version":"2.1.7-rc.1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.7-rc.1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c1be0c1219d29179a2e7284fc1e3726150802acb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.7-rc.1.tgz","fileCount":12,"integrity":"sha512-CFMrcgUzZefOIg/p4BNn3v/IBEyIFb1YaqvbzMwmKJVdXcMLW/6SjzuYMv1/bEXgJGsexG6bqugg1vGgCswKFQ==","signatures":[{"sig":"MEYCIQDjNFDi+S1p5d/wTyAtHCeN60kSBWmQVlhybVFJoG3rRgIhAI7jFpel9bXTivu1iBjAjaQVFeqgKuH0vcegABpoWjYA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87721,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcHXIICRA9TVsSAnZWagAAhg8P/04HBVoz7kevRArF146J\ni1ekUWNexDvi7Sdbn0jETKq7V9yzcUupol/w1xEMlyjtWeYj9/+syxKy/j5P\n5Xwsdhw4HWcJh+BnQXjxwMbZfSsV7jBqd6l18QmT8udns1YbRM27482JTKTE\nw9UCgiyVWSEGmYpMhupcQo+liiqOKEDNPOFksww/bMdsuAFT+mKkvZ1B+0x8\n9rRIEYbwJwEgYmSjHjcE2dHH6ye9EZwU/2e6j2XquXBe0gBHOfP0hedP8YwJ\nBGdGOaRA8dQH/7IFd2ir/y2ZwzGM2SgGt8YrfoY86DhoQGJc1SEv9obMhzGB\n/DhqHxS3ZHYF7AuEmTiMvmf3V+SNAVcIdsoSCmaCEe8EY4wYPxpG6HjayKt1\n/xn9lAgX8UJ2zmC7W2nePbx9EmDNSbayGQIajiMc+MvGHjVGdPv/zR4MzIod\nnGswNeGve3HRmE5DI1pAFmWESAIx+mZT9WpTiNUi+AA7AYBWHc/p+bJ1scdN\njiABK18OQ97O3cvqezB79t4LaB7GJJzvCg/erop/wfdiHtPomqaitvk61xMw\nxBm0SB+BkEj7j0RrUfUTND+W950/f/a79vEqlePw8kiVK64cuIDvAMALnsUa\n7oBOuHpXHrPkkyaSY3on0emgMtKl24oMaC9kYhIMMzDuTRSOlp2puofghAkj\npasG\r\n=WVKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.14.1","dependencies":{"primer-support":"4.7.1-rc.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.7-rc.1_1545433607326_0.11609276843590144","host":"s3://npm-registry-packages"}},"2.2.0-alpha.856f95ca":{"name":"primer-forms","version":"2.2.0-alpha.856f95ca","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.856f95ca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"662812824cc6e528fe2cee12514a05354904147d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.856f95ca.tgz","fileCount":12,"integrity":"sha512-xLNRAVcKqlfdamh4ezblnpCko44fOrQLHr3LYSX9jsNFO1MOVUnKCA0pnyzuRjgqC2D0GH6FUEkKxr83YliDxg==","signatures":[{"sig":"MEYCIQCyUk7babrCK2YiJ0AAFNcUg/2a1I+Cs0sohFAPh1Id1QIhAJ2mOfHFB2pGGmofZpSh5H+f5HYTkpO0vdQ1c71Y0N1i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLViqCRA9TVsSAnZWagAAArQP/0yIyyeF71qjSv2/KLao\nS/ulY57Di49b8LrsSFFS1JEwcqrQozC9b1y453IpRJaOxbQ1XWQBF38cCWjF\ncky1bWxLwu/HxXCw5/ozqPpjU5sEaPrzCEE0Y96GRw2ulE9i5a80/r+YeEP6\n6YDKZxnlx5TBNEkN3LJsZlWtB/Xb5icISqFzxWVAj0T4YXfnHteK+QgDfAk1\noKJZOvpaZTu27Z4agqEkfOqOrwAUx7NqKJPqzLFC6J4bXOdtLOUK5pmNcYJ2\nnjvN84xp4sk4DTiWRzwUznf4o/3UTzdyR488k8zOaZAn2INX+T7PN0AgkY9k\n422Dx8b9D+wulKkJYapCwousQvWRZYnNcyENR7bwTu48knNUEspXnmnGu+CZ\nO3uKVcZSxKhjmXneTCnUKdKRhAET76z8ZoNZD8qhca/Eo1e5BDAyhGeXRHM2\n37djyxtlhnGFkJ3cwob9etH+hQYtfJ49ssgGCTfodD0XN8z8uaLNcgW6Y9Jc\nx0hKTX3NHzL1dVSSAQpIJkqYv/7/qrBEsU96DsEODxyRbxzYF5yue1h8uUF5\nZ9hPqwmfDRZFSg92GecEvlrXbLPFDQHk+C3G/oeMShfJhEc3b/H5v5eOn1rJ\nLTugGhRvO0KLlRlPZjjYvbPZyRKtm0AmKl5WnE9yZcQLHmczIuYqjIn31MCf\nRdGM\r\n=F2UR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.6.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.11.3","dependencies":{"primer-support":"4.8.0-alpha.856f95ca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.856f95ca_1546475689509_0.995112541360349","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2bb3a027":{"name":"primer-forms","version":"2.2.0-alpha.2bb3a027","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2bb3a027","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6c1154f8a1fa1464012180007cbc43156b4cff0d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2bb3a027.tgz","fileCount":12,"integrity":"sha512-C41xWflL7uzfmk2sWYnlsBXaqJD4etpwZZsjbxoJQXShCJCQMWhjUhTItTAW5AaOdcUUK6WxhBAXL02S3r4umg==","signatures":[{"sig":"MEYCIQCv+mNRCei5RvaitPI+zb6X81t9bxL+4J9PhQM6B/3GzwIhAKyAG+jXk2coJlZkySOYL9ITAYbOEJgr3ZZ9yXX+cQ5J","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLaRRCRA9TVsSAnZWagAAadcP/1j61I9m10l3UOqX76Et\nJxVgUZ2NEYXmXFCur0V4HAocElQDUKlqhveXNp2zVJCIvMaD/1QE/y/NFOoh\nj2Q+0V3vrWkR9mk75BluNMMAtNOF4o7dg5wfnc3FPbVEmRqnaTGPrKe5LAAY\nWN2QY3J9kWz6Rd33OxznbqurCdiqVatZ4GsW8fq6/KkSDX4eld6ga110xMtq\nbtvSFsy3y3LTbVv9k4LDg+amE99A9lng9ZghPqJQmnU2uQ7mBIuGZV+yjO3+\nuO49HmgdbpxUu+s/KKe9ttYXr8qC3h6SR5WCbPFl0ZPr8IybngzastpE6hG7\n/rZ8OJlrLB+fbltviuVXloiTRfgT/WMRePG0IedjUcTzZyQNvTszGO59Dq87\nL30yKUCqiPlAfvQdhJ/H7ZXrECMGW6kfk3E+L4Qif6SJyAfG/Vwm0wPVXSq6\nQg4lHCKSAOxhnbN+lCEmbdCQwxPANbGHhxvnyiy0Kszd9Jcw7rF+FHMSiJEW\n2Bo7ufv8U5BTMylIr1jkf1A5FNOBWI3yWdodswOhVCny4mboIAA5WfCflDfM\ndeb21EqczRKBtXUJId4L1nDwOIsED2gYXca5q1GZ+wksny/57z6ztsBjScqk\nMV5VmvkP1XHCkBM0L0NwMZAfTDhRLMfK3gasoEGFWSuYRTsF9eBaJP6gHQQf\nouq3\r\n=VWP6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2bb3a027"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2bb3a027_1546495057283_0.4728819860198703","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5862b25f":{"name":"primer-forms","version":"2.2.0-alpha.5862b25f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5862b25f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c648c6c3789139a63edcc0e5ef7aebf62a4146e4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5862b25f.tgz","fileCount":12,"integrity":"sha512-mSp96QsdU6CMrA58K/FP5d2izsdvUDMzpVyT90QBk21KimJmqX/CWTHqy9v8oYN/HHTBT3VlBUyIjdSTVPPCOA==","signatures":[{"sig":"MEQCIEUUnQE65vcbITvCwx7Rq4hj8ZQgMiUUOmOOO+vKLcphAiBt4zNeJjIhTZNWCMl74CXWf6kHI/xxNt1uCdC3dF5w4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLahrCRA9TVsSAnZWagAAUJ0P/3XoE94sUjeKcGxBjWAV\n86rty2IMTM35W9fkCoLidfPBV1EYV9gIaEZjQKyso7kC8NKhT1A4xt+cS6e/\n2b2sF4qsJ236G3SONj3v9KeTnB4stZJU2MNvZryy/X9DcLP65T9saFKQVKHF\nRHMAc8njFUBlDaz59VPlk7qBvl1Lro2ATc/aeaT276tuoHH4Ef1eJvgz551a\nIXXmEh8kmrl8wVMpZ1Fj4D2LrdnqphOHTBg8DdWlCEkQ/s/lhzXWRPFXYwH/\nrK98SjMtEkKB9FWgUAk8NCRI+ObSvvtV55aL5CcT9IKBG/2uHTIQsvJnq6t1\nR5QmHUoBGRwEuJFDuELjGBGV3QPw6rHH8p85k9xOOlNZecaeB/KVVHMdbJoG\n8JnloE7O9MzJWvE9gy2DmpaODojW1Yu6dj3lqGeHKm5XKTlgDw3y+pHbfXI+\n8XGrbkjK8R1FG7O90wU6D8EEdkxPUzYyRYkyyujbZGM819+d2aPrbiX8fnMy\n2ibv88/qwmId1AfnrafcdkAlS34UuBuSY9OqSjrouQfAhF92yVyCyG7+HHeJ\nA55WbkfYZp1on1Jl1yxooIxoFmAWFGvYob1krZJYZaK5Ub+n1qgnvQ98VeF7\nWQcbLQbqnWNbJ6EkxxiKWcBWiv+88MLgZX27zlGXAVExsoBx23A1gm6pnAGp\nvyi5\r\n=dQvn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5862b25f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5862b25f_1546496106537_0.8205127517268496","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ee297c75":{"name":"primer-forms","version":"2.2.0-alpha.ee297c75","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ee297c75","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"74dc6ddfaeb214a707d037f6038c5a4861b827fd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ee297c75.tgz","fileCount":12,"integrity":"sha512-YM1jHrwo8NbIZmrAOf/dAllOu0L9Y8NRMhc8SaqDqk4xO/AUgWDi5fpNWUrjtantdvT6ra9BNhld2exDfCnhcA==","signatures":[{"sig":"MEQCICXofxcimxnU/1b+fOQ0WTWNt3f1yM1AiEYNaShR8FSGAiBBVgngQX8F70UP31U+AC1PEwaPFAOl9NlXFNn79JWXLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLbLNCRA9TVsSAnZWagAAD5IP/2R3ONLQVKLiH9TTUbQV\nyBqR+38kqrZtA3Z6HDjno2tKl5xTkXzSxOP5QcJOnZ+EIifqYQRd0DFFQi5U\n73EfIKL5I11BYHXY1ORzEZZERiSexyQtsNrU6uT/5rzOL5aasamTBiItgQvd\n9k1djyaIKUQqeH6yzg8hEKDHH97x/w8dcNYVYlJSmARf+qKpVOI55Wd9dh/+\nXwXddVh4yNTBJHPPWvdwKOYHF4EHJw8lnPoP8m2pHwPLDGMBew8D96hlJV/L\nshasAa+M0kK1pYeWtmRu2G/JNPlz4Dci6bpxNK53Larj/5tQBQZFzv+lHf9d\nUCUmUXOqUc9CNFImOHUnqMjjjQO6A/3Cb4rKQbWjZBB6i17a8ZHe/903FXJZ\n3YzqnfMesfD9HN+/934nS1/oZ6Fdw/k9Umv0mJhiyNh+Gr/CDYqZUwcr+DGz\nerhZEbpyBKdh+TxNKPYq1HMIP+TnGhycWsK+gp9HHueJbeSi+pJNkQiVcpTj\n+v3VrZEyEem2oJeA5x17oqMFNUjhw4rEPgfoQpGznpm3ig+x6Phuf63S5np7\nbCct1qe+4EfBlOpNhtToadwzeEydOZg9RRJNszSLno4/i/WbS8AzOBxc9i3J\nPLZato0aJXU0wHV+uL+z+7CS572OXZ4ZE2vBks4Ue4jHZLwQEWHQB4VKOyKi\n7MAh\r\n=PlgQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ee297c75"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ee297c75_1546498764969_0.06269236890940988","host":"s3://npm-registry-packages"}},"2.2.0-alpha.413e9cf2":{"name":"primer-forms","version":"2.2.0-alpha.413e9cf2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.413e9cf2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bb1cb7fe16c8a6ab2bce5c2a4fd1e5fcce2eb090","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.413e9cf2.tgz","fileCount":12,"integrity":"sha512-9j+RDPod+Zqwg6ZKiGu431LFW6rLRUxraxSJZQdIn9qVuOyYBnY3K7uoFy6s0HCvYSwgUTbDCgD9aEd/UdEFkg==","signatures":[{"sig":"MEYCIQD+t0wpGuyPOICiVK6K4Ywr5twgpOymhNJ4yeLMT9j3dgIhAIlX8g+tRmMTXBrL3w3PwY7CuvAO3cK5FZKwY5jL3D8p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcLimUCRA9TVsSAnZWagAA0sEQAJv/EOkzXt+tlW3gsG/R\n7rQjqpHqrChGetJdOELqUEdg9TrX1XPhHbjtrvvFq+wxAnE+VY9dTp0HMgmL\nAiQ79/9/4P1vnS4NhofRgjiHV3MpFUKfnYI5FvhsjcmW6TByJmd6FHLK5B+U\n+sq1nODHRPq/ABsml4VIO6/ry04EvJ0eOeMPEvkiB8Cf7s1UdZ/TaddtQFgG\nT4NXoXtlrDhCztzP8iuaJ0ioUngaJhkqZmcyy0/pnPxbSvKpabaMOvcu+q0J\nuu/Dg/Eryegm5z3qp11HrAlm3UWwGXc796MGEYit3vU1cAKw26VPtuLO42I7\nXAAuYCXKuDVYpxAtA3kGRFY4O1lAbvcv0KNlsYnUPaeL5qLc2Snj6vbpGgYM\nYunWTq5n7n2zy6bcE5QjR8IXvUONZokoi/A2+0NEh1j2QdhCidBYArsVAQXU\ncPClPyAxh6siVzJgwCZfsfSkhn4KcGfeIFJ1e9OniPPA/guDaRmpAFp8Js4S\njLWRPJJbjUxknfBzA2k7Xf6/fgtLY1sKp2nbXTmNIwWHwn0FAwLJW4R1+DQP\nUjtLkYXqwYMxmwuWUSMRUNFonqfTT8hNJ04YdkzBwlGgGWghFi90QC+UnGh2\nHqbBRh9dnHPOsIqK9ViaN455o5zhOzaOIH9q2aa8d0mbXVMNKq6wTOAAyUv7\nL8p4\r\n=jxeq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.413e9cf2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.413e9cf2_1546529171530_0.9730875982532854","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1092c5ae":{"name":"primer-forms","version":"2.2.0-alpha.1092c5ae","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1092c5ae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d76ea568e2434b99dd3e67b5a496dcfca4b11bb2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1092c5ae.tgz","fileCount":12,"integrity":"sha512-90YTNgK+NYgb6qeuX07bz/Gg2Rj6+MQ8zRRtOELiLP2/zZGducVzz1rwEsh3WpDBY/ESQrfu01tNPPZTAmV9Tg==","signatures":[{"sig":"MEYCIQCln8sd7AIkMHbdCBH8yG2McKa5HTaakSZHlisekKcZ5AIhAK+IpUCmG4Kk9xhsV2KY6PAR5khuNiNRxvrBP1MYjNj4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6YZCRA9TVsSAnZWagAAylQP/RCimS8Me3tqCoKWRiIL\njg+XByt4JN1yseF+xQ8voonscgGYO9dg5HNM20Jwm4jBaRohYQe1SKZcQG9W\n7wWZzmCIwBuT+u3Q0L7KxRdebkZWfSZ2BC+f3EzNWU3EvijaOovCsUhimeBu\nzy755vcilW2zIcjxPl7AD6ka+nohMZKQ4YFHrpR0bvX/3xkpB1Yquk7iLNc6\ntE/jN1F24Im2cic9PWgqSSCvQfiajlgpyTGO74Oz2PNHz+homaO670oMsRJ3\nZQBKW3RXqEMRKSI8rGvhD0aJDrUs/T1UBRIbX1Qiw8uVnuu6QI0O9BzAkWVC\n0Z/bUnw1A22h/vOWLKVCd54Rsn9cwD9lzow8f9C5E4qosiv/FZyuRXdZ4Kqc\nIDZcOkInXgStRKUg1EdYSrFZZeI8FIDfmTeZ48zjywGaKZjE4nqeVeZtWOCd\nBWc75NpVG55wDERJARJlIVmzZe5EZwl9I5cd7ovVwmIb8gwYg9lYSZZhCV93\nlB2H+FWWK2oxpZweUJJ7PMiTMB/3ZWpEqLi+RN1GOSOCsRMVUh4MdYeywIx+\nRKN0CSoEUuYaCYffeZOIQKyZsi9VlR2+b2ezyf4IEghf71qy2kSLwItQqE8a\nU4hgUMwWOHjb4jBNJ1XV3Rhsm2aAD3qdf7US9+HvaWa02a1QUbd3rNxpYbc0\nSRck\r\n=ZX9F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1092c5ae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1092c5ae_1546626585297_0.963765510812925","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d2790373":{"name":"primer-forms","version":"2.2.0-alpha.d2790373","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d2790373","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0f8692ededb1e3d3888822a85cbe1e1bd2dcbb7e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d2790373.tgz","fileCount":12,"integrity":"sha512-owZSZEFFSkr9aJBRThhv7Qot/7PUvIBTnm3yfz1cb0wxxjecczzAAGU+G96OyXo2BYW3dGR5BCzZheG1g+0oQQ==","signatures":[{"sig":"MEUCIQDUuhLPKgTgoAXQ2anknfLNlJJQ8Holh5kTnTnGOKDm2wIgOPTARlJcUgEtMAXX1jk9VWs6KEcCKBsrrR6Wi9ypdrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6epCRA9TVsSAnZWagAAj2EP/0ckgJejmRkHxwgQgBlT\n1YCf0JEr2ShRob3zkfGK3J39kHFycjD2Xu3CUMNeYoK4E/3aD054jR6eY+2R\nCSdDylbTXoEVYypMH7p+zoVEnpy1XqCVpTfmY63OLxQCfnCL3iJYuNFiejdp\nTMleILHFtRGHHt3B9tqb4xPpx/i5ks389sZSrgYq8slB7J7iq5askahxM6pk\nA/ZzuAjvT6rLJ7SvmSux7jGI97gKhPtIITuCOGehpCkTiGHC7tGVQshh9/uV\ny035bqQ2mMhIPWA648N3tQ+4dZQNCzE8rIQc7qbi6GIqD9zXKeb/QVnF+msi\nLMDh7budch3/+zIRVqnZin2YeLv5EsRD6i7f+ekPz5SY9/gRFs/tEnmj3dKM\nuDNIm7hAOzAnVi95J+Av27Xt/nDdqP5BMUyg+70TXlS3x7Sl6JzuifWrpNdd\nuAHR/mDBYvaA4iUJnHwdO+90OHFi9pZYWRcTilZ1WcR8U7Jb3wu7dsyMh2Bi\nOqt0PMzgTMYC31uEwRDMVaqUtkEdTLkKnS5iWdcN5z/bcDecVu+xskMAi44E\nIWw13wSuAD04kglSEQmNRGGFDC5uyATE9Lzo0+Ux7haRA3711VLSmwTkVRxI\nJhKtcgNB00tp5Pr5IxJBXVXLVN/9QjgWvEyvwvo3Yuqs8ZDePhftZySMkC1+\ns9PI\r\n=OqyC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d2790373"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d2790373_1546626985366_0.7415111980285032","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f83c67be":{"name":"primer-forms","version":"2.2.0-alpha.f83c67be","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f83c67be","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a2f306d4294d4d94f24eba3096185ecc1ff2bf15","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f83c67be.tgz","fileCount":12,"integrity":"sha512-UyH1nHsuDxZ6pAWmEu532p62zXVX/8bUV0t7IISHGHNwKd94FOe5BiuiFIj2AMMOUF6lugKIO+8ksjZY1mq90g==","signatures":[{"sig":"MEQCIAeuu9rQHNnUlNQIca6zuAaoVMCDj3iO/tZv227/O4EFAiA9Ob5CbpOwl0eiz6YTwrS3cOcQXwRYJb8g4KQ/d80hVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL6ueCRA9TVsSAnZWagAAHvcP/AxrQKmtdHSuHMedVhf3\n35rHwOHpTlmUaKJyGIsRn1MlCRE9pv2YR9IyfaONsrvaANpr2yVcESBvAaDi\n0/SvBMJV6//xGJK/VMOKXGrJbg+xWL80nlEkhu/f5GXqy/4cO6t/BJs5vh5+\n2apm1aQ0MgwXUM2N2nFYAadRLhAY8Hy2ht/UwZ/JdBPkXaOXRPSkDtCfT167\nCEWsPdExWycswNCERBJHnup2fAG6z4kbdS1TizONJaR2tNKs9jrlF4+l0bkv\nXcy6TwecCaq/h4hokTtwztt5yMVy+KI+KBA8AjE++c1xfEGRoA+5FY6lw7Xa\nMCisTwENTjNG4Znm1OfLnD8CT7yCoZL/aVoYu73jrZmRpGoH1CnaraMXmep5\nvt6UYpAWfAo5pUsvoKVcGYNuishoOgIV7AgeZ35IMcsnbKvleuhgAJ0XFbae\njGM7qcxH635jUpd7jDZmHNDcBOS8kkLlWSy8DHr0ZOSW4zNt9sAJnsZmcgwE\nwSBqB8ktmOk8CCBtbLlovuoAQCr88HuaWet1oCABDwiimhwZgVMCeDGkpquh\nS5pJA45ERaFU1GujFWJ22VrKxPAeaUcb79fhIHJC5TIo7lKut+B+O1JgPd8f\nS8nAeaUl+biBP/XhY9Jjgna62lOLHxqrnsfbZsqDGqgEIu+QP3kah5C0HYQ6\nN7ga\r\n=ccoo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f83c67be"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f83c67be_1546627997735_0.7827127252759203","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e7242c1b":{"name":"primer-forms","version":"2.2.0-alpha.e7242c1b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e7242c1b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0fa9237a13131713436a1b11d9ef9abc7196e5b0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e7242c1b.tgz","fileCount":12,"integrity":"sha512-ULbJ6f7hOIe7CVHx2q0RpxHU7e/nWVhlx0Q5Ex7gkuCTEa4y39s+uIU3jzJFylbEoSdvt/Ue8k01m3CaMuL61w==","signatures":[{"sig":"MEQCIDId2QPmAvIdbDDZg6RnKBFCgVf8wpty71C10H6OwxGrAiAvNmP/7lLAX/Cv/q53/SkFVxJSt/a4XVbEUNf/cal8nA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL69KCRA9TVsSAnZWagAAvDgP/2eFsi47MnSE+3csDBIr\nZu7E88devJ2go9lF4B4Gqw7Kl/A9Fk03Q+/5CSSXRRk8GJD3ssiJeATGRD4c\n/psaefCIg1Zvt/JM5YdvOy894jsNZC0PUHQ6f7WSdCvluh+nRZnOeM0kqIl9\nDh5mBeX62izag1G9NgwC3F+S9kAURknf3mlwjD6Y4LNcn4/mz0haNncjlrbI\n1L7Jt8JR8tYhqVN60vk9RyN1ZtlY89NXyZOJkl1K2VxlXVtNrNmOiUcK6WTx\n/+mB5a5YwzQhUCq3NRYWdbw7RPjh4YwNVN3NSTf8ETX4KJk8F4Vc9UBivb3S\nPYv3zDewm53F8RnzWNSHX3R6LxEelVW5wmmkEaTGH93oGgIRTDyV4wzuCcXP\nGguTgJ2RhL88Y655+TdlJWfAB9WV22JUweLiZIEWL07zsDwzsWO7ywRVX+lU\nHAtarWPnrwBq5bvrOfJUWnkMp0Rn2FnCP4RTOW1oXlpaaQxxT5CIxn/w1dLj\nhP+cMAEnIuYnXolAEBFP+A4HdyhIAaDRVUvgi1b8c5mwA2Tw9iby8BycU3oF\nzmgTD4Y5RY7nqhGNF9xSOOYPRhbzuT90eIUgGfg6hwsvlqMwwub5+RiG9QUA\nfivuxqms7cEZmfkmLjU3irh030V6md0kY6JvPmlWIY3Pgq1CEWi7o27+7yBa\naj2A\r\n=7VFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7242c1b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e7242c1b_1546628937864_0.08689440586928132","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3e5ab64a":{"name":"primer-forms","version":"2.2.0-alpha.3e5ab64a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3e5ab64a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f44000bdfb84047ab91162a823b41504bb10adc9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3e5ab64a.tgz","fileCount":12,"integrity":"sha512-d3P3LCVUPXIDoYbTeYaPUMpvKVSKu46tK+Dql2vGloDfnV6ngjK2V7629TJIICMYVy07R4kwSHTwHIhCohD4sg==","signatures":[{"sig":"MEUCIChfbXmJCVGcXYuwD+6bCRwKiIlDLTo5hhjDPIFavGGoAiEA9EuC9GzOnvWqwtc6q3ZEtgpdk3P4QZbY+ZTXgnHx2WA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL7maCRA9TVsSAnZWagAAlDoQAJ7ytfpB3Vau1ZLsGlI6\nwPzJoWLhwzu/bpFsgKGXGdn9ERC5ScapAOPOHzGtI7alU4c0DDMjTM9oqPD1\nLEMByOqrbYtErELtxFh86Pa9eOfB4m/Y2/aTksw8a9JqO3QSCdCby1iVt7f2\nfDnT3TcmlA+EilAEA1W1mCu4Ss69wgE5gmB9UW0gjadWwas11DmmoCXP7yCb\nqcGQRw7BsLOBaNyMccTni6RTNwxQAdqBNa9gEOPzYcW1blUfzdzHzozRTHJj\nRbJSDRZ+5RJlVOOo1svXRlUUXBCWyQdlZBCZR0wgyubQCNjMzKpkBejbUkFO\nrH60QeZwP60eIavxYXsbW2bxfZnPly5oN9Q/k1habP56O9/BV3QzEkZuhjVQ\nUO2S/64esHm2LhDxnZY5teFvdRQL6g4dSr63E4mwe9RaYPMAWmutq8EguF6c\n7T9ylJprVqYdC69be6FnvjBpVtfXKgJlOPr1ZfxTAsd6Vh1e9XpNVhUzjl1R\nFFkZ45l8LnLGLZLJvexvKGW5QggD5OALbCw/zPG2TBgEBrjEpEosdfnkKZ71\nqj9kVFRW91v7Ud4aylbu0FawXI/cHyjkWjaTS+jOaOMUy1Yo46XDRtEB4cg7\nhMZRLqBI/u57REJRnyGPc+DU1Ijrx24zRmBtpXYDhj+cNjYEF3Ist07TyXq/\njkQ7\r\n=rVsL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.3e5ab64a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3e5ab64a_1546631578178_0.11383694651338305","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e7877054":{"name":"primer-forms","version":"2.2.0-alpha.e7877054","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e7877054","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8bf5af80bbc94bd940194d65df8fbf994c4fd7f3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e7877054.tgz","fileCount":12,"integrity":"sha512-Z3WC2Ri8g99uGWVYIfBYhX+gF+sdAWMm5H3oAid1YEyVBm7B8v1yfXRh8IgMYf92JIFfebq9BDhvONCgGIjvLg==","signatures":[{"sig":"MEUCIQDlBn6UBKPSAppBqzvwiCkDnbFDiJVA5131KRng4uzdYwIgQcIuMC4q4gFDYTzDRb8VZMfI5VT9KpdHAnc0Xvh+dOg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL70eCRA9TVsSAnZWagAA2/sP/A490qCJjnPUcbLH9BRZ\nZpgtIhywj2dwzI0HmD8aqW8/zIikqQj4KMPe6UePPKp8cCKKeGizUxq7IQbB\n69z+YmlFI82+7S7b/jSCi0XCkrHTUaobZb4DmvvcXcm/698SYUL9cQD5CZxa\nlJdeXDREctIP9ugjFaTNLFL3SieKsT1vPWfWiSWvzFpamS7lIEP91RsfhnFD\nSn2auhObtXvzhzNNKAPoHBbjVrqzLsF34LYbWzzt3hpTLmykE/hOYIYNu3Pi\nrG9Im94ZMWWwxYNhR5uFu78Aw9BoyRLcas+XBtj3D6o5QvI8j01a/c3Ofma8\n3by7gTv2yDOMZSA4Ne+y+5mOcZE149ySgeJ+HwWJUE6SmFq3UthV5FFXqfKv\nxetdw2TZg7zfok334GGaxxHs+3iBGXYkLVgYYjFnf8VOXCPviylIc82G7bTV\n5NbxljfmWVEET3sj8Os79xWtUnFA44indEqf9BnNoyJ4f4JuANUu3lx/NbKE\nMpe9LP7Xx9IUvf52yx1RUdExoCkPwVzFRMBtlxIt4cTiINR1+3iF0ENEtJwS\n2iRKq32IqniSx+rO5vf3ms4ND9QKffHxnVYvUkcOwctX0Z52hi0MQtrsM6WZ\nVX6qFpGIDQlyrBwoYGa3r6cx3XYiEg0n72BlqrIeq1cS9iVPtsWBrMIxppOx\nyYrt\r\n=iksg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7877054"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e7877054_1546632478138_0.2931098033736852","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0b0648ab":{"name":"primer-forms","version":"2.2.0-alpha.0b0648ab","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0b0648ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"47dfdd720e372d091e93de32480925c1bfb0b099","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0b0648ab.tgz","fileCount":12,"integrity":"sha512-Kll+MgyGxB7W/Vr2qdNmDbyMu8O7liER2h1JWvmJiCVsKlRLJMsHtYrxMe6Z0lw9Yu3pdSJ2k3aiOSZh8w/P+Q==","signatures":[{"sig":"MEYCIQDVFv7GbQT1DcYPI31kOf3NOwUDI1AQTs0RASd5y/4tmAIhANf63IiQSbsh/h3IvAf8mhGBaX+zickS/jt5xFQ/xLXw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL8xLCRA9TVsSAnZWagAACpEP+gOmAzb+qhn9iJ7IB/ga\nHvV1b34XEnCZxfcrRvu6gvN0BX5T0LG6m3HjVwWrygoYozMuYPKcqv+6VV+A\np0aClJtz9BeGf+SZ/Q0ynR1KB6jX3i5rGl9RvcFklGs9IiBgkx3IH3DJ4HzL\nR0MmGHaAksNU79wmVo2exVu/tBWLhZqvL2unwQwPfwW5CYsP6BlejXXFAdqu\nXIFsJJqbCOReSsjs42hpza1Pis2omnsMmMFR5+30kZYEG7Yzci2cIxzRmFIo\nFedweGZzvJmhj2Z8i6Sf4ns8uJGhXDnJA5T5lqZKJV+1uklZMb7GwIPhMVoc\nWUek+pnJKqjUdFJcdYmAXM0/Y9Jorn03w4drI2/h3qNON6CnUULnLwgjh7cl\nUhKARuK6cmYRdtPQfnz2EHqdsnmR2NDv77BjDuUNDguGG6Ds6GO0YVxzLDyP\nUcSSYgT6j+fwLFqHDuPD1f/cu8SEPYdyp93nBwjQJNZqG7KTxvI4MHI+XMgE\nm2PfBDghFTbMer0BgvZ7CF4ZnDD/5gPjnYrT0XMUI+2u8W7kiuLWXj+xBOPN\nDYvkjTcJf7rgcPqBKqdqeLt6paTjk/1ZxbYvIVCXWXAhdTwrc2b1XwYQ0LsE\n4yOvf5lFl8IfizpwocUVrBUZ/YhFTlci7+jj3ujAunUumgtZk+x3uGMjEzBe\n8j2H\r\n=twIo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0b0648ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0b0648ab_1546636362981_0.6773421900804215","host":"s3://npm-registry-packages"}},"2.2.0-alpha.955f170c":{"name":"primer-forms","version":"2.2.0-alpha.955f170c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.955f170c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9bf8f2f1ee25d3ba7785381423dc8ec12d9d6b40","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.955f170c.tgz","fileCount":12,"integrity":"sha512-Rj+bwecssMJXWjJH43SIjAO5tmlI59u4W0KLlojPjoTMmRE0QfvQG4LXzMiUcswtbZyuSWREPKfHIN1D9LM8qg==","signatures":[{"sig":"MEQCIBWixSAQLnyDkqBAxkb76LzIchJIWSqNUyzTYztDlfyYAiAGPM79kj+yZwgU5a9qLI0m3pzXV0u1aT4YsY7txPgUow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL9YDCRA9TVsSAnZWagAA7tsQAJdOw/16C0pqcVtkbeHL\n6v1v/3qUMYlL+p0VTqykhblHpOz5lx/6SQAABJChO0+QF1EwqMU5UC2qyLrd\nB1NsMKkGVwjnYagLv3EScDDmLCGkAPhsHXEDikfw+ilQFPb23o3N1ZaNechX\n9TvzWYNULm+BbZBj9XMum+n3lWHqB5sjH1ndCJsRARMoo3IaUw7A8bLJLW2g\nbkseLoinj87HBytY4WEUrT774Qz5QjvldgRoEILXHo23KyGNG5p+nwdh00SC\n4sqUZy2hiGpn9kXZ6AsfZDimd3GBcNy7K3exIEt0E1/dhCJ4C03fa1gAQCYe\nFB3vE0PqvBwRuAKu+GZBg+SeU2YZK50KhLqRtcY+CENCWFL43tl6BXfs1UBf\nYkElyxXOFtzJFK5opHecsEdLpNkxjX1U4Mgfi1tYwnk5dSrts4FASyhvDdyC\nohNQfBjVGjK8m3ChJGsUcCtwXnxRoQuHGxFQnU4CcPtbHtsOOBAq0hBLkT76\ni8yg+TWsR+CxFHqc09/hbr0waS24ee1QelFMteqUSjtkwws79H6baaeyU3KM\n3j3LJ2SrxUXP/bGZAcpET5CGRm8xiqrwEo9jSa8dutXUwCUaBU4hrpv643Gf\nFE7IzwTulcDembboMhON2rNcp5UghHxRSwkGgkvZHlQZLNa8qJBaalR3wlL0\nqqhJ\r\n=lW2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.955f170c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.955f170c_1546638850437_0.8131885883378089","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a5c1364f":{"name":"primer-forms","version":"2.2.0-alpha.a5c1364f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a5c1364f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"988e27ead728d8f49616e3c8bf9352aa22368a9a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a5c1364f.tgz","fileCount":12,"integrity":"sha512-sivXDnPCLyhDUiGq7po4b5QZkAhMqoNAEz53/wJisn+GptxLOcbWFj4z6Sp1PgEONvC3R8JhFlzv/UuuAn8m5g==","signatures":[{"sig":"MEQCIGU6UfMzo8MAjz9rI4gttiY6BmKpNkgYcLe/LCOgSKdXAiAw9Rg7gSanyD9t004FBOH9kcpzeiwfNvuWoyEUvgz2Jg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL+jBCRA9TVsSAnZWagAAqtYP/2ThsT7ib9Rs3dBCTxlu\npI5dghlIqFAE7Q0i7ShnJDi1iz31cF/8BuzRPg4FnZn5RNOeR8DqzcZlUrkH\nKOgu8k7m8ciCHJX8uys5CyEe907wnrNVaE0CTiscuHVe4LdNnw34oDS0Sljt\nJWbydY9KEXV2Nu7rDcrcBALE1PEfSX0f1N5MrsOrq8intsHhcjyrrhh+lSSx\njSfrMklc5t/fj5ezfomcKBGT/p+Lwi04G+nw3qtYMylDDegHXh8iNSz0N04x\n9RG+RE8Ej5ktIUH/PlsLfnw2cpOnM+1ICxR/Pk/Qv2Rahg9qABVWJo44Z0ZP\nP3biwDf7tiIfi18FpbOOrR7dn5mudK8dMksUbJ5sV8MhVbgmL3CvtMIRjS7u\nG6azWU46X3J5usrjreZdwwxShWuRK3gwixGPY5+9Kex23S/dl30e5aQ+XGcX\nuTR9M24utgJstJBbeee6cqJXcusUxBHJSVRlUoqoqdPip18QdU9jK981dxNn\n9Hg5ABJTVbCJidepG/RhWZ6zpWtC0T49LJtvm+Ea/x1lJwOaA7kFU12l6l/A\nfdKlvGGdcWAwDYnEs+VuEQVxQoHYhwkO6pkSaJE3GSBgh8A2Qa1jQNEEkbDS\nsKMMXrNVOPx+rKoOy1XLxzWruN6yKQ/XtAxJgnH5GnRAIm+xeeUqYKRXo6F5\nSSkP\r\n=bMYh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5c1364f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a5c1364f_1546643648759_0.8879767373534548","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d9c365a1":{"name":"primer-forms","version":"2.2.0-alpha.d9c365a1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d9c365a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ca907762390e5dabbfdacea25eaf94ea40e7af2b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d9c365a1.tgz","fileCount":12,"integrity":"sha512-Zss2HEW3wUxgVXQGYoriA6glktRsTCqAMmA8yFMwi4qMN/08vwZJikSzlL5I3OUTF+3VplbfrjP616OtR739sQ==","signatures":[{"sig":"MEUCIF0H5D0VAPwhpCdouySvJke4UrFhDD81pJbwo82t462XAiEA+SHppjDIH0lEj/f7RcE3DXDECTptWdbJhxK63Ac7Jy0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcL+stCRA9TVsSAnZWagAAU/YP/Rd3cT9gSSNRVT0akz1j\nHSDFH6CHU43O0ZKOsfwBtXWuWnWoRVdVRqcslR/uWnKK5rVJG6k0b5bYx9yC\ncEVVQorXCBPFinUTMiYHVlRi66TxD2YHu8UHX2EHBH/c2ZsLudbQJBtJvuTF\nv/EPX5dwkJ6Yza+c9sYMmoO3Tl9bDkZEhrb9arsycIdiDwI5XDQTYiU1ib9F\ncjCnq3vWffTHXHIDOLQX4NEmeJ4WsLgMGK8JaB31ueUKf3vhz1PL5lHQektG\nUrO1b5ODfT6+0rubnfEaU7wFCfbbFtEZvZK9Ss8lyoLWBZwfgesFb1j6k9t8\nMN5Wkf3W5HKWkVAOLb1lR3MoUWLK9skh9mnIrZf2DRmLh4RE5s4FHdFdv7+3\nD1JELqy/xEvk4VU2CwsozpG7yBFdwhNAvzIpwT83j6s9VZwhHZ/jFK65ryQG\nlVkBVS23f7MGs1gFKwyogJT+PKwil1qCho++wuff1bQvKvODqdB1T3vfqZte\nyalOKz1CprhAms6um4OOpR3PkqovgfAmu6zu7QJ3Tqx0kZZ4b+bRvVjKadNg\nMkWKtSYZ/MNwinvitMu9gSH0H1LUo5wZ5ivK2OIe+fFEpY3U4iaL9ERET6VZ\nRzfT0C/xCgr78Aq8nXKLQaSJa4t86xGa90Ab+bQRnI5SbIfmav3xcw4Gw2mL\nLBd1\r\n=BArJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","publish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d9c365a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d9c365a1_1546644268612_0.4207642671788059","host":"s3://npm-registry-packages"}},"2.2.0-alpha.687ba691":{"name":"primer-forms","version":"2.2.0-alpha.687ba691","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.687ba691","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cec0a35451580c2277f6b5559dc50a61d4279cbd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.687ba691.tgz","fileCount":12,"integrity":"sha512-NKd3JhpHOVBHIwmvqiDeuM4bW6/qxFalFzFrvapw9ic8y4WgeHTPECSTu85g8QEdHp3pN4ZyLIT/fTlrtasWXQ==","signatures":[{"sig":"MEQCIEb+TayMAl1KKoLfl81b5cwGOxF6YgsJyVUbW+9TqhNcAiB3BocE6vXoFiicB8wWozb/d+fwLYP74lXjRG0o4tWnqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM6IjCRA9TVsSAnZWagAA6hQP/2O3ltBsvMOk9T16uErH\n8hE6/VgxY7ymVA0ysvVr68ZfCZEPip6fZ4btTZEEAIOj+OLr9K1epIHiUpm3\nJl81NeuqifSe1b79y9g1Pwjvw3ccmWA+TrQVyX5CwKMx1oXGD5QzdxjsWT9+\nW2b7FPV6b/kEiT1yReNnB9Qj0rciCi/i2t07OY6Akn/HZMaDtR4SsOekMFeG\nYJohFXac6LbvMPgxTkNP+1Zf6c+y7WFRNKnGyJK03Qv2oqfOVYkGS6fuKstn\nDoKokUcTlZ9swd4cq610f6YKQUzWia+0u2jXF9vqZlTd2oS/Ntjg3bfOF3OK\nZw/2tVVMxeADUPKPropK/rDxfN2Ex7MC70PR/W06qmqNY9qb/hEbgfqbQ8wc\n4QwouCDEyH19M2g4OfA4I7pO6RElMMH22SvrDKpjfelUox87T7K2qAVSy1MI\nKsvlva15BkVDHi9MAaD11AJ3U4LKSsvqlP5fJX/I9uy9xD5P1bzpADUXicf5\nbYTNyMwroaUJVa2WMprZJKJJ4/VJ2pba1afC9IDxMe07AazfmOOH6OsVuHNc\nv4YPvGh3roxxJ9McmWWhacUAPInae5Wzya2dpk3HwaDwaRL43zaDmNs2aExp\n2rq9w+e2R8FoK34lVMwBvcLmEMzQkE1DkQy7S6jBMEjLkoIpV88iSNlAiFc0\nEZwk\r\n=ed8R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.687ba691"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.687ba691_1546887715160_0.30499211796927383","host":"s3://npm-registry-packages"}},"2.2.0-alpha.95307c65":{"name":"primer-forms","version":"2.2.0-alpha.95307c65","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.95307c65","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d93c70628f35b3bb24be4d29dbfb8bc12e8b5a28","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.95307c65.tgz","fileCount":12,"integrity":"sha512-4vQHE9Vfq652iiuxX1RU567azZnkAzNZABnWdl8ffliARNhAUs6LsrE+3lKqL+IAb75pvfMDKXrl31Ea0tLpIA==","signatures":[{"sig":"MEYCIQD8BqfMoR2HfyCZ/gplk3LuXDnd2PxPYDZhdi3Hy87ZlgIhAIGztwM2wiLsF/n3lGn4vgajUjmNQqVT6jOsTEhj2+tj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM77fCRA9TVsSAnZWagAAGXMP/jxLu6sWDF4Mq5KWlqc3\n07izDPkLp3A83OlX4gJ7tT6ZOcP/GNpBf3AVPwqbfEp+JX0+1zrijs9GYOJJ\nTgFRmif2Zd2YniXYrRA4Mk7c133Dn+68uk7hMNjiQWaAM2x0eRDPba5DPBcf\nuJU5aN7GOh1Ud3zbZTjF3UlloYnITB2+szKSgXeBU4rYB+QmJgoZgXkd518V\nP9IJPxTjgl4fI5RNtl1b9cYexN9d6n/VO6oUkq8UnYZ0HXm1uPkMw5rOgdt8\n1BaLa6Zt6hjz5xWOLkhbj3NkVvy+/04TNYPqEP2esT2M9cxJgGt2l7WqB5ZB\ngr5Yep1TUw2MRD8bAT7JLOsy0cUkq6dlWbw4NpnhRzxmNiXpkowseLtQeMC3\nyQjlJ0YbJkoGK//lFPF6ZGQDzV2A3TlSKPlgHRSQs/h0NCtbpsMoUFLF4tuT\nJvFul/fUQ7ZAV3ORAgPDR3H4XrKEE6S1VizRY/6uFE9NkqO94QpBWCfHNDGS\nYrmIUTiAL9j0ouCcVTbma4ZLRXMGEN7wxajjbI7VBcOxXKR4s99Y+riCO9fM\n3M9D2T3jjdmhIFQTT8A+gIZ+4ovwS6y/HkrUZXNZPcpN1N85+dAy9man+K4Y\nQ7F8OUwl5Naqp7IOD6QFUzmdp0ADcGk+6kNSZ/VB0Wthz6fx26U6Xr/bMFoH\nOeeX\r\n=kljb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.95307c65"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.95307c65_1546895070849_0.3348261322759214","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2a15788f":{"name":"primer-forms","version":"2.2.0-alpha.2a15788f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2a15788f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b4e9e9cf88a6c727687b89ea6b2e8def4a7c6066","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2a15788f.tgz","fileCount":12,"integrity":"sha512-uEg9NO1JDaENmjIoDZSZVxwWw28u7w9A5pAohkYGA4WZXzxM9+h5YNAyNZazbuUFzR35FzJKW3pV4NM+BgbNKA==","signatures":[{"sig":"MEUCIQDpxttiF9xwt5q4gbm/n1/9fVDKJ4hpRRcLz4BnFC5gvQIgUKQvEz/k/0THDhMrvaQFWn0e5EM3NoUqIEbhgqGCess=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8HUCRA9TVsSAnZWagAAKvsP/2s/4GARz66Qk+Nq11Yr\ngszWfOJbNQUS+jX4C1XlEc3gwOzNldiQg4HixXFWrLJX0Gv5QjcrKD1pgAJp\neChSVk1+Gaemqxlp+lYu5u6auUzdHZMEZr/4phwnDrmmRDn8KH3CYDtjD6LP\nlj/wNsAHVV++iN1V3tZUv11i0FicWoZ/Dc0zLNluWSbX7KS5FZUgZ1JwFi0/\ni1g9L7JZkER9fLaUG/61LUkW/iEZVs///d8v+jDiehH/iLKa+kR8hXUIo+PQ\nlGuEyFR9pHgH7QgistLjQo5oSHvOOtQBpqEWWosnRGoIybqsHo/zMJS3S47j\nxN41A2GSwbmy811ZnI2hf6aKbEZvwzlxzQpekKK4MXEbCZOw1h4UAYCH6jHc\nnWG1TgRO0EakB/3cHo/IdhUKgX6qOMufnfZGk+fJBiYHDKwbik3ADEVjEZqC\n3d2p/f0Ulu9fIL3byCV5Q81b60u6rBHqbzaikf51mBMgA4Mc2xax9k1yiOAm\nzvpEbdeBQX1CA1SEpQzOYX47xhtVW46BcE2TKdjfW+mWvQ0A9vJtON1X7+L6\n+OSHaKtHvIJXik+UF/n9CMmItlxbJZlE7QnGBv4J3Uh9gnqYEZaYo5bEkpAO\nb/pzDpQuykzVNBam5fgOmWPWwRhHaE9jfLTi7U5y+o/RdsI1+Jt+cyYeBVVu\nJLd3\r\n=9UW1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2a15788f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2a15788f_1546895827636_0.31030036738597544","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7324c66f":{"name":"primer-forms","version":"2.2.0-alpha.7324c66f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7324c66f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5e9a5e6741876f19e57e286a230d382f25f6ee73","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7324c66f.tgz","fileCount":12,"integrity":"sha512-NhZ/SuywKAOpJtFEAmgfQXQfQeEmvawM5p8ybpBr3Uc7PSAhRm6CPV3I5qTfwFQs4pjAFOhiwlGQkFmb9g8C5w==","signatures":[{"sig":"MEQCIHrRVRANpLovq/WToPiP4HKn+4jWDHBU3LKGGB8Mv+y7AiBRxTFxFd2n3KacjwTJwckU9giPTIiUyYW9NenwJxiikA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8WaCRA9TVsSAnZWagAA09UQAJ/1yX3VAelc4lB1vZfo\n8XcxR8BEFKO6sN1dgNLBYE5y84//RtNQPEe7j7ayz0H8x78N4KDYRNRZpRHj\nsNZLMHp1mbiIZ0vEhQQbOH8AqtIW1MbxFAcy2pnI/8tjJrcrZDiMy0KIU+zX\nh2oQcYAGKFogIXpkHHaxmGXbO1rq1x3oWjivz+KDof2Qe5ievHvCeaigW2ms\nhlvoL29DBBXmcLo/ZNLOrNY2ka1BVBYVzqk90Qnm0xuOLMy133s36qSZAuyJ\nLPmhtuUv3VXOuE1ykf5dtSfeAM0BGvImgCaRrrPGqFAWIemy/FdbMa4AMlvb\n13o+o1sAPa7OfSyBkSE/bARXh/IwSIummxbZ9+4kku/2szGDwNGx1M1+HBPt\nbPJ5mp3WboSNq1JJPIYbg8Emugn8JGtyql3S7xW1vjICpB8n0Va6Qi8RPUav\nouiF9FOvEl7imOGTbi2fWS0Vsp04H7YOvemqVPs1RWGofJd1DWCKSeRJR/25\nIUqjJwRzszH2VgN8BMpXfKCz8l+2FlCFNoGX6qscSQm5RNxbYF0aqzlgS04p\nVdI3R0niTbme854PgfGOBeYDQUw7i4MXm+6dXklc1AlTBGwYp9sORdVDqR82\nAdwqdC7nV7lRuiiz+Q45TnmmHHZLS1aiwf/9vU+3v1d7m5XnKxS8YVkR91Nf\nTiIk\r\n=L5aD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7324c66f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7324c66f_1546896793612_0.22790999030341585","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8d56c8e7":{"name":"primer-forms","version":"2.2.0-alpha.8d56c8e7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8d56c8e7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e9f131787103ad2175efe23895b1634df8d47ead","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8d56c8e7.tgz","fileCount":12,"integrity":"sha512-GYpilDkl4Hqi/TuM5V3MpZglMS7r1rJA0MVqKQ1X85X0Ey4y9ydi9rT7eaGDqCYb26wHOdCZHzsd4rjtlAbqWA==","signatures":[{"sig":"MEUCIQCvNwXyDz+w/KrJGNv9vFpu3hu62MHwsbZVaxl1ZlCFxQIgegf4Hn2Vc8Uaj3hWqHqX83E5DATe1O/AOVQhT+NtP40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8ecCRA9TVsSAnZWagAAZ08P/1ms6AnZqh0t5dHRTFpd\nUCrTTm/tq0yFZiCjW9zvC+4XwjghGKG5VW/RT8vXrUsxjM7+nWTeLap4ada2\n2h1L0v0BEhS+2YDyHuBWciJIWcAdVH0r8fgzk9zG8Hwri7zDBWTYDbavnEKF\nM2EI2khnqySVlp8uix8fBX135t8IYrt1nah+J6rzH2xRLPHOOVDVzjyK1jrR\nEYnxv729i7o5lvFOdXCmC9b4dD3p+gldyuseFJcG7i9COqcs5I/L4/eUglRf\nBy0RPZqVcPfypfDnSEg4o2IdzN4BDnmNvI0wLuyagqAlRCVVz2KRKWVh4JF8\nMl6iE2Hr2T5EOqtWhjpCbPASTo7LJmmPoShZOF1fn+NG8Q8SXOD5E3+45HsF\n6+LBQlipgfmJgF9258KXykdSs9+mJwdjejP8Hauo/C8ZIUZmM199IGnxDtyx\nbEeJH2bcVK0RVGF+PzrrugZWqzTTOlKSTkOSw34Z6jB62iOOJFVN3Gbr9lyj\nOwYjwv58weqoMRGxW0j0XYZ+WhEtFx0MTXA1Ngvi79YE58LrAnZRao4yH3x9\nDuvzQLNMG09yi4Ma+t41KfD7TWyRO9UuUrJACupFLr1R7uk5Z9BkjKp5HR8w\nkXDt0fCefjt8hwVBgh3Q2kYuSrxZvwiFba8IG/8NKiSSI7KxAAoa+5ORGH/0\nyv7s\r\n=v/WL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d56c8e7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8d56c8e7_1546897308303_0.08511622060836666","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d9b3997c":{"name":"primer-forms","version":"2.2.0-alpha.d9b3997c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d9b3997c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f1eb25d6f48038ce2cdc9b8698ad76a22eb39b36","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d9b3997c.tgz","fileCount":12,"integrity":"sha512-U8Kd6U2fvNH2PgDSOu/v6GJ0kvygQNy4LEzbovIk8/nbuVRjfIt3A8ZoRBnFTSTxkYo5G5TzKaGZUgUTJcK8dg==","signatures":[{"sig":"MEQCIAWeikV/RNJ1llFNJNcYyt4LSoCCqNlPHCcqlujoBC9fAiBY9QpcMPQwfpYjhqE/n9A3aXoUChrZjAcU0KcZFUTx3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM8i+CRA9TVsSAnZWagAAsUAP/181L9ntREz4WGqFw88V\nlQQXgUwv8vqnjdEJbVPoxOx3CJvldMPONOtpaD7svznAqvAgmOV9ANgrtT09\nHevwxA43JW8/xYmw84C33U7/J8YE5Z6yIXC09yQreqEdr6Grvh9OcdNg9k5E\nKi6VwmFjrC079YSZk4zcdtp/p7qOUT5rbFJVsb984uCHGDo8wQcm6XgCrLaJ\n4eav7ko98luHlo7uDuQ0RuUBc21fwoVDxh7UHnKUKRW5F6qa3AVeEGglUu6b\nmiWKqHLjN4qk1hV2wHz7tezJ7HYLnBo3OHBShjFEcYF4Pju81fEO6sHdtJJe\nLk9holm+1qOB+RAY+93rZweBZ3ht3Va5wf5YBda0oZ8lWVmMBJlOFf7XD6LT\nBzDLcLDQOHEiyBD5LbwpV3wSKEriBnYc/dYyDXQpRDQxhVp+eLtjPvfWLAjn\nLGnnACDEyTaWlcH9zcQuNicjIRIaG/T6J5fcTbZRa1tXQfyvf6Ycf0YSuYV7\nrCqFaKlioBZbyuMy63O0GsL+AES/jfGFFfjw+KCEiUYx4LiQoVMiBT/P9Ow3\nn/0jSuGj2E3ZeeUNQBW08z4bImeL2UQQHt01KbfGtdfuxZ6/FlNntwOdJdHW\nAEsUAX3UyqAMdKvbhWdNGaK6D+H5n5STUlDb3KzmbGJnuYD9isW3Gbikh5FF\nM+Xa\r\n=lMuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d9b3997c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d9b3997c_1546897597953_0.08591687238145806","host":"s3://npm-registry-packages"}},"2.2.0-alpha.da3ba6a1":{"name":"primer-forms","version":"2.2.0-alpha.da3ba6a1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.da3ba6a1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f7ea7c2965120ea96190be6fbecf343383daf6d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.da3ba6a1.tgz","fileCount":12,"integrity":"sha512-IUYfpFpP1At9yco9G+oAHuhcb+2/W0BC3ar6us3IefNnh4htZfUrYtk8TL1xbCu8eeXTVS3IB4uNr4TsivghQA==","signatures":[{"sig":"MEUCIQCUefznfiSSyeHxW0y1yO7nAsZFiN/1svy4gUezktMBUwIgZlWjdXjuAd4t1ovwPOXcYTUooEDJx0CKFAN+H55H5PA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM9UzCRA9TVsSAnZWagAAgv4P/Aime5nEXNQAKiT1OrnT\njmzDQB2WrXC30utSopFKjEoP7VXnKFw1gssTKSqC5scp4lklgW9cpC5IFnjJ\nrxF+tTb9w0uA997Idps3LAYSjWf3c2jH4om6oBYDOyu0RzEPmFPONd4W1YMy\nr/nn+e4Df7CN/Iaoe5vr3aVFcGZjDbZFOu18W7HkXYBOEyxz2TCVDPK+Prl7\nJbaOIiVYw+7WWFSEalIR/e0rmp4/DsJmk7mS9lKaSxSSa19mQPqP8700Ffys\nxnUA+g1uUdBFPZe0XXB2VlJlk5eEg3jA51+WSmbllsOS1XhRaRVKt6hDmDl2\n5n5w2BuK6uRAyfNs4KbzJBZmUn+Iao40dIGvY2FFfOALNSBP8vYh1CgE3b86\nkOluqLNXzAKppZaA6jI85a09UKpGlr2QzGsSjWE3FmV45FIb+7CHVBYh2U2Z\n2TLMfYfajbmYlSoFM3udx6/xbHDUaE4r6VEkfgGCspl0HjGnlGR8TZjmaJn2\nZ6wpaVhjoAoJ6xacuCYKNkq9NnmVcyxy/AW8W5CVGhkoRX2cH1spclbs55Tw\nh4MLHO4Y8a0z3geF1Ki5NuNG5mvpvgkXCy9I8PP6mpLS/DpUYk6sXda/vEUF\ntF4uovWtZpeaNdcDacKMR1PxGlWiDFOQtN/HkxsCrZuzymUCvETRFDuzR+8Z\n8lz9\r\n=CekZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.da3ba6a1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.da3ba6a1_1546900786518_0.24518473159908005","host":"s3://npm-registry-packages"}},"2.2.0-alpha.426b85a5":{"name":"primer-forms","version":"2.2.0-alpha.426b85a5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.426b85a5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9a9cf75a9947520820275f24ad6cfa2a99efe70f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.426b85a5.tgz","fileCount":12,"integrity":"sha512-EPhRzQffZfIO0jitjOkmWrt1oVptMgSPDZ6BdPxkRnAVJ6z+HUtkUKbah5MLI0yybTiqyPWSAyGCiS2/ahtzvA==","signatures":[{"sig":"MEUCIQCkkV8HHd+3u/JeC9P1Kp5bZOg2rehR2O6NRTVHUV8F1AIgIPwErF4ck1x4KatzT8+3vMUgeerGR2Rfk/X8bshbf38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+AbCRA9TVsSAnZWagAAFwYP/jhLkcOnKBnTZDPDPG8u\n5qSSmMIiM7i6gb03JlILTeCI09H4MfEYfa0a69x5W1dbEkMjtpxuj0FJEam5\nfGDGkNLPQ1iBQ0zcSxuY1cKob210kz/oiGsIkkQSR06RJu/yLCq43+dz/HBt\nOsZ9d/XHyu3XvwQWxgkF/wVB7JELUcMcPT469TxXYVxAMVpkAuLs/MY40LjD\nwduilApapxyyuYddylA1Ak085LB32n/1L2KJYdnYkuNDQH6WstQr9ENpheJB\nKNr0Z5vqre+ZCbqxUmcU5fY65MEVCa5woO2oaVx8b7TNx/oDZ/YAkm+Yb2+t\ndIVT2kzP/9G39m+C7keeCPrPhrH/2ldjZD0vmoRC5b3vTAY2NY64+oSm6pmt\ncyDs1CYrL6FvpEBOrRREVCa0yXk7sRa4XfdDsW7MIkeqB1ZYFoa7xMYXM2JC\niFUUHqy9kJtWioSa89726oKa8SYBn3Nb9Km2k2GGx4OKsptAKm69YNbFPrym\nzsapBPYHxKTqkM7wCLJOqdAp0b+Vf34q3/hM0ub0E2O3bKenaTZp7J71RCEI\nVDa6pT0odqSUAF0UrWZUHk0YvjO0FKfEpHMFcSdfkISZswp+XkoxTVGKuuF8\nF4nDZNVo6ukozjcQsBW58h4ryvE5q3mHHNmPR59ZTTyOv847tvopUlWMkOWx\ndDP6\r\n=33v0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.426b85a5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.426b85a5_1546903578334_0.28920790811538755","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e7c17f27":{"name":"primer-forms","version":"2.2.0-alpha.e7c17f27","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e7c17f27","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e63af851ba937ca7b4d0be71db98a1eb371fc340","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e7c17f27.tgz","fileCount":12,"integrity":"sha512-DpIm+/zEcZTF7Y4MipTOK+8KsRItcnJvz+U75ed4pcVoSh8AGIMInbvcLhJzz9QkBQTsGjnaKcXd0U6KSGT8rA==","signatures":[{"sig":"MEYCIQDkFny/0eEb9fu8YNo3hoiLrjVqG0EIu4RTTowVHKNkOwIhAOGSs9ODEDuyaGs1WrEu0uUo7RsyXd8BXhxvtacXpr5i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+PVCRA9TVsSAnZWagAAVdMP/RrJN7/VMkp8ZVfH7j1e\na1cbTfG1z6NC5Q0lz9c6Lbm+6YU/tuWZoksHCzpGrk7idlyIJEB150FXSHLD\n+Lkumi0rEAtOkdX82kbWdO1AggWKivCrOUzKMJmsWHzRn8M+4wWYjauTc+bc\nkcO7aQdOwVh2Wn6cP7aqp2oQFfw+0A7kPswmhSjsoqloS90oP+YrS1aL2lNb\nf12CpF9T4b6RHLv00asGpTbce4H5isg2P4NWLk7DhfRLsbGkgRRKUk+s0RzQ\nE4usMPSm3YVILd7K6pscyrtE+cc4pEpw3Bk5VOtjHaafK2mzgVKYJDx+3JXY\nokTk5V967vC3uwZWLpZwtDewCC6QHucTSF7HbZfH3CJIp1np1+WODOj4li5o\nQhkQLWWQW0PW/+2Ly6gb3Nrs5AzarNbUQPXSGv3dx7UWunbv8iil2AQzHRBN\nCh90HgM4g8CQSyHpcH4T+MX/MtroZmIuygg3n0TbY2VtqVDSJMK2R6yXP0io\neqV9oB7CwDwHfoeNoRFOgyDtGUffrfCfo0kIlzNEfqegyQtLGwRjVB83CKQI\n6LDdvtB7ojYuk6xyIN6tJfBZelcSu2c1pkEgf0fNE5tzyS+xHBwD5z27G5Tr\nkH76TrZgVhWNLTf/xZtHefoh/U3Fe+rnu9avaFaYmuKxJHFehxBk/fw7nEIM\nfKSw\r\n=xhEV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e7c17f27"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e7c17f27_1546904532776_0.6866206631023393","host":"s3://npm-registry-packages"}},"2.2.0-alpha.eb2780e6":{"name":"primer-forms","version":"2.2.0-alpha.eb2780e6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.eb2780e6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0f66d982c375ef25673c7ad188fdb0345a5220f6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.eb2780e6.tgz","fileCount":12,"integrity":"sha512-U1d82FXgf2hzsZKX8HfY6tFrNUIe52LYA103spJF0dIULwH9aRVxn/JR5VHBAd5dk5kXDy8dW8IGZ8e4mgz2Ow==","signatures":[{"sig":"MEYCIQCL/LXxX3a0GzA8vNBpDxmm5bLqvYL2dCPqbajwCq/J9gIhAOOZR+l7DROGRmVnsSPzZRcWOcapR4mQ9q8hw5EQTs2r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+RUCRA9TVsSAnZWagAAsBYP/16VMG32nurPWPQx3+Ew\n31cSkDTOxfvAyOsl9S9pGGeivsu+z2J2SgFk+T06MMSrKTghs+Ig+4gs8kVd\nzG+Mv/vCj6casGKTkZjvikQPT4XYSy3MnoeYJnTYftZ5rUJ+Le+0HKs102JT\nNTosRt8L/XD1NU4mU/WmjpG7ykxtDYsMAynHKBaA/4yMGVq8cqg5WBcXGOEq\nMe2zr/LdW3SRRh2/1a1oYrfsx4W3a8fFNCTZBzLyzZII8TfDd3C6h5Yh+o8W\nkmVS3BRoo+/DZvVXLh7d9pKGt9ZBVfLwtkW9qulEBidcMizZFeGvv4aigql2\n6geW3G8k4ayeI+CvyZJfXZUZfwzkThC0ki1vmVxfBe4wUjzhPXF7KIqAcaeo\nJsxlJm0LMe8y9ilzJln/3puZTGJod0isGSk6CpwtDC73hx/EF4dN1++3J/1I\n/CXIIeiCAxRnX3WYTorw5v5LcpimFvjdvFrWSEAtkuNNd0U1/WKgZTRAUFol\n5TN+CAbNitBQ4xY2wI6EhWNNCkVKyKOvrvUBQhn+nSHkUEP6NuOlmQSwMbg5\nmpeSQhHQKHiPhW/jL0sW+iSs2ZbDaECzes3TunsKPjQ96l4eNTEmQZJnTwAA\nGoT8z70Bh9e3CJbJKP5Cevma5Lk0u4ss3zrtkuUy19ZHDeA4sMnBDT3iQqaY\nOg2X\r\n=9/nW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.eb2780e6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.eb2780e6_1546904660214_0.04451732392153396","host":"s3://npm-registry-packages"}},"2.1.7":{"name":"primer-forms","version":"2.1.7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b43f2d4b72002173ddf8d40555666c07fbab9b48","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.7.tgz","fileCount":12,"integrity":"sha512-w+tVrBOO4dcd5ZOA9At9Lp72Uap2SVFhtOunBL01z3sNgZXSmYQbLqw5NBoo7jygM6nvesZPNqWw8pfpzH8LFg==","signatures":[{"sig":"MEUCIQCEab5wDcFzQ2jqd+9eM0/01c6sOaei7YR9wo72DDfoxQIgP2pP3S7jKL570yw2jxlJ6SS+05amWE/BVFx9WXDhYg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87715,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+TICRA9TVsSAnZWagAAeU0QAICUFJIptXXRHn7FeTMK\nupjaStJEaU4EXrqp9B1V0EI/psLaJZJqKcMlTBOuSRHbU7TEh0WayiYrrj5K\nTzlT+G3CQrilPRxGYUP6HbUKxzdpFnvk69pBGaQJhgMq4tZDAHWyLVBqRuNt\n6NzGL9pSoJq+X5Nncisyu3NCf70RgY5qKF9xu7tEpJVuE6E17QxQiU7iSwOp\nePLZtxvLS+A/I+66ZRBYuoj6qO08ZDcrYhpFf7sdsrgSRtTtUhH9vd2xHXMx\nTyDWFJfOXEQG1MW5Ch5Rq0CV+iQE/dw8fyFhnndrWlunj0+V7A70a1IioCM2\ni67XmWiG3DQfGUj+KFIo4cHxqv2Yw8jNfq92xgg1WxPtDs3dpJE1YZd6nCg5\ne3650T2C6+EoqQQRZSchOmMknD3ZqPMJC1QEsxyp/TN5BuAx0C89IJSgXOAS\nHQt3TaPo/PDlCyLO4VrGd/8ymZQtLIQ+xyLVybmPXMhe0dETtPDQtpBqZkeo\niX7Lu2WHk24dAkt0XN6L8QJGhZd2AqflzDSCWvrF6EnA2UskD5oWjL9c/EvV\nM+mKFu98uzilvXcQ6/PklSiRhsWeGu2IjfGcf+yEOwVXXTL3j+J9epwDOejX\niZP/73mvVXnQ3UTu8G+oL5GBb6Z9espgnELkwucgckxa1Za2jMYSiRl9sGJx\nl0RE\r\n=lmIv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"5.6.0","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.11.3","dependencies":{"primer-support":"4.7.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.7_1546904775539_0.6616104433902017","host":"s3://npm-registry-packages"}},"2.2.0-alpha.93f4e152":{"name":"primer-forms","version":"2.2.0-alpha.93f4e152","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.93f4e152","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f6af24314971e4f1381aaf8d6034d696492bb84f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.93f4e152.tgz","fileCount":12,"integrity":"sha512-JkyvHqqOgbk1H5GrxxW3F687fhNdjVHjTigH7gg73ful9TD1gtXCngCSNqgjC4wZ/j2bDCGc2YmVjfCnhV4qGQ==","signatures":[{"sig":"MEUCIQDYocm03gjJZ2ObTr7kUP1PgwAVa+R575U0xVSn7buGoAIgZjt6HbJ8Mtc/zlAk3jlsGIF+8g4Ri5x9ieLZYXT52Cs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM+onCRA9TVsSAnZWagAA93kP/j9NbGl9EMq6+nsrYK0V\nGxYFLn913rv49CiK1vF159topo5VAeE5/Io+MDyjaRK4qvmrrEHO9N8cpe6w\n81/991asB/+/UHuGR8B1xHsQhNXuU9/3ffsYKSg5S0rgYD9AxtButEn1N6ey\n7G3ZRJHLjlEB+bmHH05xpxlwstCNoSBA4p3Ldhl9Jg0MmtTR/S7iTaanqCRl\nAx+KZSYHZDonhU75chc/pItsLdHma5FX98ydUIiWzrOAREj495ReaOo7HLQf\nWOh8HDhjPeCNWcsaW/XMdHHoZpt7XNeDvem5K23m7uAmkA/eLrlmIUiYfvu7\nfuTn5Llmw8mTDim5NZh/EVppWmO30n9zUyhUzfpSiXwsKS5zoBkMcLPuHOoU\nNtvHuP8v3ROepwUHaBhQMhU9+QLQSZPY5TWGJhcAhP198jxTEUkUIdP6EGMb\nCa8AcV6jLfUILgi3Qp4YWhFr983Jc6fymrmigrAry4xKUzMn9hlHPce0KuDa\nnFna7z22uDdMQbdZy65nF/OSjJ//supsSkvVSigwGtIpYUk1sxM0Sd0A5wpV\nLb7a3j4Fq9VGjfT2GCroru9oSBevtgTUIqdYmoh99PzuQiNdE2vdrh9lxxpD\nsgDAjyCWssRbyfQUuHIU/mbLDGfiPm4mkNjT6gGLkeBAJ7/++fjO5KtAoL8Z\nfgDJ\r\n=jpjU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.93f4e152"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.93f4e152_1546906150661_0.431320786195434","host":"s3://npm-registry-packages"}},"2.2.0-alpha.82a598b3":{"name":"primer-forms","version":"2.2.0-alpha.82a598b3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.82a598b3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"49eac34d02ae9085b49132c50998980efe33909d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.82a598b3.tgz","fileCount":12,"integrity":"sha512-L3Gc/u2KzWp16MmDjhg+DrOmLOf6+Cp+eY26O+QMG2BeaL9kBwhEcDq95hPBf0dtFaMLs+AB1+wKH/SAXvPdeA==","signatures":[{"sig":"MEQCIGg+fS2RfTPrBqHPmMYGuJCky/NJHujs9lY+rbyZdFlyAiBOey0oaoFIHlJSsv194UTvtIuu1jlM83EfKOH3uSa1gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM/EqCRA9TVsSAnZWagAApQAP/0eXy/bVPTwGvxTgnIvu\nxD5XF0m7W/qWimA0KAT5hJ5nOpL3TDx9DaJ2xX28p77ZKvFZc7w2WSQtMLvc\nH9fasxotSRgFsIpJaiLHD6SGsHx/hMNO13i/EiLOjx56DIwvJLNNRaEP2d35\nbTdEJ+VfJeP95jVzEpmCszHwqZpAm++vXrTdevTgGnMLUKlWGvVROlfwthpy\no5CYe1kpVKIskYqOreI3iIRLBbSdVskiHJASb4zlbHq4dlB+DP5SQ1I1wCjJ\nIdQRs5dljHeBbGBNAcem6gTrgf3WWkmy3dmtWpjh3k3K7BcgG1EzBgqjBZ81\nxkQSLr0CuNlzjtgrO8FsfrVm8C2NvdKgv0zvmRzXaDXZhDUIF7EqSGS81A8g\nl3dgGvL0Q6fvldFFU7z2HvA/Py9jfiZA5sOdNEShk71bpvVUxBnQYyls9gRW\n2uk5quL6TEnFCiEzPZTzZ3rSRu2UH4DQ6ivxKm4+WClhO7qCJpLnHfrl0xRP\nrgMDTo21DR3uX2RusiTjg0Oz6c+BtNvDsaIkCEr4fx7Jn6T1ODMMKIcbYQaw\nPfgiPyiYE+PwpTFAGcOxwHVM7OXR6nZvQGFAgN5ZzyfroA/ce9OHLt20UFKq\nCvCbAa19XkYOeuaIjgmuVqOyfL5bi1V2l6y9lP+gksP3KC8sFarjRnJm77KL\nCidx\r\n=oiUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.82a598b3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.82a598b3_1546907945605_0.07070122087191266","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ecdd8bad":{"name":"primer-forms","version":"2.2.0-alpha.ecdd8bad","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ecdd8bad","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f160aff511508808e1bf653f5f929645704b4d59","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ecdd8bad.tgz","fileCount":12,"integrity":"sha512-i2PhB41JZMBLPCV99P5pErdPyRPZ23N8rStzGeuoj6qJkbgHeZUK+7aGJkUb8X/CVPq8deKi6OIWy8PuuBNr0w==","signatures":[{"sig":"MEYCIQC7hepnYeii/y8IxqRJJzLO//+EcAnHKeQhe2k9cujyPAIhAM2As0XorB6dLOUZ3VitfD/o1ieVvbcPTnU6MbbKyvQv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM/MxCRA9TVsSAnZWagAAUPAP/RuK1sdzTGWhFSiR+Ch8\nIe781yEzBmyH8a2HpB9cZR6vr7A70D4SBavkibe/gR9wYlaD5y2M70dYgFJQ\n0mjN4REd0kYxvZJ2SHe4ObT5t9CRwByCrEVL2v/iPPavIPFm7riT+mosbGKA\nIaGuC7nfZ02G4quyh5nfwlQ9fPAX+V7NbAYXq2rzPUH1v/Uj+rtcEDya99T8\nfZ1Fgf8E63fkRm/rULKztsu9Yrh3fOjWoEczujan7D3V+K0vxQA9rOxe15Hw\nwQ7wG45jzZlesf+YMJTQxwtWn4BbUmhxez5Ie5UifpK/8XNKsEpTTEF1ryIE\nguXjUtvxBGE5+RQr9zR5F79K1C1ihBd4sbBprmJxvJO3zsDknUW3+SSuO+7t\nBAGivOlSTXwAtHQuugw/IJEbbJ4qb9kLxZaCWEGnJH4Xw8xgnqh5wvtzDBva\nKQJpLNsvDVgK8vodQ887O+5suWVGRrhBrM4GvWCd8rhauIzdkhELLaXZ7ZlQ\ncyYXfv0U0bRx05pcGP5VoMsN24vphl+lMIZxTzSg0wE+EaFCS5CFx83H6f3E\ntgn21wmwLIKxPi/SdTDehLPaWeieVnP3GNzLxDQZ64iT5Y7qfQRSRY6t59rq\n/2k8oWi8z07JM5DrT7ND4clJas3eOnAuUyAKByGFQFff+48hJQaf39CycBo+\nPg/X\r\n=MxwP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ecdd8bad"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ecdd8bad_1546908464796_0.025639833100701948","host":"s3://npm-registry-packages"}},"2.2.0-alpha.50510ebc":{"name":"primer-forms","version":"2.2.0-alpha.50510ebc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.50510ebc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"563fc33d21a4088778807d510bb3bad153f81a0b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.50510ebc.tgz","fileCount":12,"integrity":"sha512-QQ5AjnGglac3J6sYPlm0F1Z4REm/T1wTkSHK9MRFv+zyAntWL3iVup2R4askWae2gUGc414++zx9eECzpIQ8Qg==","signatures":[{"sig":"MEUCIFHDwq5IPxo/7Sv15X6PxYFrPBLXEeguoLx+J2q0f+u7AiEAsnTsIx5NjnxaqHy93csh2njjLmwlvMV2Wwmdtt/FvfY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcND4NCRA9TVsSAnZWagAANecP/iteA4hHOIhac33j5rsA\n7KM6nyNKUrJvLOwlhnOl7a1rbOQOuEPBFRtUgDT/XA8IsXU0nIClq52pgSh7\nbBnhzwq5KN5838Ai3FD5FsFkxSXUewe3rgWd2R5HTp5giQu/y5ins0/rEIZu\n//x5e6KCnYQ7BaP+89jJkKhkOpiuFnw0q9JVZO+c+oTax5tksGL9ALs0a3k7\nhD3sHf//1D5nGafCm8AARE6Zbu2HR7kigwhD0v+RJycr53rD0WN9igLJnqRN\nPpdALpPqGve2EY6KAtcSA6VlpXVzZKytqZuJvlTD2k/0aSW3LrA9EIgMC6Qm\nhZqdHsKZAEGwnVOKop9r6LZ8psWBE87QVBgfWdk5bBijuAbtTq4AITulE0qp\n3w8e4Kz0pIZ9IZoLHe2nSQJcX7CvIV5B0uigqRYrGp2M/9VF98dDYXOLCYlw\nmOqA9draOPlucAMfY4QoVCNUuaBGTih/P3XyOx24MhPfsIEDdXTxhq/mEXL/\nvL/N7Hb3CTZCIrh/s4yndPFqGync8vRNT04o93FzGJ5QlG8X7IllxdjY7XzY\nJDwLM1LlBaNTvGO/WVbXSqwJGidsoTJx1d+HIg6a7imGVdUoYiIaeS0hJHBK\nCsNuQ8fh+Ty7PEzI/Zd5g4iT97FIEApc/WVo1FXWi3LfvhSoVrvl29106iUl\nNgkT\r\n=9Gv5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.50510ebc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.50510ebc_1546927629057_0.9720679756662765","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f18919ba":{"name":"primer-forms","version":"2.2.0-alpha.f18919ba","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f18919ba","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f2c54043fed8acc08e4239320f5267b23b95434a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f18919ba.tgz","fileCount":12,"integrity":"sha512-fTpyqf9WaIUJKavEzPT2DMclvqtAopPAsE918X4Z/RX310/S6qiIK/JSbYDN66epr0rtA8gJgKUGuWHfeWuojw==","signatures":[{"sig":"MEQCIBGINQT0aXyKsvwxBQre5Pf5QL3jco0lJSzbeV35lgq/AiARXtahZ3/PtH33DzR/CqjSwJgP3ZZhFwnGO1x6/4fdAQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNOFOCRA9TVsSAnZWagAAIboP/jq29xX588kJCdatIQSb\neamnjhdoujS+wpVn+YLWBOZbHLpRmXfSNkZ9oe3sv5x1dPY+4PEAyiqLupt6\nde2qk+3xaCvXlY3XYFMUxp3J1E/07Dq04c7UBeUrwkINmjgfDz9qCNFOBunX\nsZofs7/LmZ77+tGeWXksClA+yVQdKt3yGotajUK7pNHo5F5Oij/qohxxcLlV\nYYN/73EDw9OBFjQ5NySwDGfc6CKK/B7dcc8U0+pV0wmtGmWqXEccO+92Y97q\nOFEnRYh0EKTk6+HdbbCc7/o0xKuoaS7HWIsGxhAGZiZfcaQ6pTVUdkCBQCph\np7hl3Rz5ghUe9NV9KJqCtnsINEVpZTrcjbQPqpKQULf8itGjHD+rnkz8mFXA\nnA3+27n3ilhXfwP2MMouyQqXAcnteXJIjKGjWLHJAxheO4rekjRgmwqrWIN5\nHl/vr6j8axW+5Z3qPXJTCtvPZUJjLRRpIIt30+ZYnAeLkLPPAt1IbUnGbW3z\nXO2FN1oekijoxja8RuRMuhMNkmZocujksOdn9nP7v+iv9PrS6m1OLTrYpxAd\n9oH22aGd16dtTEstXhU6m/bH8//W/g+rObKO1jr5Usc6CvQ5O5gJfQRYTlVX\nnHNjsrGpxkZNoXTWj6+cNtyJJt6EHtXwsb8YpbbwGnTMzmzxfcwltEDwQsRl\nd/Za\r\n=2gmj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f18919ba"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f18919ba_1546969421648_0.4038465467407142","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c7a3eeeb":{"name":"primer-forms","version":"2.2.0-alpha.c7a3eeeb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c7a3eeeb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cdb5e46e5149963e3ed1d3b132de73dfe8c11a14","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c7a3eeeb.tgz","fileCount":12,"integrity":"sha512-0mVPVtEEJeyHNIXjg9D/UEIFv5CSdzGNGUWZftbkHhY1mmq7GD8IMtw2Cz2vepCqbz2x0xaWjuK1ELH482sBww==","signatures":[{"sig":"MEUCIQCid3fOLqSayuCdxQVexUD14QsIXH0xquWaHRxp+Zf+ZAIgNR/EpGH9AbFOhaZ+UKaPJnFxbIs2Ftoi0rgUK9E3lZE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNO7ACRA9TVsSAnZWagAAItoP/jR3PE30Ui7Zc/kfwCOu\nIG0Co+xrCY61vHiywWxMlw4vNF45M0ZB4aep4TQekP1o1dnEEYu1wpwZZris\nsyU1+EM1p4XunaM9u4pUqtRu6pG+8wULC7v84D0oYthCu/8ouqhv6AVOKYOy\nfjKEP/SSbAN4l0eKxt/ETHUqsvGnwItBKh3LiN/krlKxIyPQkCrAyisrEiDS\ncGQoVLTbbt6r0D1kkEy98mDi59jwBsMSC+KnDiDFo875TyGJCHhHdLcdcv1D\nS9YHME8jsLK4LIDdQQYenXLKMUMOpPxMaFX47vrDXf1T77LyZq9yi+WY9fvT\nuZo7tyeB6ADxf91eEv5lhTkuG2DGR2OlEgYva4QeGshKv9sI+mZKejn8t8kS\njd9ierhSVCdsNGqa6JNmsW+OPzHB3AMV/yQugW/ABmge9H2ZYUc/ILEMXQsE\n27WJte+nB5u9A7yOsEVNeyucIHNP5r89Fag2Ir3idOjzdh8QC4w23Zgrnsdb\nFjO7P1yjfutnPls+EnX4kbOVvHbDJR4GvN5LjzUKIhUykNMuwv+YSAG1mFIj\notZz2pMQARVZHqTAWmDY5TQpBDpZ5DSjav5IBmlAtysb+PybQuMKTP3obzon\n0q76zLo45kpxdR2paaO4w+zfVO4325GQAi7HwHUh64YSIxFxHj8kE9zd5uNG\nkMIr\r\n=N2/I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c7a3eeeb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c7a3eeeb_1546972864184_0.18280935767114248","host":"s3://npm-registry-packages"}},"2.2.0-alpha.950bf2b7":{"name":"primer-forms","version":"2.2.0-alpha.950bf2b7","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.950bf2b7","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"62d9d7521fbc24f81dd2b8fedaf14f9715073712","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.950bf2b7.tgz","fileCount":12,"integrity":"sha512-WrH4mQDxdODrT0ToJqaWmVyPE/z1L5TVnMePmtLFDj3NbRgmJ66OxV9MJiVTe36r7CawVozb6mnEhJ2+2K/6ng==","signatures":[{"sig":"MEYCIQDl6iXNzmd/fTftFE2QMUIdltN4eIXHkXOXz0+EWJcZyAIhAKeVW9OHdw1SW1UH5inFGwBcWPIq1IkiRuUsCN/bZ2Fj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPIzCRA9TVsSAnZWagAADvsP/ApjAPX9FCTmpWTKWfx5\n5lFEEY+NUPGtPj4NOzprftNUgu5JOIiVeyZSrDDIeyY9ULoD5Bu9y9wP6hH3\ncyX37fNtyNEMxeOrUN0UFQECGl6oJWZvgfTjlaaLyWnvCFSLB30VQw3zq9jC\nN2Obl0g0npEYzt/xRUzI00QyEhxq+yPQXjP4n0A4RYYeB9D0iz2uElCec/sh\nlROjoWFSQkXZ8y8Dtp9gCCUETDRvnNbtljTXLH5Dhkhhkc1pdVYNj4w2Osif\ngrA24degsXEx2RI+E6swy4tlbuJSDZqhKvQIEKkbof2w05MguOw39ms/vFCQ\nK8Hnf+1zkhUQ6bmFktymQP4YGUGXb0IXtKV6dwlM9ilNeRNP6uvWx4yihtBS\nBPhgJSaXkC5qClqJPwJr1z9ETPwS7EPfKpq+Rv98nf+4ha0y8QismsyYI8u3\nA7lfzR3TdrDNLMeH0zahB8I3TEDu9SgOEjEJZcDPXVTJe+5bVY9lhM6OfEpP\nj+ERVEtlK6cava/Q/mrKgavhJdvTSUl8efD1ZMFxpD5SAEZlbKBdcJfs+32L\nqmAnsBPIvwV7MTPQDQR6MvrWMNya1e7y5rOSMXE0x91Ccr6WaGCVU31AD/w1\n2BPgTpNrPXCw3DyvwqbgZAHVfv60dIwsisNy6qfRbAt0IQkjY5Xz1q/7vGTy\nsQio\r\n=pb6S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.950bf2b7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.950bf2b7_1546973746842_0.9290107025382808","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7c07cf8e":{"name":"primer-forms","version":"2.2.0-alpha.7c07cf8e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7c07cf8e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ddd29f1724ad396267da52ca050b633d540c9d4","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7c07cf8e.tgz","fileCount":12,"integrity":"sha512-K/hm0OcoIBCodeWcT4M2WBJcnyHyfIrDeRivIh9V9jbgKXIN6LqGqNU/X/sGizmsqsDEn85L0taUtKgqb9JRbw==","signatures":[{"sig":"MEUCIQCU3OmpHIjRCgeEqRjO6hKxJJTyZknmzBJQsDxtr6DoXQIgbDvwUd1rFCn8OgYxBMTcn3AGhNhWD+LpR/y6CMkJqSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPWzCRA9TVsSAnZWagAAMMYQAKI8QLx5QHBo5zYY93z2\nMCSYDR92QDNq+t1732DkSR5o6omgxzDtsWAaVZiqglA5PBQHKjPo2coy4EZ8\nUpL/6GmZ4AAFuxTNBNgd6uwA5XeLb0HUPB/Fkcv7QQY8+jXv4L+KLMhrdc75\nJbG3HX24nFYWOwk/pWjSXZHvSv1FzohbZNmN+rBQ2HM14ddIPgZQnNFwyluu\nK7H4rQHJtogWQ/QoKsBh0htMP/UzonL8nu2qdJE9By0tyN2r7Ls9tA5m0DP5\n9CvSp2SCtU+RqRjldaH10GbiAbBp01ffH1pAIDXJEAclXlNDmm3KnWlc3rla\naqAfR4Ax4T5b97SYP5EwjLNSXHQFVyjjapAXx6Sbdnyoy7VONi0Bvy/S48Pm\nRdlPYTFzUiQ4nKGL6CJdUO1CAheMPrdIIeeuPMG2iIVPVwkUOvUH3dnkRK6m\nyzEkQGM7+BrR5SsDuru7qRMWOmgxpW94olbto4A76NYZwK8dXuEiGQ5MzTj1\nMPn2YAVgXxsD7UhgA+oR8jxAEl4EGG+YoxVUWOFV8RvqsEqi6WqHSWO7B/If\nwIDC2DIBF/5yvGstcC5NjMou7Ot4C7WKo2UOj6AaYRulD9WN3RiC2Hbwj/H8\nbfMyI78V6qLANmflBn9PdL9q3zSKOdJfYj/3d01zv2hkhYTd3xpIgqKMhE8F\nlTbr\r\n=hA7M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7c07cf8e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7c07cf8e_1546974643006_0.15497695835870484","host":"s3://npm-registry-packages"}},"2.2.0-alpha.076ed277":{"name":"primer-forms","version":"2.2.0-alpha.076ed277","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.076ed277","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"483488297419c082bbb215e8ef1529a13a2fe39f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.076ed277.tgz","fileCount":12,"integrity":"sha512-Dr7B8TSJQcr+8B1kzAuYW2gmku5cNtrBQMNwomGOb3/ZE1xkpA3sjey4uJ4yrl3PatvE7CgeTRNUrduEesp3xQ==","signatures":[{"sig":"MEUCIQDm9tbsXa3uIIeE7qlwznyg6y7HJd4LGDn7GGTwRNQCPgIgVruDP/rvDj+TM0tA61nhdqFscOC3ELQkOs7EWd+VRuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNPh6CRA9TVsSAnZWagAA4wgP/2ctkq+4chEAQ4pfj68/\nA4HXEeGGiKXdBFYU0y+3QvWttwzOff9TYLwTO64rZmhmOvfJ3nomX8kW5YCD\nTKiZGOwYl4FwAL7bnUl9uRCTl0OhPVe1YorqIUFaAzkgt2Aeqkmvoq6exS4n\n6nvBrU7vknqTg5l/8OM3gdXRWwlL7bc4HCapVIMTYJP9mudbqMKBoXx/fXT6\n4IQUB5eANmXYCNXYy/E4qVgdB3vE7+OaRxprqclWAt5wD/ayl+iBq9OA5oDf\nCvaVGFPUldI3yMKs2RVhQqXNWIH6Nc0ngaKpT9wbBtKC1qjWkizNaOAnhdXs\nbEIpRIT9XlXhnP0UU3UeeCqG9GJUGqiAEHXG7F1CasU1fe0tAks+Tiy8pAKP\nzDmYKZD1w+ndOZoxQaKNi1+E8Gqu4kKHW9oXBwuja4Jm44SLDWt8udyrHxIx\n1/cA/8XqoJ+y7pRU1BwMEuj59YF25Qe57kGC9fwhaDIq+EClDJWqL5wXkwRd\njdDpunvRAlbwCp0/+zlfGzRgrVDFFDAwqkGPhyYyCUog4l6vhu0u2blFi1Ol\nTObhPR1ARHCbGK/CwTDa+7bol/kbAQvtWkflLtdq1C7RTVwoyPDXiUfpzl9Q\nPtwU4JnEYa/0BgWrMYuegcHTUnxxIIiYeaTn5umuLGP9/NdWZ1jTI5XlDq4S\nWtH4\r\n=27YJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.076ed277"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.076ed277_1546975353720_0.09284001416817755","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a4df514d":{"name":"primer-forms","version":"2.2.0-alpha.a4df514d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a4df514d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2b24b7a212870db6a87e5fa8f2ec49e52f0ceb4a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a4df514d.tgz","fileCount":12,"integrity":"sha512-sVq5BpJhzR+4gScn3emDBJjzl5HjnT9MUZxqw/xW4BLxxZCts1AtBEDQvJwa5D2Y584bLyFB5ivwlripuIlUWw==","signatures":[{"sig":"MEUCIQCoMeFtnGa94GVrO6lnSKNgvlU5/oMHupxPgggdAm0iwAIgcgwOrf0cLb+5tRN1NDpVVuq2jyAt4NOSKuxU30QQ1Po=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQMfCRA9TVsSAnZWagAAyjAP+wXnxkOt2XC0V4C+i7Vg\nEoqYlHvo8LZGT1TaguCAifpbU5272/urNl+e7xM5U9FR4bt/1awpQXvDUxpq\nogLOQY+Q5yt9UpOhW/WIOtPJqdiYL9EJJxOajNcCadkmduggjqkpyuiYnXrj\ny7JmTi1KVo2zfhO7GeOsT/H2XtUCM7gOudgCk/6k+KWF/X1AwEaJ3mq4GVhV\n2B7gRoIN8D0ZqW25XPvhqTtX3qJfkFGqMFiYfWyVdOWHjGrNSSDOHnlpLj+q\nc3kixCYpsM+wLiBvKimnKYsuw7YzQTcEqgoRATwi0GZVDd3547J5u3eOozIw\nz0jS9iw5PhFcBF7HuhdoMDJyFppdJMg1dbqlpS0R4V8c6TRiexcHbxQACAXS\nZTFxNDzB6jn/tspvGm8IqZz+10FLj/Ub01QxN7DMoOAJWeCjwK5V1XzDdJ31\nsNfpEGIMXhzL8IZCJfd5SYgQXHHGP7aq3KeGTyTLLdmDg8RC3WrWzKuGrlM2\namzDn7lvpmNdWw6JvMi34PBvnhCknliEBz/eP9XOHeMubSRIhFdRcguVyp9Q\nzIPt15Ve6d+TbGbwrsvcvCanyCPRxMkNfRpW1tZqn/tHsGNXS9N9VYhjPiGq\nN+oMx0p2XRUao84MXJ0lEiskI0irUcxSybfsxYveWeiMGK0UkWTdfrg0ZUDu\ni4bT\r\n=XxWb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a4df514d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a4df514d_1546978079250_0.6943604223948083","host":"s3://npm-registry-packages"}},"2.2.0-alpha.912f1fb8":{"name":"primer-forms","version":"2.2.0-alpha.912f1fb8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.912f1fb8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"523f3062fc23d3c7d3e0abe295c61be74af5464f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.912f1fb8.tgz","fileCount":12,"integrity":"sha512-EqLSq7B2Hue1NtjpUkOdaaQpyEEM5CQcIm54BwHYCBlW9DMVp+g9i72YG1uaf0lZEZLaivkPGpQPL2kDfutkxA==","signatures":[{"sig":"MEQCIHUW7NCYO89CNCRD2e+NZZjM49zy/YQccNkbx8r764jTAiAH+xNOnWVJ8Mi/UXqLgFqC60Ng9TzGhcQTaxtQx4Vivg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQNUCRA9TVsSAnZWagAAfscP/jBgKBFfaBExZx0YHoDy\nnK8p2D9wsFr5M4VG8h4BksR9gCS7PontQE6wk+HhS78A9nkIH+TDUR5m1K7W\n62l4yZ4wD9L2vifEFui7+KtAlvU+rccA9W2oq4r1z1bzSIhSKdYWVvK5BS/h\nuUYECuOEc16B/HvbSCGmK1tgSCsXpWCA/iDCIBpKYdXPR/v+y7mriIokZXpz\nNGSKhNKWAQftqYC2ucAYunvHvSt3XDmV9p5pKw/pQEfF0n5w/pkjtX5IdBDT\nHMI4OOYPkltpM7dO4qylXL9/aDJUO1/BKAw9xm2WvuNsi+gcceHjrBhuV0db\nSZm8nFCULlBrrScW2XLlWtxAUBI6shuJxqGssPAeOeMkMrhFsfBn6wWyDSU2\nK0OMfUjVvJZbsVVm1gcjDEHV9g4d4F9cQPNElvzsC8P2Ynnk/tOT/qJ2CiJO\n3+KiVJg+YGudUUqEWyjswCnlGbTxa0AZ9F9DJRETOyfZSOFscwjPz2nYDjWW\nfgwdyMF110qeyDd5M5hXhJ/pdrkrAoOeVQc657ECW8hAUXWXWENq4+0vOoND\nSUZeVIOqdHIYioxXfjkW6BesoVUgVT9Ls9vLx+Fy7lAuFaqfgNE/X2lMQ8Y0\n4+AB0fCO6KQ4qz428DNiLpbSKpTSLFSSELWr06zlyGzeaiJBDNVF0o4wEn5G\n/61p\r\n=MRv7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.912f1fb8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.912f1fb8_1546978131380_0.9505857116900263","host":"s3://npm-registry-packages"}},"2.2.0-alpha.97e04ebe":{"name":"primer-forms","version":"2.2.0-alpha.97e04ebe","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.97e04ebe","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7572547f239a2dcb9fef73fe6b4d198fefb1e8e8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.97e04ebe.tgz","fileCount":12,"integrity":"sha512-UZjcuhMuhmqhfJWjERaw2YFrw6wqxwi4kPPx7bTBJiwAPPSAqcBaInrBqJiaP7vw7tFMMJKGc/rEqCzCztjaOw==","signatures":[{"sig":"MEQCIHqkpoN1KF3DZBHoIErlhTPo3KdMHt0b9QfxhtA3Hk+UAiA+CoLAaQi/gArfjCFRrKFGA06J7VJW45w3BWx8zK+bJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNQkjCRA9TVsSAnZWagAA/nIP/1fRqwPfzDqZXD0kUKf7\n4wQNxXhkCRl3BSsuseGVTiFnx2UgC63K4QZLBIO7N8w9sZn7WLrdPTQd0Arv\nPLvULipbs8kLukxwKMWwT2uJF/0YoFy7Kd0TtsJm69bhOvF4r+yrEfSGlkZy\nLjGFcEg5NfLq6GF8McTZQ+uYCpDiKAEhxkryC3wZfreu87VVWNF0IRDcS86I\nj4cY9v7HEUUZlPWFlF6J6GZkCURRE0j6trq7oe1ijS1+e9hrBaiK2wStZti4\nAiyejldjocfbfO5er8jDUrvcbkaSoLO2Z86eJvmMhyzYOhclp3GR/c5A9NKd\naRbwROWuKj+HeTOE6x49eh7hZne7cOQ+KSJ4eQrnxFW6hSWfwTP2xfwH0KVZ\njfjywWLKwKSKKOJxVZYaQ7qLnzo+EETiP3/bC+mFFROtdQLVi5LtHPL1DrOF\nWIH9BgTMEX57z8SuB01Beghuy3ByOXgWrybXRk90GPWDtORENg0rxMKc9Z+L\naW3yFRGdhYwtPHRE94w+JEeraaUSKpDm7LiT2WPPDU0otmgOw6cP6vyU/ptc\nisxkDJ4yYyx19BdBPwmukyD1nCxCaPwQumLw6x74A9ZVW5L3WEHVguNqFvB1\n8cVHutpOWf6OWnYUelht53IQE1UeGwTdh+MrQvShnNeTHl0lkpz+Vp7vcAjK\n/Q7M\r\n=R8Ar\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.97e04ebe"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.97e04ebe_1546979619031_0.8205550271052435","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1ed322f8":{"name":"primer-forms","version":"2.2.0-alpha.1ed322f8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1ed322f8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c825871b9da46efc5e75e2b6f6f27cfd08bcc504","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1ed322f8.tgz","fileCount":12,"integrity":"sha512-/N5+u3f+bjvHn3BlQ2OKe0m7h0Ds8+KxczLpkOHzEg7x5yhQteFYZFMgZgNLfFyIVgCd+iWSyOkeH7i1yVhYig==","signatures":[{"sig":"MEUCIQDmLHXHVFt1msCRi1wFkVqSSLGWKxbBaBQ6mrM+bdWvfQIgAwze31Wq6+upffsOguLlrz3LoCb8SHyzmKmTGP/51mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNRYuCRA9TVsSAnZWagAAG5AP/jIF3l/qboeX/L/TuUvc\nATRg5uRTt5ehUcOiSywCJl/s6T1dneqK9k0Lw0liE6WZXjBLiR87TtzRGkmy\nwWF/Sd/Yl36SQX4vojL1Q4+Xm8rf5+fb+B8NUuosX7hufjkzp9lJkcI1oLX8\nY5IjpN0q68XBpErOJNH3kSnF5FbzwR9VlidIAvewVHbEOExG8yi3GConRHmP\nVhxNbe0q/x5m9Uy8T/LiAi7clf1NH2FzCS5KWT4hQs6oXyPQlYbLqa3YefDy\nWgUPdz6s196WpPul8xufJrxdxfwUgAMSYkaWBbhbZlk78qxvtWBoL68snZAO\nn4HgvLHoc6JL1nK5Ro8/gKEwByxYOn6O7xun4tZZsttV9UbnYFm53ubB8R6C\nfkr/3q+3QJTrmHU4e8vJLD5P+dayl4e1Vu3xxVJahSG6B8GCmr8HY3BNpRto\nMvuBW3Id/HGZkNHPSNeyPvc1prdEZjj2cTjmewaVW5d6J30hLLLtmH0vLag+\nrN+WWhf/vf0m1QL09p0mbCfbDqhAxlKmb2ay2rfDLZmRebDZ9MduZgi96uxh\nlyl0JN+ny+Qsdu41RvG/L3lpOPVo3jqEuLuSUSWXA12WTNz6J382gMCjkK7z\ntd1Hx44Yu7Pla2qXwTjDFFbAk87bMRlItsDyOsthz6uHLtlih5pQPp+IguZe\nbbwI\r\n=V7aI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1ed322f8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1ed322f8_1546982958231_0.8660282589984964","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a8d2d06c":{"name":"primer-forms","version":"2.2.0-alpha.a8d2d06c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a8d2d06c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"485a950fcc3d44e00d6acfdaa312274150f58576","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a8d2d06c.tgz","fileCount":12,"integrity":"sha512-HNuV2WasmE4nxTA8gSzlsDJ64aShm+rGWGI8qbIeNF/R8lJPuXDIVeysFH4J8Obyav9nN4MI1i9ZTdF0aPUtqQ==","signatures":[{"sig":"MEYCIQDijY7uWycXoGGjgsycHYRqtfOpKAZFVIa32Fdnd85M0gIhAJAeNt4lU8sz/3StDyR+V63fedqe4XvOL3v/L1yfZGCf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNSiPCRA9TVsSAnZWagAAllgP/36IXwf00wMc/zYlHoZK\nanAGJS6hK27VTWF7+iTJDmeBk/rKjd6zwtpz7a/XU921D0QnsH+MxaKmKw+I\nikIB8uLPIiaqWXjH/Hpvd95wfEFYO386c0p+p1kV6hRQfLqRflbFpYj9jDzl\naBkecmS1U6ZUw8zoVWXoyfzLk8X/PmvjQgVZ2yZcFsFegNeSysVWy3s1YYNQ\nMbxcG/AidTH/v7K6wZqN4CMuoMm8yvSPIjufu87a5HP57KBOTaCRErGJ9pE9\nrONT1OxOXe0oG8Mncttyfx4uQ0lxsRzoSH4Myq0wMu84NHfKI1EmkE523jl1\nor/59NEaAPD26nqBn/eBqL2DxbsoN/p8dZiop17OSZXzjYrxEidVXlrExHmz\n/807ZgH6L+Coh+e6wlILdeX7eZjPoUaFX03UpeZZRuCX9eBC6C62hWffKbgB\nRpPTzRQ5ObOkNT9XxEtQh/aWoxX4TkKRP90FWfljpWMNwfj8XPC37v5iwei+\nape/OMgCWnM350xgrimPojJ3Lm8Ml5jF2z9MV6AzTKBSv7ziVEM1rjvT64ec\nuuaqZv4fVSMdcS7xi6aRVbJQ2yguNJ4HSE8fqOVQBEj5U+XRyHvlgVAJ2ddI\n4gT8bqoJYiCCQvqJe71VkpRcbQCk2VnuPZkQi1NPHKs0UaBwcl2iKgSd3/Ce\nqCIE\r\n=tuTM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a8d2d06c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a8d2d06c_1546987662484_0.45990370278246817","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4ee73d2a":{"name":"primer-forms","version":"2.2.0-alpha.4ee73d2a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4ee73d2a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9439339979ed0f4334fd02b1f0af1f264edaf9d2","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4ee73d2a.tgz","fileCount":12,"integrity":"sha512-qkIHYbDXk4lOSpIg6k9BXwC8agkz718zwQtYaqh3WB/Yc8INjhSqyG3CY+VUxjiXLDYGsS82G15FwCKBu0tghw==","signatures":[{"sig":"MEYCIQD+5NPvHTAYBC28Q+N9jOyDozsF9KNL8lvcDUQNj85+aQIhANxRWY33LAwbx2WHrY5r3JrpmcsK0w7/qys/7SfUP+cS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNSoQCRA9TVsSAnZWagAACfQP/jD9Ku/rvb7FivyyWDYw\n0TwHwbPHIPWPfOkIKWCgkx5ZPcTdhrVE6WB+2htLqyBLLOG+uY6tpyR5Jq2j\nKX1a9UDlsIlK0klFZl1P5wZZoWI0Q0U1/xbmwOkPAQEeNu0LHMwRnjOuJgys\nDAnZMJtXBr9oprTqSgobfinZaXwr5fcCPKUdtwIw/8tA7TQp06e6oEFoMZnO\nwC+AfAUobnjWfU14OCy2BPHKTi23TFyN38blNvtZNiUTQh3leFVmgdp4eGiV\nRF4Qj4NO9I1De7TMO4Go2eTlqWfUgslj1LZ5m3uMhiaBxP/qruPxmlOyLSJK\njIHAP8GA6KUnjUwY5CnCRYmBO3cw2siaAA0krXldhTyou0LWSRISQVTu7XgN\nB9Ptf7Vx/Ha/uaTeraGCWk0YKejrgWZd24Au0PbAj0XdMpsxnkGmmmGvZcTE\nzivheGPTGxpTqom32xQ4RrHL4m8dz2hIEKeTbVR+xs1KhNqjxRyVOgySfOaf\nHVtl9u44wjUdPGlmSFiYB4PK3FXe4Ub/ixGhgEgAGSKNrflyXn71rMnCNcs7\nbeK8pbTumx02RC2OsURfunUJ1Mi9oxzEt1UYeP9BYmaAvnA2Lqbnd7qrGsM6\nhpfAIDoeK2VHbA9QOMdrpByr/sqblWBuq6Iv+o7pqlJqKwL1AtRr1cZuUhnl\nw6kt\r\n=np7x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4ee73d2a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4ee73d2a_1546988048281_0.8728364088007223","host":"s3://npm-registry-packages"}},"2.2.0-alpha.36125bde":{"name":"primer-forms","version":"2.2.0-alpha.36125bde","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.36125bde","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"26283737a957ee5ff7089a534de776d9d581939b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.36125bde.tgz","fileCount":12,"integrity":"sha512-erTuZUCijyGAONsC+kvhjGeop6v6rKWcfeTvyCrxRNsC221NptjjVPRdnUHAaDs6YjZkByd7bwZujr03d+AWzg==","signatures":[{"sig":"MEYCIQDhbORG5gfrFuylzFfc+Xu3MmLSyJZ8l6rQElKECy8kigIhAJOdnOAyTOGkNFX0co2c/vAaPdaTSnMUdeVHcfDWBtXS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNStcCRA9TVsSAnZWagAAtlcP/RGlctmxy+E1rOWru2N9\nJDk+OngU6ErDxoxFtGBcCth3FXTAKrW5W+bIYMvJHqYTzS1RafBrQ242zOlQ\nhaQ8w7nLEP+mlrpXsF7qszpY04p5g4HGpVHtJIwg4EP6864u+eotbGqD8faL\nkodjU4MTQDLjWjC26sCNq9arqhqw6vKPOdo2iEeNWcUPuxd0+ABZOWLl8qjk\nhPRlgb+bZVRFJGeI0ZCcLk1YcSZFVzF/dqKMcnTPjH65oGEAuQgQF7rx6DA6\nNqrBjM3ySme4weV3xlAyK6XfRQvrQ9ODDJ4DBCKdWcJ8s5lIP0gAdKNlAONe\nGdQd7B6aVYb8O0UgOGy0dgMBMI98oVTCikF7awzk56foMIDQiuRcoiXb6l7F\n4RqGtApFfEFHrBU4dPUOvwFi4TUB1cpcN4izfe10QJ/wNtQg+Zlt10CTsf3a\nI7VgLSLsr8CbnWjZb9MGn6kD2/0Xx7UgYZX4q5wschRssuKlVKRDfRxONDS+\n5rf0JdQTgc0NdhwUDS/pmvINi8DLOL48C8+2TxOwQ8s8NxrRKim1f0n1fr31\npyqSR8/Kkh+ssT91ahCr2nqrw/emjUJ9kOBxlhgOl6F0zVhA3MpVPYLgP8gj\n/5kIysJXgGH/o727SaKC9OCYidEfpFVVXplgoswSPFTkygRIk4BhrUXr8aOo\n3CUI\r\n=14qV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.36125bde"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.36125bde_1546988379625_0.5331592741862248","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6a37bfd5":{"name":"primer-forms","version":"2.2.0-alpha.6a37bfd5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6a37bfd5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6688f58a22001de184064e1f78497421c2956883","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6a37bfd5.tgz","fileCount":12,"integrity":"sha512-+fDlVP+YWPQKNtZ30GiSQ0mV9gYaj8bmvVniIWlU6x6w4otxq5+meollS8wTsWelGJOlk/fbKz5QvOlmuXS3JQ==","signatures":[{"sig":"MEUCIQCDN9O3DU7NLhblAGvzPXAqebvnc5jFPVAezdMx2LeB1QIgCBaG9mHfWe18IhdeiMA2TwPuF0mgUIgh9uz0uxnoDdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNUgQCRA9TVsSAnZWagAA2LEQAJuYzYZaUY1IJ4UyXfzU\ncCO6kw69zXcXzp55vlQjOLmo6IvU+7cFvuyMYmWmo5fzKFmXF/gKAQQEI2so\nTO281GzOSt8z8g1JMYQzuWdFanTfe/42XLsS5GkeE+UGTNDJOFErDt888Ecf\nXnEugxfGCKmPo3zA/xb71n2FPVb3XtdtCWmpA6DCV7np/BRA5yWQqhHCS/lG\nxNr0hR+a7dS+wf0l/R7kzWzE606R5G+JUjbj/m0FiG9y7zg95FQCQLqI7sEI\nuYM9RpTlVPkHgg5F/8vFKyVcQBlv9c7vvIFoTA65QFTJKdWECV9bAO127Agb\nDH2FBF3fRnp/dyQ0yTXcf/3C3lmSqxwqEgogzBFf94mA+eooBf+lG0itbL0Y\nYgBVXDoH1774exaRIWw59fve0JQ8oDqKCE8cj49lFAmqDOWMEgIVgPoE7UIz\njtmxV3LIm8yyMJFvamipt7NgDnyACUcNqISCEAR3EA3k/FXvWP1bPYct9NOS\nHpL9TfRkERbHcFHXxXrB1R9vlOdc6/ApdkEZW7OjfP+zFdwbMwLF6bIGiquQ\nxD6V1jHMPgsDm+PhKyX6V3OlTm3xcdf9QY6klYaRmGmrbG+87GRgK0Q4DXqT\nnkz/G5o+qFaOekZMbU5T2jhO4leasaH6X2ojLt6FeFXIsduc1h+U/DuwoyMJ\nCAeP\r\n=1Cof\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6a37bfd5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6a37bfd5_1546995727999_0.044362536033481614","host":"s3://npm-registry-packages"}},"2.2.0-alpha.35d6afc4":{"name":"primer-forms","version":"2.2.0-alpha.35d6afc4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.35d6afc4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"330ffbbdb50dbd2900e93f0ef9389ac65e0d0635","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.35d6afc4.tgz","fileCount":12,"integrity":"sha512-56tylp/200WT0x42cpu5dRRPmSLyE7ao3WQrMbq2acvCWvqPBRtiM5tA62z3p7XpjvppZUjF6aLaoY4h5WCNrg==","signatures":[{"sig":"MEUCIQD6H+sTJXjBSubn670zNKWNDdgQnf65HnHrSMi0VvjuSAIgMbBtlzh2xFwx7fiTsMzewPtgvY5Pmbj11WdvoTpgdhA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNUwSCRA9TVsSAnZWagAAOAsP+QEwg/Zfe8XwugL4n+Up\nhSrXEq4E3gkRwpSiyA+K3Fv+bI2OvnFj6eK0Q3FhvcS8u2IpPKJPL6Hwe54z\nM+psGEz6Emer0ZTmBraNeK0m158OU80GknIznlXdN2xvTbDn+7cSdbHOaivJ\nBNsSOhoQ80l+hcF3HccZMwnGIpvU1YZ2cSGloJ19+0i29uFbpcWzughLmMc7\nMMtc6uPfCOePF0HBgjs5IImizhC2ARQ/Bg0z0triUC73JNxRPa0+lotGw621\nwcVkjID3LOTxs6KoxKoiyz4q6r8YljHsyeMMaK/2pyNRI2zfrG3tDQC+a7qX\nUdTimLunfX+Y51nunX6qjqMX1qDJqmOSi9UoFQsBp/Bm8Kp+Pa3kF5U2+9ra\nBjW9v85QO1TLrnHh3Z8C9VcsMHilvsMKk+8VTPQpQxPfj3EifwBmRJrTPMgI\n+aAapWG+aP4THI1bf2wzNRn0oreRYcaKWVP/XDGYF7MR970HFrnIJ/GyQ9Z3\nIg6XNKTcbX175SVU0iWwojyHl6Jm4wOCGMH2I3zk17kv0svWi+jeycEsLacO\nSBRZEu002/7hk596aZEK4zL6/T2o7EZDZktNqqE2STE6Gh+4/SVtVTLRcWFZ\nBuko8RXeiIez+lOLFF2Om6ZL5ptfM4cmr2ajqdGI71N8oP+NaNOj/hmd3bxN\nyJAM\r\n=AAJJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.35d6afc4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.35d6afc4_1546996753753_0.09488530332424694","host":"s3://npm-registry-packages"}},"2.2.0-alpha.88be8a95":{"name":"primer-forms","version":"2.2.0-alpha.88be8a95","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.88be8a95","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"967613883a153b2cde40c4f97439b63261242457","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.88be8a95.tgz","fileCount":12,"integrity":"sha512-01oTQyyYPKOCNxxsLF1AnHBV4MLwG0byWPvpdv42TmE2a5BSzh3r9xYr+mpgextI+nzttjFipB4PtmsutZTBfw==","signatures":[{"sig":"MEUCIQDG+ZeAbEi0LTyFQ7AFDU81XBhMWf0XYswDchsbod1pFQIgbd0cIzNkEm0PybtYs5td2TQXRIkEux3tw2jwupACoMo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNjjBCRA9TVsSAnZWagAAJyIP/1QFMrpo35sXziW69B5f\nPMDAZTezu2NxL6EEZqDQlrxL7IzxVm/ACNQE4nbyLIb2sVNfIrD47384IEk2\n96TzXf4MncPUnjGnUTqTk8EC6qAzBoXr2O1EUfEF7u72Zjlxh34EMBWE/Ete\nXBt9LLSJ5/efKktk0rJBHItK5a3lDYt6qMuu4IMRqpXCI4MTsZ7q2KxcihMe\n3OH9LpnJKkklf6Og+oOoJrkeMmd4VTiqeioFDPCYzzl8cJf96b0nIAq6c+Xf\nLNDScE+bF1jy9igR9Vuj2KEmgLTH2KuzJEkYllFyK0QzV1Nv00TkX+UtWwRy\ny95gfhpoydMVJ3snpR+rVx6cmRsUvtCmq8AiDFzcXf8GNd/Zvxlt5QadpPMU\nNOvxhzWhMlroJE8QpcebhBpcarUvXMS/6XEi9vgQqQb+XVy6gjpj/9gONQOj\nmgrcAc10On7MPah+Q4xukhfxrsFfK2jSebvk3hZkrnLeuQSmLzRKTNliCTYJ\nH1xvsdBrvFsfi9hFVXOhQL5FEAF6DDND2vEdTGUNxnU5wQqqYC4Cxacatgux\nAdAUsyk0iwChNSRwgCP+IZ6lyo8R/md0Z99VpXbhAackghcoNNJRLqFSs9o4\nYGPuVNhBH4DcoANzak9svwHQf5NeyP1WgCdKupnupyw6U2PVTODDnFiVYRVk\nzEmB\r\n=wHDn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.88be8a95"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.88be8a95_1547057344351_0.548507327062119","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4ab66aaa":{"name":"primer-forms","version":"2.2.0-alpha.4ab66aaa","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4ab66aaa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"41aae05711ba2ac706f52146d667cfa667667210","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4ab66aaa.tgz","fileCount":12,"integrity":"sha512-g4Z1t9+dJmozUxnD42wAp1aXiVYyWSLLCL+iVKVhDFTBzoeoGMSRRRfs9vDalqjYzuLIxAtQyAE8Vh2s6Ivo4g==","signatures":[{"sig":"MEUCIQDuCdhwwD33KvUMmf+F5voT/uRyw3NqQIRPOxNXdXDKGAIgLWON5cQbIT6lh2BaWcc90Dfd+wJTCZBup+naYn0hZTQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNjmsCRA9TVsSAnZWagAAeC0P/Ahb6Mph8NqvcIvCZyYY\nucCd+Jd7dtRGgfFC5KpE/rIYyF1mfFlTm7Ld60K3zsAYKSpqUgu46dBODSEj\ntgFZNBbmg46qsfQ3jWucJ0FUg7uvgM+QPj4eF+57LQPO7CrLYDAKrfFFbUJS\nBtjAmTEvG9Ytoo/nZW2VNwyMd5DzxRPIgpYGAH98Xy3aCt3RhnJRLEO6vRwG\nbti5Rt4uFvtJ2Rr5cYHbld74A4PSVdS+7nTIl0Ztz85JU/29C3XxGgnBRKBS\nom2Q1VBy9LYSHHc0N5Hn3nEsI38cHPhD7D2t6PofgY/+rKo6mZibuuEHoxYE\n0xAC3jEtjQI4q7XNF69XLDXJNXVX6yC/unHJezwmvqZxBCRH7LzUKhss2Emb\nCFohiQLIqCMuypIPgqrCWN5IeuazFqHhU6aDrg5GHYvUSVFN89lSrNmMqzUE\nXwEGUSIfWIW9ijrxe1xhl0YnzH/+JdZcJIYWKPfqSJfS/lu2+jwsX9nhpXG2\nOaKiirLaTDWDAZLg5dk9gT54mWcDsSeGxhm2/cpkQnJRzK74BkmGgDCWPxmU\nZVij28lgDTLNoLZDaQqiCSsW8g4kh13xTcBS732TkVkV3/BX2l1i6z9fH49X\nsz/534JR6qLow88e8dNj+IAsJEoeHtKmurB6sYg6vFbi6kg71ujibnjdfUPk\ndxRN\r\n=SsuF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4ab66aaa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4ab66aaa_1547057580125_0.572489131360556","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6af250dd":{"name":"primer-forms","version":"2.2.0-alpha.6af250dd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6af250dd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ae69f3a093ca6c7fd7b4466d3f2433b0f9564970","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6af250dd.tgz","fileCount":12,"integrity":"sha512-SUk491aoN53sry/sVxSIRQc9ea1PrWtjavTtsqv7TIqdQc/X4yqN7+8yiC+KNI+jO+FHgHe4QODNVLoAFYOKgg==","signatures":[{"sig":"MEYCIQDbuOSeUNBn13yos4GHYbaXQLlz1ox3XJ7T/egIKhbiWQIhAJKRAw7DmwD4zIA4a93xE/TgKlC8pVUXj13Hh6BvXQ2P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNk3RCRA9TVsSAnZWagAAxaoP/AhsBeWjVkBbZxWVvMWR\nLJQ5j2L7S1Xm7vxIj3ZZonA7fSxyK7mnM17OIgyKCN5CM5ZB1d8A82e8DJSh\nRj5oe2LU/FK4GbgAEWnzmDfPLbyFx7P6/1vaIPba0WAmXVLDVvhFfNbCnnag\nf8TJahw+YX5BUOsNYAwdcWE7WjXHCWG6CDSiqJOT1yJE2zdG8qjvieUzgwb1\nfA+DLIaY+C+QuUGJvs3p71VVsDmBlv5LBvXwo6FF6wulEaiJl1jBpWssP9tu\nVOowkbQjXqGvEMyYG7Fb9o/Yb8RGQtF1fSK6ytdRbZwLeBR+3anmY+XRT87h\nQl1yOdsFcKvkdT3M0pWXQg5wg1S8e7ANrRUlocuhQNIN+QxfdglZ9YLAv6Ta\nQCn1R/NkX3ns6hZx/tlwX4TGOyQ8btYx7YPtbVNuI3dycLusDLXuoma50HaZ\nfT+6lkn1Dniga0WsiHbgjjeBtDvbeM6/+IHsRuBMijO0A/kijTI1OS6fzizb\nd8p2x0hshsgHHjyj4oVQ7YKdy7P6BdISoFxiv1P3UnowgwdxPRC1YxbfW4Xs\nk8y9W4mWUoHL3zqTy0to7RFTHYf+9CFHa/TcgCqMv5L3/GyMe2f1gdcCh5qF\nEbBjjNlCn7YxYEqPLbjyra2yiBt/NJFWE81a1+H/SGhUBbWNyOo9jTMAVv3+\np3Kb\r\n=dJYn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6af250dd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6af250dd_1547062736941_0.7469928567343207","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d16597a4":{"name":"primer-forms","version":"2.2.0-alpha.d16597a4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d16597a4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1a413b9530127a327934c6251ad08574a43095d9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d16597a4.tgz","fileCount":12,"integrity":"sha512-zxAUpprpZDqCWphgku7XUL206aJPUhyv75FHCSC+8cYgiSYlvZNp8LTDKIkrkaSQq+QsO/I+RhJI/bB2O57f3g==","signatures":[{"sig":"MEYCIQCPLye4AEuka6kfbpkjmVx9I+tD5C6lQE9PkQgFera2VgIhAM+ntbCWcGHo/SMl/OsN93mFPFYeEZVGLevNzmda8a6K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNk+pCRA9TVsSAnZWagAAnngP/AxrlQSqNTA983UDaeRz\nGIhkAk5AaQT59595kE6oNEX9VwZzNa3Jp2Oizk4V51+G8jg/18TR/5WWMzVw\nElY0RwvsgS9DmH5cN6Sq9BIrj8fhSKcbbKUK6jEaJIxGMX3UJc76WP1dQSng\nTuZe/G833oon5dieSgeuhz0XAkEqyUEQOD6GN+9BuqG76KLiyVbR3WiNZqJ4\noMaX3Tn6onsP9Y7jqqRMseGGdovDj2px3qIm7n8bCaC37mOQlX69CrzuTr4f\nQLGPI54zSxZgLoV957TIYOLttTJSi54+RD1bWs8T6YayE9xyD24MUHlw6p9u\nbU3J9auhQ0a6wVyz937j56U5cZtBDImN417yke+GuX+O6ENh1uX9ffk/gv+6\nd/R9MI4zKT3fdznS8ojgBpNmBXyZS/NpLWgNaN6XR7V+LdmWuJRNZhQnQ1o/\nyWu3sqgRYVrScwAgHO6blCay3D/Eh8Txue+I5XZxljE7+m9Ng8cYV/SAU3Cb\n0UMwUvVWgj2NCHNIbLBWdny42ACmDPg6CIMW6AZeDi4DXqfKW7r5NL6phzon\n97ATG+VzXVH10jiIh8cISlcQO3TGnEjC2CQUCvLDkFc+VVmj0x95UUjGKoIQ\n3k/R8Urq2lMZt4g+RRDddemzIcishm+BD9LJOEeygqOuGwIeb911nE9EUarx\ndxEl\r\n=IJR8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d16597a4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d16597a4_1547063208782_0.12343810428331348","host":"s3://npm-registry-packages"}},"2.2.0-alpha.100c45e0":{"name":"primer-forms","version":"2.2.0-alpha.100c45e0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.100c45e0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8f3407947b84b35a2f5ecdb6969b3ca2384548fe","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.100c45e0.tgz","fileCount":12,"integrity":"sha512-1rWc3Vspw8lOckJLvIYCcsrSLSmgeRwqqsrwg1Ms4xqD/ee/Kn4hNSS+Neps2Pvk7eDEMFXiTo3mD6cOD7mFaA==","signatures":[{"sig":"MEYCIQDB0Pf2KJK4MglaqUC6d+hl0oDbb5DRFpt6wYiXdSD/VgIhAPi8xVogyT/mfQgQ1+VLnfkzUJjK2bAG4CJ1yO9lM7Bd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNmjuCRA9TVsSAnZWagAAUicP/2nooTtUnBd0QpfAq1rK\nvhOsgmvvvpp0bYItrlKB2vdMaHfC8LfjlfkZAFjwUcZSlCg0qG2LCxCIRpM1\n1YZ3cQgD2ggCA4elryxcOruTl3p89bXb2F6K7vwRRYbRvAJnLdhot9c60yl5\nB3l78ovyXV/mu+SjqybIyqC9PswnhtVZWHQpp+b6AgRB6De/U6TMU2J+iqc3\nueM0zwQqYpUpfruhAgXSU9LNURE/mAjx/IkcvIaCrR80jYDvkj2mLzKwEvw9\n3oqoeeC5+Y4vuaV/OH1YonmS2E7YSHZc063oHvFHO3kVvFGTeRVMcX2By6gt\nt4pjFgQjevR6LcV7ZZ3TTsH4dW7c6o3W6YiIe8RB0uSE89hJWV1SiA59JDse\n3bBUlMyO8bTeOu3SBNWxeiNKVxyur62AO47ZMA//NvoXVW/JTuiLoD38fCs1\nOA+iR7xVBnGSrd0W7EgcJr9Nnu25Q4dJWIDRZ6R/ASmlP+KBgbHaaXnXKBSh\nal2PloNdSgXQAgp2zbs2aWRhaVRu8WcOYMB36HYUBcXpdE7zLnpNFY69LB8a\nr+kFe8g7oXXUaKMLVFuH9P7nspl+6/irDJGVuZLJJvGMtKdH5QakoPLbr7aT\nlEecz8t1xyqdxh7y8BqQ7klW8NCHJdldWn4AY89l0AvtrdQAtG/TeDYsw/cX\n7Qge\r\n=lyqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.100c45e0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.100c45e0_1547069678282_0.5554402711133135","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c5a475ff":{"name":"primer-forms","version":"2.2.0-alpha.c5a475ff","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c5a475ff","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"295c613421216153203724f9531b1da5bc46675a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c5a475ff.tgz","fileCount":12,"integrity":"sha512-E+L9FSN4/Ai4QsR+pkxUS2GoTnwCHvK/SXArdg+wJpbDynDRu94Fsuzu6sjNQQ2RwBPzRXU679LGHbrJuLK4wQ==","signatures":[{"sig":"MEYCIQDVTwiW1e/VycgqzmNrxd95E4VhWyyUfM+VLFm/gpxr4QIhAMyBnqpzCmbRyL53YZ8po7P4J3ALIssXCjzo5cPkfyo4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNm5eCRA9TVsSAnZWagAAtVMP/RhAu/lehSGJnmLKdTbc\n0Kf7LT+z4c63u5Ep9Ua+X8oqqhDk7vjDxTHPXNnExwBCgeigwgB8eZZs7BVz\nHkXik5Z8OVywbY+NKBbDbZDcMdmoq4lxmcFdJ0mHJbIOwlp3HwOA0aDWus4i\nF0SN1OvGbcqiL76HWYEjF6PDDEddDvWSjiBj0gO+fm+pmR9LQWx0Fo+cBF1G\nBMfyrwIYmvheS1dUU6k3L3LOxv0LwoajquiCvKpPakzOsLBQpV/hp71YN6Xg\n8Nba45xwGrwRrGTc2hMrM9/34/6vlpPAGT74kAAd5k7D92I1PQllhSxhPUEf\nGSfp1sfZxouqtU8U+jxW39nCMKl5fwLX7OZ77361UGVgiEeIH+6SIwEnSCyc\ndB7YtWu//JbmELjYakwtN2w8oJCSm06Ixo8rL/zrf8gjCPz6Qvw1tTQn7wtm\nOP6G+QV3hZ43JkP19nLjGUm5B10FPmXQlsDp7wYCQfmyZE6B8iyFMIIhS5sd\ne4Pku/qO8LD/dw3Z8q+vcVq1fvnDLJy0zr9vmIJtlMrEfFhzZWZHPCeeLjcS\nLCTqOmUmuv6k8Yx0KmvF0tzssmWu3sPim/pFaeFDOoOxeg5DPcA+cB/lIfk1\nwVal78dqMleWDzUvM/EZOtrhLtBVEKm8/zT1TVBPcs9shb1GYnB0B2dRSm33\nQjay\r\n=MBhX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c5a475ff"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c5a475ff_1547071068483_0.2763385785602457","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d2e6ee2d":{"name":"primer-forms","version":"2.2.0-alpha.d2e6ee2d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d2e6ee2d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"59452f0a1111aaf9124783113b774a7320788238","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d2e6ee2d.tgz","fileCount":12,"integrity":"sha512-To+q4FaB4L2AlMrmG77U7IYDwrEENol0mx+SKYkopX6H2EQWXal+xgZef7xExeNQPFPOeA5XsJ8IBNiA4ZhukQ==","signatures":[{"sig":"MEUCIQDC4Q3nuV27qPtdE5mvzO8DcAbnhINDKN74yVXI2lDyHwIgdWRFf92h1AlTlnpidzWhKXEAB4lRB28sBMmvcE84Wrc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNnEICRA9TVsSAnZWagAAd1EP/ikHKwhEsZtnhQfvQUdP\nJa8V2Pk4qr/0dDQCrH4C9aUudFr1YcbaMmDBx7mP/IMle05tVfDtbA6mYtLJ\nXTeJ3YcUEulwB+nAkXvZIWRl1U0OiyUMbQ4LgfMZvEWNPUgrth6iI4x2ygse\nCzoSc42++YRCeU2E8Aa5RjButTNRVY0nETTN9Jgua0muDMKLf5SWUwI4XCCA\n8xqn+0Sa9txu+hoxIqxWP2vBXLO3oSYSx049u829i3+lj0UU48UtgkYdy+mo\nycELkvVGKS9zUd1bVDZWRbEPNNXlG1tW6o3AXzKj33khZTlxxxAey9Njujb/\nOTGtAHVVaIGKesFOviY2PoydxZShvHI3huiq70OjsgC845Cf1SOgXvLGGMEm\n/JC7MnZw4lg4MReWxvf/wkhGfh2eN8/XaJtmXHsRlWYYlsDNZ9tDVzCmucJs\nhmVTJEt91b/MMBLKwiq8MBdd+pEdLI8cbkGB66EMyk1q7I3DR0TM8NI5Op36\n5nBFIwYao3trR/MgHnv/AgImxmKuGqQ1x6ncy+CRl6YYC9zejuCgmozPO6Lk\njY4X+5dMP+XFCvnXKLdKlulCLMspsEdBNzDMCh0D8zh+k82RtiNDPvIqqfcn\nlW6UxzFB2elnNFaH2IFX++lddG7rRuHw36viqAcePgUdqr53lMME+JpxW10f\nxuQG\r\n=ykAI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d2e6ee2d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d2e6ee2d_1547071751960_0.4240043193009573","host":"s3://npm-registry-packages"}},"2.2.0-alpha.3bd3259f":{"name":"primer-forms","version":"2.2.0-alpha.3bd3259f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.3bd3259f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d849c2dbf97c1a05e6c1afd2f154f620fa2fa196","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.3bd3259f.tgz","fileCount":12,"integrity":"sha512-/hSLrDG9QpP8xMztojOWLmg+rxQNsbokjWPrAuCNS4qKERwnR+DGGVOYGqHvQyYWhjA9AWj+SQQFPDielXncLw==","signatures":[{"sig":"MEUCIQC7O7db+rVNMDuC6Wconhi949e10gJj5Qsvjy6nXt7eVQIgF8D+Q2nUPeCr/v9dyL04UVMLLE1g6JP2oYhTjBN//GI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNnM4CRA9TVsSAnZWagAAlHEP/A94Qb9tb51DZFaEb/G6\naD6ATtg9BhdLgASe3SZEdaDuh9D9QwYBjkuTZEx47YePiJ5f9yII1QXJet6s\ngd/VJivr6KJO097ckgp1pTCYytB1ps44hfsvxU6yNr7hA7tA1Q5rQwUp8guu\n7oO33wSZM+1ZyLbrLW/gU4sC9PaiRKAcjjyPZU1EAf5AM7XFvBSo+zEbD0k9\nlyqP2RgwOIAKxgBC9eRt9vGrcbnQ4hnc6qe1Vx8BfZAmQ1wK8qWJi2XM6Ca9\nca6MCzvN/9Cfxh8hf7jVuSyEDZFLD9qDOoPxi5UcUgITRiVD3Yt899DisYcn\nU7w1kIywc4RPZNslaLZiHgRBT9HTYpo0qVyfK8LMTl0nNHcJ0+6vn642cuuh\nGQtf41aglugqcFqLys7fQlIMieK04zTz2465utnOmTceGyMvbag5KGe87ngL\nRDZuLQXNoQPpDx/pbYS1eDu9phPwSQHs+G4X6zds05erv7W32iriMhLdwsH0\n+fRWetS2DWzPl//HBzcg4te/wg7tAGn3RB+8BqBhcCvZdpqvTwOJR6Uv/WNs\nHOXF0zUhjOh/3//iNmXFIwKZn829pxjWBIuqtZPv2M/CQZNjiViCrpYoKytq\nalgLzJclgdCZNB3jYUyhZn1f6N8RJC1pPUomlKmg+z992aEBvYOFZ0pl3duB\niUm5\r\n=3FDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.3bd3259f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.3bd3259f_1547072311405_0.6968770485084572","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9798c944":{"name":"primer-forms","version":"2.2.0-alpha.9798c944","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9798c944","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2bdede15bb9ea0589bd8435932533950bb1a55d5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9798c944.tgz","fileCount":12,"integrity":"sha512-aFci+non5c1HI/co4ABeMmjmfc+DxmH8WZThlmjOHzY8ywS2jucnIOdOoVSwx2M/gDqp3JBkHcvXdtXqUhXkfg==","signatures":[{"sig":"MEUCIQDauekrcbsbwI+CNBXbKL1gS0z5WmCNfqWTBVRRciI9SQIgDIdh1vgCyHmFH0+lEcWzpyWpeO/nQ/6INdxwwSgZ7Bk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNooKCRA9TVsSAnZWagAAklsP/2k2wQNl0If/XeJsncHE\ntDUPVq9C9YRxpDDrmq06oYk4AQAgFrv9IbkfJAu+doT+Wx3pOo/1GlzDjGHz\neozeSY0Af2uuekw2qOFoUg5JzbecPrxlaFw2xF10I+2HP/TFk9tQT1C/ERLA\nFZDukcX8fvFEm5PalplnbVYgKjvWnxVM14Aq5UY8DZt5+3Kek5QcqiQJU83W\nOENblGjqwHnz7OtIZIOkftdb9hXr4iiLB/9y1L9DtcIeakAom2bi4OadpQrH\nir3sDdkl6O1th+lhCWW1xkgKsMCwVco/I9KP5GcR/lE3s2AWNxhQIBB2ekIK\n+oAJDQp+AX3oIhvJFeMx1IUSUEP/UFd6VaAmoIehstCV36UGH82Sxziie4sh\nu1iXqblREXcHYwbFbY2XGg+MSItR1FxIAhq2dB4zT3fwRe/3XOgaPqGc5kgc\nwILw8fHgsCXvZ5LONV+PL1ZJHlGYF8ASEpQU7f2s4Cfh4UI28V3/aMo4lq0X\nmI5JYGkXCjKd5EGlz7fytT2gRzDuGEi0i9hVL4aFNX0uFJxzF6L1QU/GU4Y5\nTHLQCDFxRmGNthCYzLp3LhU4HF8e2UQfD2VcYFasxVHVLwpDZEHel0IwlREE\nbBeeDnpnjTgLGlVK3YhghERnFKSYnjPIJBxDYdpjEnkAB2otj0saJxyIEkzn\nSQS2\r\n=7ms6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9798c944"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9798c944_1547078153505_0.9864382387103916","host":"s3://npm-registry-packages"}},"2.2.0-alpha.6f43d81e":{"name":"primer-forms","version":"2.2.0-alpha.6f43d81e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.6f43d81e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6175b96e1089f93bc4b695c24ba9dcc823cfc20a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.6f43d81e.tgz","fileCount":12,"integrity":"sha512-+g9jJB+j5h4mmnke69DjYEDsH2AJ5Qlwk6LgaSB01gtQEvhwu05EDwwAvemHO28oiwZtXD52+kDqW/d18/RUEA==","signatures":[{"sig":"MEUCIEFForI/UGmP51JIaVMw1DUBVQAiqBWV9Tq/PTGSleUjAiEA6Rf0Wg9ORBxpbvmO5wpe3QzceYSvR3XfsOXY8IrL0Xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNo8iCRA9TVsSAnZWagAAqWsQAKDQv61XQhuymxwnYgfx\nLcA6azVozCSCNsYvHx0KHe5CIq3LC2trcrMdxeXcZSByNe4OIB9ef7smf0nM\nj/8XdB1SaM/snJKmiRiUgQQ5Sgdl7xkt7ETCQHoTm0VoTGQNISvcEfqWK1iX\n9OtMDrA1X3ainW0RCY4ijR7CO39y8KiSIBaZlfyIVKLpjKvizfbk4WIpp9mq\ngno5aAKLTlPiRGj7R4Sk2Xo7n4AsLieYU3Fq1ibwY0ihDG/MQ3oOEtF3KlKK\nbOPw9nipYOnQUScfmvo0Edr5InQo1jcEWNH8mWOIq7J/uAvGLFdkZuD6K4k8\nPnMLg1l9hJWJ0dHkm8+WeQlntakuf5fxxW6o6v0eXxfz2M6Z/PEb6PFSY6hG\n/lFstU7RNiBGlebGEbhrjBrtDK5C5RmOapgdy4ne1KRXpTc8PdvunQeeEpR4\n0wCLiN6BHQh8no37xXwlwCr4XaudYVdQF3n8uh1i7+ijZ5VvZoNnNJVSBpyj\nFVshSfZgL/+KQPofXGSxUbPXY2Crl/KXEYAmgw9Qu1lMhbgmwSs//LJ/Ja1A\n90t2uzpapxLGLLlEDMBrf6IhvAPrFYLzDLGKjQLaIFzUVNTZ3W4b5SVeFNQC\nRxeoValn9zPCpODQC3cie3i3bCYnTDeox6AbKHqsLmJ9hHT1vIVMv0HNQ07e\nNswP\r\n=E41w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.6f43d81e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.6f43d81e_1547079457815_0.26244950123682","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ef34ab55":{"name":"primer-forms","version":"2.2.0-alpha.ef34ab55","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ef34ab55","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8aae10ae8241cf79280de627773c1623ece432e5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ef34ab55.tgz","fileCount":12,"integrity":"sha512-xF/t2FVZi8PymV4OYR7a8SrxRgLhdw+wILFBnO0XXyh69dZPdF7uqcqfxKQpj1YzeNrycgqGAnegrVSWQE+sTA==","signatures":[{"sig":"MEYCIQCcnpqKd79zD55fCdgQAUrVRF/ywiKcR1ER8sYaF5JAWQIhANLh8jyx986Mt98ebLxl8iZhXgXrJ7y04sMM73LJK9jj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNpDtCRA9TVsSAnZWagAAQMEP/0a1eaynwSOhqkOtsfR6\n98lsqU9mPnggkka8iXf60Q2oVs1sn+cym/6n+aJxekNEUBguHVq9q6dH5Il2\nDdqHoxMdOVH4Pkt5e8h+S/n0BShChfgQzrIujLIzYaKojSYkVeaHbwhqpdOB\no4frW4Fj/Ewu5ayMFBE2IzjKLXj9IOLGOX1BXD6PY8FylaUX+C/gr0p/PX1O\nxAcdbmsFcCTFy2+wB+jPrpHMFOy4jsn0HNi/2kwXTPIvaualJVjppfLrblDz\nHbHx1yBtTQbSHOiMLcUOqKrD5XSmO4OYCjh3nCTKd/VLJgCJ8P3zJdaZGBHU\niQYnhzi/34BAYWz/IFMxcjwAq9Tb4lvTq7AUMurnFoDBoWrWzlwo3KkLr8CM\nyVQcSe9AXSqGWBJcF6TNp7UlizJbNZV8c2+YMMk22VXQZ0Ug5LVpUruLjhZd\n1QIsp5raOpPXv6GnGr2Mg1vP7Fn6+pDPyt4/uoOt8Ab5V5adxGTLYxn+RnGe\nb45oRVjjIzpn8lDbfdFyzmLr+aY7mWRCV7QpbKtNA4cktt1Nq8xbJgwDnwbn\nLwUlnu12+233LgXHLGrcMFsbgbuo51hQTgtOCh08Fp/C6+wBhZefVTgR28sm\nzp0MEHYGK/DwbUYt0m7MAXToUZOtZvx8ZJbr7oBkPh5sJWULcm2Ep6yZBrXK\neGLv\r\n=MWXM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ef34ab55"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ef34ab55_1547079916361_0.33377846885054696","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a6cd7ee5":{"name":"primer-forms","version":"2.2.0-alpha.a6cd7ee5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a6cd7ee5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b8a7a65a1149a2c38f976f47fcc3f38b19f0c68f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a6cd7ee5.tgz","fileCount":12,"integrity":"sha512-WLCppr+MMUp1YAGErZfycjCBd+hSrVB1Mags29qXNbhLMzHdlO0STwkN2iigmis2ePRCL2ETgwVX1PrdjLck7Q==","signatures":[{"sig":"MEQCICrN1WIiQzHKA+77TIxLYHSgBLyYrn9JCiP7mLab8XaWAiAullpraUxoDv6QyYEqKARehN05jNknVSLyjqPPZ/LY1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNv5ACRA9TVsSAnZWagAAzesP/1UmaRwvzMkJ2G99gCH5\nqQRF7pqb2mHVkEZoTLVVcRH3R5ExGUnYmZDYY4EYg8gOl1uSKYddKEMzGQGs\n3CX9IqUQiQ2g3wrDnDMLKdrnre/lftzV67H+iv/DJZvM6mG+jVIczqlgzzl4\n79KsMpk4Zcra/c8R76QGfDay93MljNAxSEvFYHshg5FMt7d0F94yHTlDxlae\nrpsUE7p9AORwdMvFLeUbfM0CdNCY6zZ8eXfHVfQ3h7YHWeDzloRjvUnhO0V1\nq12trTF9Gl11SFlh9o6MSGxXxw+ygFNvPAt1tswAQRc0jHy3DH36lLyOlOJ+\nHXtgH8dFPjR9k0/KB456oQCjJ25c0zVmnZxiRPt1Qft8UDXC3DVM1URW//jT\nDBLlIkp67QuFgdoIhI2JmtcrHhxKFaJy7Ofk8eTXnEgUkmncE3mUHx4VmaJ3\na42EVuEtHV2H9gX3KoBP7XiLJzYLb1U8toSvWyEiwCi4PHTm6a6KjwpSSd9B\nt5ZN7PrBJytc7iRYlfwhoqItnegrAiUMvyD6w7ThN1kB9PYECa5w+kzTa9oS\nRE92cefJohiRImMq9kFtg1g+JT+Artj2gzAOfwj6gQsIQdMdVB2Rb5Avtf6W\nQLj/8UzriCvflZm4s45WqvrIlt1gLyKS3Q9fCQJZ2GIc2tOI4zs3tfVP1Izh\noA4b\r\n=Z5bQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a6cd7ee5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a6cd7ee5_1547107903504_0.18061600543968281","host":"s3://npm-registry-packages"}},"2.2.0-alpha.45cd0ac2":{"name":"primer-forms","version":"2.2.0-alpha.45cd0ac2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.45cd0ac2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f0bc69efa657f791610accfdf59993faa016b058","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.45cd0ac2.tgz","fileCount":12,"integrity":"sha512-g6jBWxuobeMGZ4AYwQCkBgjmRgdJ1wXBlwDlQZNgdZgOT5P8vYK+36SSQk2gFb06UgC7cOKwV21W7ArhaKqVag==","signatures":[{"sig":"MEUCIQDvTH4Wj/8qB1aHQ9s5TrYUgTpYLxBXXTVmeFFd6OZRJQIgHgsqR5/MrvgPPTBl2EmQkFmqT9bISktlTBzUHFchxEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcNv8rCRA9TVsSAnZWagAAZasP+QGLntVgTAn6ZRWBOgzP\nms/NhQcO7KyJQO+6/JDN7VFQXCyja6Y9tkfsUDI9lnXKUywoYYhbfyAy/nEU\n9q0OcV6gO0abFQeFW1t+TW3ucxudYKUPQBPVqXnTtXbVfZ/irqEHBSRSWdHi\nS/bfEeQUcXxumUz6o81g2AS6ZjKbYWqmIyIAwpXSSYEo2iquEaOwH4WTDENf\n1QLsegEkHzJCDKLQFNQ47KpACw1LQByETMZa3pREYJJZOBE4uic5ZG6Zx+/U\nVZOqPXMW00pv1+LkLYXWTJH/KIxqk/OPBFqKJU960WOrD7V5meSFBOP9CjmZ\nY3bwZ2i1Est+JrolIvO+ABfPzmBIYilHTHFBKfNUxgG5dJMNf+K2SLfYSMKB\nI6CdGm2ZkyRfzVh7rHnp2dPI1F2GaSH0Q4WyeLN177dNCTOOxD+eAHScGqj5\nQQSAUmtPrA3X/qFvSjo8Drn0MVsALL29h7PUTp9ErfOlEz/LBTDr/4rM7qh7\ng7/uYmkHF4YXRvsjZX8uNOisUpf7YXYEBDxDxcKd3L5rvkKf93fvQkm1l3vp\nvkZREvqbKJB16Ch+chocLC9DhRqZib46aHlFFkdzI15ApChs+ybLpcq+Jbcy\nwy/P6ieqNFxBfBtw0psH+2CQ/FaNkELIRrjroh4EfkA4MTf+K0OSDryClx3H\nsyFX\r\n=hGCu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.45cd0ac2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.45cd0ac2_1547108138463_0.7741514529837541","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9db56652":{"name":"primer-forms","version":"2.2.0-alpha.9db56652","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9db56652","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"401d2f2d589f072aa0387e847aa48a97c5ca7a8b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9db56652.tgz","fileCount":12,"integrity":"sha512-zs6z+rMpevyzisf56IqV6LwYA60ABpg5LNM0zq/CatF+u3oiKZHgQ3BlzfUW2zAlGqK0xnRJ8N8U56yNGMDbIA==","signatures":[{"sig":"MEUCIQD3qrUTboyg/0UqQoFxH9ffZe7icM76bKje5xRpnnyyXgIgZZY5hOQn7XqjcEmZk50bGhkYN7hOZE36XJGNp+gAIpA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN8IaCRA9TVsSAnZWagAA7wgP/0ha1JIDtaC9JeQZfBo8\nbSP3X/pq/2VZaqZpTCbs6WBs6W1rRpgbwojNEnwp5Nj1c8+TQIE+mQ5W9CJ9\nkDFAtt2EzuF6i0isA7sfcDlPM3pDcccR4kzTxgLh/wNAXV9jlKAjAeh6Pzw0\ntx6R8HK9DdQeOCk6JeKF8nUSWx2Gxa35bQcJPO4CZOY0lpiMHFqwZbMAGago\nF0ThDnXuZ+YmmqFHLwqHgq/SrhE+M4rXr1Hqq7lN7N0RQoVTirOPpLK3ia9g\nB3yDB1fgwAVn/AVry57qpur0PGeWkTLDLCm36lHOJ8Dp7OOk7G5rkYVeSZvd\nTdwLSDpWFTsv/5f7PYCgIA75KmY9G5X4S1gh08YfJA2x5yqEZn3B24NfeReY\nbS79rgKHy4nbtnlIIy6L9ipbCl0gewJWkO/4A5ZQgA6fx2WCSTJNcWsv3f34\nR2T+7hDLLl9Q3mEFgoaORHlnBdeULytjJzFzCr3UovcJpopAxkHR+1iOk357\namQrsKyni13ZHnGqbzeSvHEohp20Y0mEPT6ASMVDLJ+H2HXOVtBdksb3zzoX\nOQpOyE7+SSktSMfHUL2GU7RI64ofoq/7SIYaPQzDjp96nB1g3eE3Flnvit3C\n+vlQK+w+/OiYytp4uDzhFZ+y7A8z2+dvuNnG+4RcSP+VmXIokUqiwIUr+sRp\nE08a\r\n=ngpr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9db56652"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9db56652_1547158041485_0.5313849495336962","host":"s3://npm-registry-packages"}},"2.2.0-alpha.629938f0":{"name":"primer-forms","version":"2.2.0-alpha.629938f0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.629938f0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"654a8214dcdfa8904712954867085a00f8b2679a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.629938f0.tgz","fileCount":12,"integrity":"sha512-YoMbFobUHG2U8G1+tZ3WTU/AEj+KMfw0LAfJfmcxsA8biAHK3NU+L89uA9dvVgiwvPB368wIJXq1ktAPkOc4dA==","signatures":[{"sig":"MEUCIEPvU+wY58uS7VHO1Nydr+77gNb6v+w6ZNnKStrx6MN9AiEA1qL3KykreevmKt0ODgbXRP9Y1O5Lfn6RWECDUATLX9E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN8RVCRA9TVsSAnZWagAAb98P/32Fl6xdYAjN2nCG9une\niVNo9/L6Z5PZUpws7Qwbxzf+73pKfX6swzugVY3Uwvabil9EBRtAObNeurQi\n/8GpidESicSNUb7o/qbW4T24sDageno7RfndDUQkEhmAPW/2YVR6Zf5zQdEY\nbAbGGBL7XtBWqPU5psKy/6wWUdw3TqIAVZqOs9749vkBI/9qxuVJOVM2MNaZ\nMH2g7flt7wp16x9uHy/hpO5sbmPHQdqyFPijUVVAOwI1qvvqTvEFeOEqNBbC\ndefhO2QadC3z5DfwAQXUZTp9K4XvKcrTdPAEuwmV2v4EvMDArMyLyxPLan0T\ncAfkg9WaU0P9DS2mJvvnssSe1YxZzeRRbvYR8BLr1fOpVjx85C1DeFvbMsaI\nH6mpR1AgGfRTtwNwCKFmxqkUujYYpZSE+JhrUWQL1ehcYX7v5oEaCvaj+Fh5\nescI8tq9zplGu4QEMBT64s2dPuadc9nnejNIrGCL8CvhD3Mz42f0JbczGuXF\nj3rT4/s970zWwr7Tos001yj1xqU38dlZ8JTo4X8AR8iKWCOq+Fr5rcP1JvVd\nR1AO/lstFAVekbcbAtCSw/kSwZTccMcfRHCO5lJoNACp5JaqSDswJAofG7uT\n28LLLUMiWMpIw8XkWFTJAcbBzhIHuYFbtYzKjwAegOhox2Y74mo0o7XZHKmc\nCnnI\r\n=GgsY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.629938f0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.629938f0_1547158613030_0.8606810421527857","host":"s3://npm-registry-packages"}},"2.2.0-alpha.de967b8b":{"name":"primer-forms","version":"2.2.0-alpha.de967b8b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.de967b8b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"02f11b250a21d9192b303fd2e171efcd35ccb333","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.de967b8b.tgz","fileCount":12,"integrity":"sha512-+g7cbOoCyW3SBBBnXb/UFxYPuCBxEMDFMx+gf3mEy7rP491eCBqyLm2WdM6rWhTz+7IVSzv5U4RlTkX3+rAEyQ==","signatures":[{"sig":"MEUCIQCsBT9CgXXs3gX0jP5UELl2HAiRsTmWihQ0QJxrGcwubwIgLhDjtBppKRo5iLae0G7K4f50yWDUbsjYOwrIXudlyQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN9zzCRA9TVsSAnZWagAA8WoP/A2PQ1Bthxz9MUh/VLN0\n79B91lNXCKL4EWLXhpGtue7LKdwj3sfhm07Zr8kMcWYQa5yC3B9QbbwnM05Y\nsZL7+3QshUzcuAiLjnPe9zK+AKMWgD4LNUbfRVKCnpiWXsaud2w4EjjSwV8m\njOxsbBAICqPGPC+f3Oc49jRV+fDTFdXc/HbpmleELBmeqFkatxuTFwpbXGVw\n/oJUeWA4K3tSa7FOnIcvmbxUShCV5N/vpXTplxgn95N3DDWHRd21RwsLiDPZ\n8EurBNwLUFwHQZQbsaJ1gNidDDLORvIgiQJ3qy/xOKF6JJKj/jFaak1d+UgJ\nZJSih07v0+kF+UGEaQ4G2PW9+amv85VlcOJoEd+UkJ3M5905Q+l5BNlh85zi\n6Q3w0lhuZYIXk8DrIsAcrihJuHZK/c2wKRVbtwzpxa9WMrjG+PZPXG06V7nh\n/cc6yBCMfmg0XV8xqumyK3pEb8UVg8+DQiyk1RHQeAWB019HgN7fkKt0j9/S\nMXIP7WFt84hwP6aESCv6HXoR9fADuQUB6PAm0LUDwbJ37as3+QZL+G7RVhJs\nVoqGxUdwptPZbdcWff9q8+eQT+PK/wxmROia268fvtvFaPx6BU0krD6JMoOb\nVg4p7EdWqo4eUF9FRQaKA6DDJgvR3QE99RaQeYHLGAojXAZ6jEMonSUWvH+y\nJ79p\r\n=Hrwc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.de967b8b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.de967b8b_1547164914971_0.4796012151393201","host":"s3://npm-registry-packages"}},"2.2.0-alpha.197cd065":{"name":"primer-forms","version":"2.2.0-alpha.197cd065","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.197cd065","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3a9d9c6ba4a8738e82888396c2170c78ae7daf46","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.197cd065.tgz","fileCount":12,"integrity":"sha512-BRS+CRDAYoYduMwbVFdafaST/ef6tcN7VeEqMmDUftXz88vKb7C5NEDmA9Okx1l7H69DYf/+CKIxE2nRVOjzDQ==","signatures":[{"sig":"MEYCIQDkm1CbVEDZ/tss2HMPFVxzCjatkfcspKvCG9QEZu0mhAIhAMN5nRaTlcDY5BBjZptrEKpgKstg71GxwbG/G1SUczDK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+IzCRA9TVsSAnZWagAAeA4P/RNH/pjXbL2SOZ24u7jO\nPlyBBqwDJrER1qpmAIl8VotqjIMEOPkf4nJaRL6IWlEMY1Ht7sratelYBM83\ncSwskAuJ8ckdfo2lhavwPnubpZ1FvbV99AFsvHj9oXPEeJm2WynLUw02Cn/7\n2zgvH/e/S3HGjjp0TGClZOn9vQDGgrpnkq6V/887tZJtjlHpwSnRAF+qwYDZ\nCQE2a4JQuqL/B6f8loAypgu4Nyt4mmUfp6VabiA4wQfzple6J3O8XdSBEdiE\nN3Ksdxuyrt4wjg5ZGDtLi/3kfe0oCfUnozA6zrE9XZU2pElj9jzY7qzsyGVL\ngAZ1G5Ta9kqvVv2w2i6y/o38Jw5th+gvDtWxABtlMXfRToZE2oYXNXJVkNhB\n/kOIpxjPuOzM81LWpMZOFPcb2kWqvEAejdqFSwWyrrg//Iakja8kWG9tBbJQ\nhp2EpgGHDtUPAZEj0rWDCV1M4GJW9+7kGhZjgiprfmCsEWzzFU9UR9AytQaf\naAzuFwJEaZxE3eVwrN/cs4EHS2QYu1PbaMwOfWb/CVSS9nH0l48k6UZ0AFOS\n9qfueR8SuIQE2jyWgRMdInqFmc2StqixHQXQigSx86l0b0vp+1U1TWRNcn6p\nlTkkYsqcHTYpfeCIL1kLEOVxH79FkfsQleubwFY3Nps+QVtX68iFksIymRFF\nt7go\r\n=I12N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.197cd065"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.197cd065_1547166259295_0.9368112480114532","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4cdb2f3a":{"name":"primer-forms","version":"2.2.0-alpha.4cdb2f3a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4cdb2f3a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd44a27d99a91c5a1cf9c6f158f5e464b17f3d23","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4cdb2f3a.tgz","fileCount":12,"integrity":"sha512-G6hfuZuDb8S8BJ+UAoC6vZvlSa8GzkvovEu69eeK4lwzbsWbwbRDJqAYJPtl6RJlkYEeH+GPmh2dhatdFG2aLw==","signatures":[{"sig":"MEUCIQCQCYH75q/tem4E7HNHe2EaEr4bA25RRa3yMqrnxsgyrwIgai+pCEWdCBsyMgfS/OeXo+rNVCUIA0WGBYCD8Nyz/vA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+SMCRA9TVsSAnZWagAAKtcP/24HSgVal79XRcFovFGb\nKYx1Jju4M5hkluatG1pZGHNKWLNL5SIkN+YdKJPFmXp54HqdwEfbZukWtKp3\nw9qB0WVOwGS8mQm3VefcTDz0GFBB+bO5ztUIaKClqROVWU/5fm7bKixK9RWd\nAdTJD0Pgnt7IE3o08EZX4OqhYaxd7X7fDw7vGywf2e46csL57krYwnWMZcY4\nMbK3smUPv0H6y94C0rTNWHfE4YykcrQAcklllWzdW09Xpg3n88r5PbEpTXdL\nj/RwhmbTCeLSfredoilE6Sc+AVuaxVOl8t0pQ/uBqpfc7b/PfzgoVhCOrBGk\nNDyR5E+VnFcoq7bvpAiuHtzLymwC9V6FHjEn2DjJBpVP9uAvFoBeLFuaJImO\n4gy9eR9oxv+j4aV9A3gGesghIe65k6fXwHAjA9etyN51lQZj3lCnCE9u8En2\nlVCBnME0kTZfwL+kq45reghwPY1RIgXNxXiphJyiOg5YFJXhqF3HsfuLOClo\nwtjSkKnEaVt5/YMx7ElKIjHhoeoGtTxLoCLlQMy11IRN+Gerp/y+OS9lAsBR\nxjIG2uGlTx2uhJ2W83oavfwvoPC8xW5CzP+cQp9/JmBivhBtTfBtZ3L1DTxY\nAQsrOQLNMWJuEu1nF2jnXOyusdbNrOJqAyMCZ++9hl4hy5OW6qYxbVByEsgi\nMQkW\r\n=c06u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4cdb2f3a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4cdb2f3a_1547166859604_0.41588704141351207","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5d2d2289":{"name":"primer-forms","version":"2.2.0-alpha.5d2d2289","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5d2d2289","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cd910889c0cfebab5bc5a44696066b98c821c117","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5d2d2289.tgz","fileCount":12,"integrity":"sha512-VfL4tKe6/VQo74aXY4K/aLCg6TxrpuZ79mL9jPmwtLm9oIKYavZu8LN6swy1NEzy9Mu6y3hplWvkMIu3gKwGFA==","signatures":[{"sig":"MEQCIBHCT/ryuJMq/VyH1Ji+vNmNGXJcRpsQJEd+IyS9jeInAiBYuD0Ojccm2uVuac3HL1/Hy/5uhKFvkihEpNOd5ZasmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+SeCRA9TVsSAnZWagAAlF0P+QFX1j9kt0VW04EZJLRh\n0TtzqtBF9iNkEMpaz0Q3ZIVoceow6Ol8Qr2QwNH78mEp6qk5sK27WFnJV7Tt\njgeGocqVULZxs+x7WALAfSV7IlbyXEG7FBKxjfxdDNbu1yV9I0Y2cDvlGVf/\n6OdIr61/leB1ZYFq8kyxoDLctkSo1aETWUO9TJmovC7CkQ+njq5syrs+d4mu\n7laMg5/XdJlUx7wfr+V1yPkaJC5MM0J5wSFws+7yTJ8zWkRmCtDPyC2Gj3uH\nUQYO9dzcNxOqjmZFv8VIpOkBNF/QzYjQXD0lEjdv3Gad5O8TQl1muJul6Czd\nyJmx7NpaSZ+60awZf5OAziehiwFjsQag3afZ43FbnbttxU/xIvnQ3ovVphdy\n8a61KLApX5IDnVEo7YZyL8yvVhuy8sjioRgw/2X6wvj5FjvAzkwsFEksUe23\nvy5h8O4/6cwz+snChqXk0JdLFvDGrpqn7490gLEChICmzWvuhNIxILNcDowF\ntiLaBQwUQ8OGDvqzDPRlQdioC93anl8m9A8q+0y1z8/8SEKYOC3svHgcg1kW\nRLB5NjHaFwsp3dQB85I9jBD6n7OOeG0onIeaVPoDhSYopZqie+V9k8jXAu5x\n3oIBX4jCloKJqWsQMwnw+L6DKuPPbRYJZEk0zgaP4v5VmaRk28KMNql1H/7Z\net9E\r\n=ibyU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5d2d2289"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5d2d2289_1547166878130_0.9962211167406043","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1811653a":{"name":"primer-forms","version":"2.2.0-alpha.1811653a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1811653a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2b3580ce35c58051771f720ca3842a00b8f3cf10","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1811653a.tgz","fileCount":12,"integrity":"sha512-PTV+UV5Ez8JswLv+hk71ddOlgTGtsIk7BVy5EAkTYdVgA8R78hyxFeBBr3n0QK+6yoGjHruwJuII8EjmdrLZ9g==","signatures":[{"sig":"MEUCIQDyOuuFzrueUm6Cm7GpmcdvIWhVSFp2f9ubRKHN1TybwgIgALjP8siwvTFS97ZWgyUz++rR79nq/rJQLwVcQcET7+A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+ZuCRA9TVsSAnZWagAAMAQQAJaJabIVQGoxVcwTp6Ze\nXtMzLm/JU27CQwNNlrl2QMDVp6rOKXoRN4dQejxlZmmNOWkpm+3c4jSmCz3b\nGrk0lUXtfDy/pyxy5S9EEssiN0KJEjweaeDu0bj9tw1VbxAYxQexLoDzJYIG\ntBno94dgAJqbTVbCnSflv+eNrxEyc9UWJAQTxddqyzwLEBaETwwmx4Chbtql\ngu1am4zE9XbOowx/0dZBhbHYzBOnQ7AKpH92vV0vn+1VznrYTYTiTutJ+pk+\nIA1+BbJ02wtiF2covRpTxkk8WodKUCz547wG83yT/So+h67gJfQ2ybtF6Lih\nPvPjPLerDsooNT9iIA+n5sYAvvQNsD2mtov6sP+Bm3GZF7uSLfXOFYL2vv/2\niQAtsD/jXpw868+38HrOCeZJ9tg58n1/lA3SjjlxW0sZZceyg6NmdcWHBXNr\nENMrrOj89f9eM2KhisPW3wLNKJB0h1B4mWNkixVnhEUkn6oLQdhhmQybFLth\nGm3N2ma3AyDjaW4BtqhpCxh5E6I2OcwJX6EgxAgVpPQX7HmA2QXpXJbxAHwK\nGx49jNBz92A9zipddAKfeVZJw+yohRUpcQUt47Mlw/0jCU93kuyJhQW5v2iT\nQjay+YHb6SUJGmlclwgQqmbH4BOMQnd0/FE2mHK/Jm9A+qp8DR01ZtCeU1cj\nbCGz\r\n=edKT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1811653a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1811653a_1547167342129_0.29574654639437425","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ec171b46":{"name":"primer-forms","version":"2.2.0-alpha.ec171b46","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ec171b46","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8db981766974a7f245e122d7775ccef725d7ad90","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ec171b46.tgz","fileCount":12,"integrity":"sha512-xREH8Pg3LRZ54OdlJhxMc8qPJHkrpaBclv/R9oxcgNxfwzW0Ka0KW8xDhlyj4VzdqtD917Qqb4VShajyaSxBng==","signatures":[{"sig":"MEYCIQDbBFlbF8xZWwTqvqI6f6UfyedHRHKBhcSNREgiE5m8DwIhAOelX7H7ue6yqfQeDNRZx/UI6Feys3MUs/V+5yg2IapP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN+gnCRA9TVsSAnZWagAAU8UQAJDPJwezrN85wnzo1bST\n7nJIfD1yxk9XFYlNB8SA0Xvp5JWttuqSBjerhcktuVIszIJh1dnj3UyKP6MZ\ndGvehSjNFci06DG/+eiA4Z1nsJ2IKpWrI5bwHurfAfQtEv2x7Bje0weLK2fN\nkb5xURy16OCpdKIzKANGKVJqxAgpkFJx3dvvvM9CmK2xmhBbtfcrR4C50Vkq\nGq1rwtlUmwXRal/QP5UpvnI8AFyi2df2SSjU6u61LCTJf+eMuIVDDvA3R0eu\n5FxYQgL+igtt14ii9MV2WzEPqp2Pjf8htOLxwTIEgDCE/PnRffjbOLLoun86\niVIfAX2/m/LWoZTHU6er1hCq71dJTG2JyIY6vCAigc1u+DDnRc2dM723KkRy\ntg3sWuNbcAI63uE3gSq3kU3Hp8ZEL4DhABwpvI577vTsLE37beDRPAeFXcmA\nJ4MoWYcUYosN3IXWXTbLCCfen9BYez0JzDsuxpUCGjHLQnLxBgV9lZS0II5b\n2Y6TnONwMEqGU98RY+oLC/1zIWev7yJVuK5lJuNJbdZPmyF2Q9pVSQTavDZl\niaWV9rDqlHF10bsQYV436TxtfmNNKusTNyCqxCTa/q5bpCj3OhXpzmqtUulX\ndDA0MRY60HXwZDPxdmBSgl7YHmb86Po6kGUo/w3gn6C7v2Jw5Y+LFJ/rkRhW\nM4dJ\r\n=0VIw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](../buttons/#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ec171b46"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ec171b46_1547167783123_0.34459782012117124","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4f621c26":{"name":"primer-forms","version":"2.2.0-alpha.4f621c26","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4f621c26","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"864cb7244fe4487e4935f9d48ce86414e81afd65","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4f621c26.tgz","fileCount":12,"integrity":"sha512-TovBtWVKapO/Ya7ZguFeI/y3Bg4irHHPDzT8qr2/XvX5bkaH9bffxeMzGhWiojRdHTAgiNLOoZSjnzMoBvU6YQ==","signatures":[{"sig":"MEUCIQC9Rigr2tbxBoEUxiFX/1poX6X4IuIEGXkTqX0d8U9iNgIgCmlc4l/sMHaPdKYvHvyNicXyOKeDnbIUGx3nvcK80v0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON6nCRA9TVsSAnZWagAAJB8P/24/TkNHsDxOMDTnm4ow\nKa8RgJiFS4kZENOV4y3E2v/51qrHBmUj62/6nKlAb+/z0CiX9Hxq7xK/232w\n1NaYHnkMU+0dggV4fTBz+5SDCbE77LbyqNiQkq8yDX4MNZGqginitTHCVems\nc0Cn/rTm6wC0KqOdCudaPigBK0TBWw1t+bYoiWpfPlXMexxHeawwvBd942zZ\nWLc+wvKSAQYrOewCFt0RWSLZbqObvH25/dItqAR0+ipSFGjmY34FddMeowPB\nYaHHzOwgh5ckACW3g3Fx6q5vkUPBlho8I3eEjL/nWUobv31qSoYE/GJQYaH4\nrjb9OKrwUZvPIxZUMzupuQA1FZJr+Txaq64EPeFNhLbAuJlcUTzJ6NM6dK3I\ni44Nra2m2oZ7tv2hq0R6T2bDd4HNgbyjY1n5VrnJrYTV9Y7U/C5UMxQf0omj\nM1J22u4ng9aLC1WProbai7wqHUOLgs0Nj61rJ0AQwmHwaHFqboDuweixUqNa\n51BW/IGC5vK2xj4kn2z/arm6H7EjwceXJM4M0UgAO78qXzMTFzRt3xq4q3U4\n4rTGF9hvh7UJhLDFTEh/05VtN0ZqbUknYesJxK9ZjK2gQym5MyuTlc8tW0ID\nfN+0dQfyDIdU3IwA06Qvf4NyfxFQPmzx7pPACfG7LCyGiGT2cB6earNgTB1e\nyTlE\r\n=Owi9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4f621c26"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4f621c26_1547230886134_0.43963966218155703","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c71b51f1":{"name":"primer-forms","version":"2.2.0-alpha.c71b51f1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c71b51f1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c1169a7c253ae6a3a3c15a9bc7edb4123ce9b7b7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c71b51f1.tgz","fileCount":12,"integrity":"sha512-rCHNy/4d8x8Qz/jUb3nr2hsK2wKxyYbnm+dDtFZieDq2ORYjag48CkOmUG1Z3iPC5QmrfiFgy1R1RkgeyZVe4Q==","signatures":[{"sig":"MEUCIQCoVIqFPObV0g4mrPHaEThs3CVSKrifmIeIPjPQBLPXnAIgUe/eFPJymsVKgGCb+Vi+paNbXlrYjoQEta47dQp4UE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON8GCRA9TVsSAnZWagAATokP/0WLoW67JiI0168Zml4K\nAPmIKbFuPQGFUvnTqSfLhIfmYQob5AoYBFULvQ1cHsiyISL3JjJESMc8p8UV\nLKOjAhb8ak2bhRyBujptLzmccgcwbmrivSNIyOf4Pum9ogGS/jMTSpOo3IxG\nqzcSuyC5mGZbjZC3E5dSfWjDQI/DHwWOzhJM2U3zcGICKw7DHZbgPRlKsGYt\nIJS4rI1NYoXEuvbgeu2jUDIVGcPHCdWZ7BjOFLIAnC+lmeyH4iNfnMUPT3tS\nRaxqu2qubyKtBr4mme6Qw7PTZRxhgkWNPyJAL7c7JakeGOTnYLzAAGDoZ0hx\n7fjRNCZc8E0Swa3DAI1IdmUp7DDo9nYpOwDsSefqeNvSR0+MkuPbnQJ/xqSJ\nuoBbaiLPGNR+iuZPEJUmfk3yupjov7ieNUQf4yU4WD0MzcQUbqzMxSupLaDk\naaCiph6BHN4gSw9+DspvfNIUyXCXroIXgk7eR0WZKz77owwmT2GlhAh6qV14\ngl8RTXGdRVfzRrN2JF19tdvuKpHpyJ6NwH5nDfDSqKBbsZoxv9dydPqO9WGh\nMlptVbOtBxGJQDpCVbmY0R2A2uO5VgsPXGln3XngzlSafTsegviAthUaD+/W\nxz7cfx3sv3WQqOvikClcyJOS5N3eDNzI5dp/nvzdxmimtAZAGx7+cb45MmGq\nNMEy\r\n=+VKU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c71b51f1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c71b51f1_1547230981978_0.0826902822830089","host":"s3://npm-registry-packages"}},"2.2.0-alpha.141d2d88":{"name":"primer-forms","version":"2.2.0-alpha.141d2d88","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.141d2d88","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c1869e2a34842172c29447d3c1e832867c7c1d6d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.141d2d88.tgz","fileCount":12,"integrity":"sha512-kCfioPBiGj2VWeQHetBrf9AlufjZL44B1uO1w2YcVhN/oiZvXEzByytz2ovLft7eE1JTFdJn3A53pfHQWNvd0g==","signatures":[{"sig":"MEUCIHsVaHe9Ob1GRFITHaohhoLFkStt4dieyGjXcthXVzauAiEAgxA9BA3Q8YbIGkru5nSqA0Y1NiiY/GzrweEsZTP4aQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcON8vCRA9TVsSAnZWagAAjvcQAIYjJ2dVtlRBO6G8lvKd\nOylsGpTp/q6He3FlpoVjnIOh6dRAilHxRwZ3IxQatauMIK/T4eoUNqXsERXD\nggfhK5zToB+XTWXZH7obnZkF+PygZYOwRnAM0q/4gq3Xt/vH1S0PJftwzGgt\ni70k5xCjmgyfdbkGJI+sN6R2CxC20ZFQkKekpUm5rq7R+F/bveQeZBlaeBIA\nhuFoCrpjewAzMVvlRF5vFdoojQgo21BKNAZ6Gx9gB0zKGE06tq8Yb1v3TA53\nkfqj/wKr3s9Bi2fFsw43bJT/5iI4ODMqTzUB2f1e4MdkG5XhhANjgfzxSAi+\nlrcX8bHPRmMdPLdMFTWqH6pF1XGWEG1qr5uSNG/Kpxy0K8JcFoDDKCdmAFWy\ne4qEZc52m+5acq+C/0k8mW7XWj+xgRU9YcK6T1KSUyDfBRZs/T8QSXAiPYpf\nkGsfOYAwycTZRKl02xmZcAIHN31zkuW2Ze79/7AiPpWpACURKXTCE+cXFCF5\njCzak4IimqZ/ScAjMBfWf0GkCJqlFx7dvsnTplBQfIyYuWSXaLLBQwbYgHCw\nmGcsOIPhqSTj6ZU1/ON6EKyRMtrNveMSSR4dObdpuBpo5NurHUK7UnrUeVR9\nVmJe1DA7cECFXHvGV6sB6jWqy0o0Z6bQBO6tGn5/YSU3irliWkPmeL7jp2vI\n3qnh\r\n=BIoy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.141d2d88"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.141d2d88_1547231022650_0.4071965509974751","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5eefc7cd":{"name":"primer-forms","version":"2.2.0-alpha.5eefc7cd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5eefc7cd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c631949a9eeb42a444ae6af5f7efc473ad9bfcd3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5eefc7cd.tgz","fileCount":12,"integrity":"sha512-tOsMhCoJGcnDo3pbXpATZa4Fj74cjmgH5c747PR97ull5y1QAGvZyR2QaEei3cXkFzaUuNXoR0DJTM+pnraC4w==","signatures":[{"sig":"MEUCIQDlnDvJX4bI8Ri6N1wv77yepmPdy9kptVFbI7My4zNfpwIgCeUl7ExZDAkhdbF2KBgFqAdeGOXUZcVaXz7/6tQS5QI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOOppCRA9TVsSAnZWagAATfAP/jpdhGltM3ksRRofXzAi\n6onkkblGA8YCq87sKBXDZLVAvZtmwhZEFdezgx0DPRrbL69S5mbhIuQ5I/or\nqjdc7bAIYle5AAYASh/CmdW7zHgbvLbvnEUbwOBjmlLBXGoQQY4RHbXW/RC4\ndz2Yq/Pb4oxcnv7J4UDNJwb67+GStpeKT9IDJY97Y+ryYcRYhQmXoGYfmhwo\n0PiDKPHBJoScftY51EGbnD0n34tHAGDg7hV/V8f85qM0/yC/0j9eKYJKxJR2\ni3UO3QZnF/2fUSL4nS4ysbwegHy7TB63e+WCpSS27vCmEnb3e0DpYZ7s8ZyJ\nHm/aLS30Hpi3XGEu1xWKq62ps+eJxIsCndBiQcV6YMIBb+MkaTOuFJaywh8F\nTyD+GBG+mGSQ0bfq2ol4dOPoA218B/lc1YRoEKr2CZJ4DUn8RdflBj81KXc6\nEI746l3nNen2R2E3oc75IT3+V1ctLbUALruIEdaMDce+e5NdsFGtD1Pwgegg\nLNtaQ7D/n2jmWpijGyT2oZd+3DCO2qeGMORcGcOh5JM9FX47agsAr+6AuNc4\nIc/caeuhp0zhFRAlcAhwR90iLXA/75bEEQS/S4VVEvkMHVw5RJfti2u1pRY8\nd0aiAZxdNEN6OvqKrDEsY6S83Vs08kAShJJBjOsPCtpdbHFXu+Vd9YzKikxN\nJ3tY\r\n=Ki07\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5eefc7cd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5eefc7cd_1547233897318_0.7291355507496569","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2d2ba632":{"name":"primer-forms","version":"2.2.0-alpha.2d2ba632","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2d2ba632","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2b8ec9cdb1a0e41389766e15b2170bbb460f1745","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2d2ba632.tgz","fileCount":12,"integrity":"sha512-yE4I6uyH74xcA7m1kNVn5JsdXEvpZF5ip/cSRcYuu+Ykrj/Km7WHHfaRyPasy+7VgRHe7wCOQok4/s8+ttgwVA==","signatures":[{"sig":"MEUCIFow3hMwH3ca1Z9KvJ7BeM6G3IFwq6mmSUhbDgA7P0pNAiEAknPMz9+dVBsCjDy+YuzUHaurnvpQ4So2sVUbHi3n5Vk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOO+wCRA9TVsSAnZWagAA5LcP/ivN/MUaP9ImLEQ4H92E\ntY4odXkHRjD+7XE3um4eTRaNUHWcyQZhExgD4gkhTce2xO1yZIIY5m65OZoa\nH6yaxkrhdjWGyDzcZQcUy1k9qlta5SD1SZSEyN6IwVASpwLcwzO2OVoyYU/T\n4yhSR4G8C4eyb1BFbfpORT1A4EB07N9Bj241vzV77onpGBUXy7qX+uE0WyM6\n7gzWrkKcpVPvKlnOYUMawrrba+j8DTJas/LJqugUv9Mh1/ELmZXpJqTRbGxo\n4xyrxYtMbZv/YnMICGXN2ifTB5PlxnCMdWP7mHMwWYy3MeeA+/4mRDwLU2er\nFy7dtUoQ297lOFF9Ge/BzlBEAWy6oMOcmsvwE8dwc7L1vXMdNft65FOOLCsA\nrdjabHtfDuIdx9HlunXjcfcc9dsTExSDBZldVoledRBLO0AVwrIg1eUjt/fY\nLe1HrLBvxNRfijscJSHWxVRia3DxoDbz/E3uxR1+gWBNu+3k4TOEIK9ElTCj\nX1MEQdLPLSnIlQEEX+s+9Zi7iaJdnLjmL2G0t4tacwJhi4pOhDKXm/oivtKJ\nWxRJx7p+JuBqn+2GMDspbERS6cKVa35ZNYJ58yZt3Wq7eqRiWKkpkJIjNecf\nmPknpns0wp8JBsBeDKuI6ZPQL5oK3yBvsJ8cno5tzdxBu0ExMrMiUKLx3wgB\nTPBd\r\n=CGfP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2d2ba632"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2d2ba632_1547235247963_0.6748549875637884","host":"s3://npm-registry-packages"}},"2.2.0-alpha.cf5e649c":{"name":"primer-forms","version":"2.2.0-alpha.cf5e649c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.cf5e649c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"67880a619c4b535d5131904ed2ead6e989eef159","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.cf5e649c.tgz","fileCount":12,"integrity":"sha512-nWR7Qzelt5febvyLLGjoMYBO2AxIRKjk57oYcdBw6vhGAmg1iFwTuldHG+L51A+UiTenOWso3u9pSi6JNQxRkg==","signatures":[{"sig":"MEUCIQD2B3oeNMxX3b074mcJPC/D5S74ty4Qras1ew0tVrYJ7gIgbTUAFKtlwFK3QQ9fmkCPSb+GC+fvv+dJQgWj/XzD1nY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOPHRCRA9TVsSAnZWagAAsfYQAIpQ2grIakSe2NvFPHsD\n9KcZVV9MUC5JTRv7LO6POKn4+c6F2J24CZMVxV52tTienHFea8+/dBadYuu0\n0ska/0l0NPxXq961Bipp7XZ0ueIsJauDJPUIKwJA4DzSJkTPsVaq2a0zEhEO\nr7+2Lm2ooOAB2qd+9BUlt2sjZyUdfr9gdPA2QETe5rDteeAU1M0yXpZyTwbd\nnWJuczHeVoWjrUaTgzsJX9yLsD0zop1uydTr1FA8KahD2kFANopS6g0plmRS\ncXans8hxZ0PqeFKsTjlI47bM/nDP2ASdC3mdavCSaJHi8iKouhzgSd0Drb3/\nj66i58IOwZ37QkhA1kTdRYhZPV0BP0pXwfO2fxljJDX3UvH0AfFsjiA+qeFc\nsiuEvLb+VpVWI5QBxp/D9IKy48AQw2Cc1tlvLCX9M35OYxVUK0w9HFrdXxb/\n4o8Ce3jZ2vSg6p1kpyFDMY4GYjq3Ob0qrTPcG4S6cDhy7QhR1x5FjJSbAxZf\nPYUsRy1nTMab7Aby+25FW8GnWvNjQpjYkST2xSdJ44sUN8jjYpZvfumYYPKA\nHHzrCb/yC9549ZePnLwXZa+IOqS3caej+pkuQ9yrgMpo2Li3GumH37QTf1y4\nvS5uqx4vxQMwEuSIqDhFYSzt2jHiPsA7oM5/SEFh2hCG+Z4IB+sPKaMV51mF\ndjqT\r\n=Z7F2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.cf5e649c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.cf5e649c_1547235793024_0.9213903787983144","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c098d806":{"name":"primer-forms","version":"2.2.0-alpha.c098d806","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c098d806","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fd97af900986858b63040ec271875b2207af8234","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c098d806.tgz","fileCount":12,"integrity":"sha512-T9SNUGB5zIPHMJ7sL1dtGH05Uq3ojMoyuU45PWSotI+yd+NRm1A7X5HFMISBhFEszPDva6vJwv6XK3OhPJZ0CQ==","signatures":[{"sig":"MEUCIQC2hG7q62TIIOBUS0viNOuiirmNOc9TrjxJ995b0iRG/wIgK/jaPtlU+jyysYb5cLPk6kvb8Nyttzh6K2T06nhh/kM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOPbECRA9TVsSAnZWagAA2UUP/3pFpz60rU0RR9/vGItE\nbJYURYCr/O9wyQtcoWQ2c/Mt8oeH5cf7p2KBBiODjlTRSRosWHUwy6yUkMV7\nn015sey7QhGuimXKkuBsaZPFq0UYz3J2Q6EIQ5W6zmm1ipPkxd5hMN6xvD7m\n/G2RuBHsY5qAReuw0D1324s+Lvorq7VsiU9cMKw68b11UxzuxpLlGywSdI+O\nmiGUymjf49gr4ZRwwBP2JkpA5hQcicF4kkxvwqqahEOj0Of/rfqfhOQwlL1O\nBFjkHVhkQOCW5T1wBKq46N4rTDBiHS5nE01FlrvPjA4IN455ENQWYdlapTz9\nca2a0itsgNMWF7pgSd8j3IbaXgGly3UV2gbmXOCg8RhP95wfGHHekVQ31bB4\nAlajrw4tm3vcRSY2vt4P7u0ZFZhDEnSXxEi61I1ky5TDnJihPI+0GvMvFAue\ngHpWqnFAUpR7ARcYhS0yqTHgiw/SNonFj1fbHNPYHbPWazd4QdRW+s6+3yaa\n/kBZVvSjXWcdmIWfv+Z2WIHhkbezEg0GLQ688lyBOEA+JPJ4FOjJuarNTTmu\nyjLwRIypcRSvVpcf7THNJDZV6w8S3r/HRPm/umPoUiraNN/vS5/MhXLj3d5Z\nfF48ynYxmjtS6OAmW1s9cr92Ri6b62F1qMNL4vhRHI/coKVVVz/BhFqHYfJu\nS3Hc\r\n=XlgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c098d806"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c098d806_1547237059319_0.5477214167753581","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8212a1d1":{"name":"primer-forms","version":"2.2.0-alpha.8212a1d1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8212a1d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"94f907a2ec9f562a63b1185e509d0227f98196f6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8212a1d1.tgz","fileCount":12,"integrity":"sha512-CspYxbF53Cwet/U0z15k5MdvzkuDVQ8iXIqtlz3EQHAjOsNu1KomHqzbxmTpzutvcXD6ZSZ98+C8Xi4YZe6BDg==","signatures":[{"sig":"MEUCIE/waMy69hox1g5mCgP/vabZgPK8RDppQRpoXuiRecGOAiEA00K5yTmMgp9ZGyilW50qRdmPcO1fFC+ry6K/yB6SyOA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87743,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORl+CRA9TVsSAnZWagAA9ToQAIBCt/EKKglCJHizvoem\n6IM+rYGSnUr8D8NbhlhKC1dW4g0XNlVqmFpLMbQP7gF1jOUVVJRWq/x3nJxk\nYk0zl5GylwG6+uKX7BH88j7durUI6pd28VbuYY0Bq7naA64KN3h+vCSt3LB/\nCFjUwz6l/pxlyPPS1c6oeDSL9m2iG/IQE1t3OuyQxq725GJsqfWb3eQyeF9X\nWdG4qruiVHjHNdgNt+nVrWx9L1jkRJ+VTa8GOpyS2mCnNMQREn2xC2KRCI5B\nC4KJrrYi9UVucG2stil6/Xe225wP+2Bw3wgjoSlr0k90xMY1t8Z2A31RmZiu\nvIoTr+C49bq4QHr3E+YNvGr4iA6E1FwMSAu0bW0m/h1P6l+ON4XPE7J8J2Nt\nRaidfM5H7dEvYFDmDBzs2l0auXhxguoyKg+NPy+NWntNXqBTaZL4p7lOSj7l\nzHml7JnAwDcBl7o0xGzbNcO1JFYjR6eVL02T0yQZ27cuzQdbZKqkqiu3MnmN\ndeJjtpXkqxsyMVPjTHj7Zy9PgS6/coJ2EJbSsVHlQV/i5HPXF/Q/cr+Yk5Xj\nw8+XiK23Tm2owB1RA6Q5+WALK8AH7mz1PUjfVfy+ZxgNUk/OrRY3HGt5Clfq\nTNrpNmxbMzJj10jeW6s/qSEzG7y3LSz3ZSSKYyQleB5LWqwiCBt+YYIETCFq\n5klZ\r\n=5KJ5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```html\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8212a1d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8212a1d1_1547245949403_0.24283185193753898","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2d744d75":{"name":"primer-forms","version":"2.2.0-alpha.2d744d75","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2d744d75","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a136d577ad079b1fb457bc65755fd4ce936cd325","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2d744d75.tgz","fileCount":12,"integrity":"sha512-axbxHfKl7qS6l2vMsMmaeKphZIiGANCMTiw5i+CwUlnEHE/NoYq34NhQI+h+RW/YAmYvNP5+3qs2xkqzPEItcg==","signatures":[{"sig":"MEYCIQCzkNePrba+SX6ub307er7m9ywCVHpSnaueRZWEWD9t/AIhAM1+s8QagRtRy6ffu3hRBPZ8p1EtZ+5UFd55QGgvYigS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORmvCRA9TVsSAnZWagAAJj0P+weoxye0MTxQePdupOgI\nXlVpWJ9/+86a/sNgwbeety2qusw/e3oETVSolZHKuR3FbzWI0EQBCfblFITa\np0TcaELKU1dIg8rYqlWO5s8C0/SpJy89mrBxuNigoefvHrLWtLingIBZPCrl\nDvluF1LHSJ2OOYcbt7AyYZMs/H1yV9SbFKclkdGMGQ6FsbYJHbmeQyExBThi\niCI1xbuWvlgQgCuY3TLshZjJr8atU/YSe/PZmLHrwo6mkq1dhoQeVQDHR4zD\nttZGav9yGsuB6Tmg+H+bb+bu2shnOXnUCH1wPCsdOIdL7LYInSboAoqtc+cs\npXpIcTVnK4YJfTVbrDfr038PvgwWlS6oMzCzjpEK6P/OtpOxInr6PYvqegJ4\nXnCWDGemZyW1A+TwuX98zA1L23YKEgfmffsolqNPu859Jik1JVgjRB5FrLiA\nUUGf09s4fj/i5ATXW9/HOHjKlsKlJoLvxt0ADvbFXm2dCV/0uC5ButeDUisp\njlkjWVq0Vntu/zWtHKI29BORR+scA9tBGdv19E3Y/lU6jPBWd+kHXcDaYGmf\ncuPSnQbPi2e6AQKL7LMXFM/NGaz2Kjb08zha3FMC4iIHkUznxnCWFFzyIp3t\nACKVJlS+DS50dYZBIUAMU7Wr+f+qlOZU/EpHcDSvhZBBCMueaba1Vs1cxC6P\n/nSt\r\n=A/cx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2d744d75"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2d744d75_1547245998612_0.20757080892614033","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7c2e8750":{"name":"primer-forms","version":"2.2.0-alpha.7c2e8750","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7c2e8750","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6f630a926f4fd830c58e5f36e1fab8bcc2368a48","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7c2e8750.tgz","fileCount":12,"integrity":"sha512-GtYmqkhNGJffWlBOy9I/KzZMPXyFokPOSPGDiiAxjkHd8EX0HmMeunipZEZuO+Zxsq1OEZ82w+xxUsUDbPoijw==","signatures":[{"sig":"MEYCIQCHDg8gnYovR1ii9My6E5HjMvHgqGWPRlBmIC8Z7PJr9gIhAP/SQiAsl8yNsPAZ2v2wVudd0UzMPhlix3nkOoMWdX39","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcORsgCRA9TVsSAnZWagAAijwP/1MBxO5545aI7s8/FGaD\nMdPcFw6KD0w3mmUgWnxNBU+y8190+3krRp8utCvXD1O81xBOZVK6/7IrAGWX\nxIo/YG0lRfHIxl6VGPRLq/kr7SPM3UGZbMGtq5M6QnN7t56PwzkIr8ytp2Yj\n2AuQ6Vhk2JRTZ+SVrh2r3ybtFA7ZkyWpEZBPuHGhV5YDjHQr8DGFvXpbhNA5\n2ohCLlzo73Ri/PgSad8D9wM8TX1+ZGuCRKTsj3RlqI4xi+S1ekwdEsDWGaZX\ncQ6XKTuED/bKC/tGol9eC4qYSP8tD7DARgrPf6c7DVyySIEllNqF+VkH5I60\nGGlhFi/mhP/PujVNeCDPVxIeYBlN0IgR6UNd8ceeAIs1PgzrvxdeqC3FPAVz\n0haOh904Sr3kW2Q6KE4ZoWyQz8DUzE2v8UgTuT9FD+lV+KYeHFRdg9KfY+U9\nAajgjUc0MWb6idYx22EkdBYnK18hjDk5+AP8blkMvsWn4cZOPLqdn5mDmhX3\nV9yYDq7xXWueTeCIDuhhz7VrpaNoXO7cJ/f5ugvE71HuUn13Jofzg54gDtv8\n1PIlkpdI/lPemgZQbhJtIVglTHDvUJ2+3gwDwVRYEauOdym89bonG3YONz5H\nehhRkQY66ijJmz49KA1ueI0WDMqMl3WQLFqIzWFb0ZBV+HE1HSNiCENJCjvI\ni8aX\r\n=2d4b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7c2e8750"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7c2e8750_1547246367432_0.26953015060451113","host":"s3://npm-registry-packages"}},"2.2.0-alpha.14293137":{"name":"primer-forms","version":"2.2.0-alpha.14293137","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.14293137","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"34716f1cb4536042ea9a57050f572f7861047f26","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.14293137.tgz","fileCount":12,"integrity":"sha512-LP4jDDP0y10TkK3Q2qUmPGFwbu8lCiTo9w3XLr7kjRGnCrtWirRc2nt3ep9LCen8YFSaMCD1+I6T454PX5sAaw==","signatures":[{"sig":"MEUCIDGYTk5jIMWXD7asKQkaWyPJ9PhV3dMcCvZ54mPvoR9xAiEAyndMrcpi380TVlrUAutTOzVIGBw1m6jnJGNafi2UIxU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOR7lCRA9TVsSAnZWagAAz/0QAKDzM0YGxvnKQ7R2AZrf\nK4JUX8vWmJiJaatXbIfqI+CVFQpeKnXPBKtL1AtuBQ9kodJo45KqbG5RoaXN\nLgtD8WbTdPDMx1VUB58HeEgB61dNh/OQwYcpWMf6JvsCR+glIoqP8m1cz2bg\nncPA2/wgT7HxrmdQ4j6Yn75M/pebI17o/llgI0NcEjWuMzDGU5p9M5fBu3EH\ne3Efqj8kHrSeanDHgKWiuaxQGvjMQAJHeBGK4UM1qSJiu40wIX5LsqspYOuR\nvUB971c4EFRoBH2e/PgCd1CbTYi+RjjouI4cwaA5a1iJ1+ML2GRz15hLwwP7\nb170AGTYQK7jIfdY0v49XFQa5+d8XURmg57PajXNUk+1qaVVqXSnBfTLe4aS\n8Z5b/Xz7zyVvLf+mbHkcdo8xqXs0iRLyWdThgqkA1sBw8YOaUFejnnnpJKZk\nSQD67c9/7Te7V+VI+ic/udkLXp0Exyx7648MSyTNQHYMa3HqLfm3DSZ9vspl\nwuwCIhGbcMaaWAFNOxwx547K9KOhALnEsTD01YghQvChD7OXAeEvunhoVdyL\ndznGepuZnj9NcDxgPI+B3PzRi89ctuF82AaQ4/P3DnILY3qsw9FDoDLQwpGQ\nsdXA7mRyAeBw6Dkq6NVQWlTwOXtAC/BvMmEGc2l7wdv1QvubEVKGRsdv8BlS\njPS8\r\n=i2nr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.14293137"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.14293137_1547247333160_0.8074508458826932","host":"s3://npm-registry-packages"}},"2.1.8":{"name":"primer-forms","version":"2.1.8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.1.8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6bc9f0bb3e58e2df36c23b0ae894584c0aac27da","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.1.8.tgz","fileCount":12,"integrity":"sha512-bAobB7DUWphIjdcXfPD6CPWwvWBp5hbH65seO0OT+KkYbCLrDZCeFxLfRs9u1LyYN07DJR/vf4k8wom0Bksr4A==","signatures":[{"sig":"MEUCIAz9krjZoOtpubLgvlstSfcV2ZE0d7apZWgZgQDS87fdAiEAz/2fZthUBaMjU3tg4XKG0ve8RzzPapaA6AlWT41biYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOSG0CRA9TVsSAnZWagAAjfoP/R+6rChjjyDNmeWH0/rH\nRBQS6M3Ek7j6EjnOlTnmNs/Egnc21WOmcOkp7hqTVXnD7DefLTV9ezb2Cbum\nIpL882kSq4FwKP395PNhoi/G1XCQbYvcd9J3ue6TAL0oCWXGIJhpbHKokRIg\nCpqB9T24ABlUsPA6wr8k0aSjdNfEGSdscmBGxPM3xAN199y899RwEZPN5kO3\nrj1c2joOLpgzs9EC+hhlKgW2Nhf07tnObVCQk7ayp3javl5aG5Esv0Lgq76W\n0dI83cGhJajsLXYhaF2h2r5S0SdvdxgBZxQZKLdJZNtQqCeOhmLRcXsZjnNf\nWSCERmX+AlCwoVFBhJDFNOsE/8S/h+3lYwsuL9+86/635euW5rgXsol+F4pg\n/NV8w+5Hk14eAckHW5mmTmLsLNR8LSrzoVGOO4AMblZOFsz4NGfzvXjUGZeg\nACdLX/PZNkPOE88Y8yueu8g4S5gU5W0gGdUyCHuS1Spf60b47DFWosA48Krj\n+t6HBMoj7Gfxj2Mx5s0u72h0txo+NhIbcpA8CRoAGTg64N5s/a4ZolHS9pVQ\n8Eh9ADEb6gmmt3qWKWL/jmYzODwPNGPyS0v865F9oSoEPC/klQrLe8u4kL/D\n2uYsLPve4IzEd0ICA32WACIZs9E1rjaO8CZakpeKxkbQWDtnG8mwPz+TKBH5\nL8y4\r\n=3aYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.7.2"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.1.8_1547248052101_0.7601429899712284","host":"s3://npm-registry-packages"}},"2.2.0-alpha.79e1959c":{"name":"primer-forms","version":"2.2.0-alpha.79e1959c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.79e1959c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"500b22f4970059553dff4c36003ce66ded9feb8d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.79e1959c.tgz","fileCount":12,"integrity":"sha512-aXiFMXVcisYkKfja7Wn7yqc4D9Rwb8dGt0PdPy5HruIeWT2X1e58E1Q3m9gaitDGA3/kAAEysXUydsYYa7Aj0w==","signatures":[{"sig":"MEUCIQDSDDYHrZxGycIz9epZElCaHci+LjOno0vA8bk3lkUJfwIgfFRlISd66kOkCCljKngBlKuARL7G3mIJ3dpeBdQDKSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOSRQCRA9TVsSAnZWagAAqXUP/RN4pYUXH1JbGiNJBhHp\nTb1K9BxDm1AtgcywnmshS2h33+3iV8oBzcxWKaUPVt9vNaHiBhQ+v+C/hp+p\neeDlqBIhUYwKPjrkBCnrjYZkfiEqdjzMD+Bz30FWOr5V8EZwgS0SOMnPpafJ\nttYcnhx2H5jz7IQNuXU+qhlvENnz2H3suvQzHswjlVJwerRwxb3TWJB6A53S\nXofDjq7VFJdy/T+QprrYVGieOC82AyySTikacu86u61FCPBSHM3hyxAtm1rY\nGJA93zfKULpw/kwbnqLEfS+LYDfSHLqKBsOx1Ib9YBFQIPC1r4pVXPlxuHKI\n0t3FsaVIYnR+NaRfeWF3jmzTWHV6CTj5xFqQZpivuQpseEbpsFVIU68nY7Qo\neqNedfBlSOTC6LVfvP4FA8EwvdFmQuUQWpeKwbd0L81v4rteqSoHsTIazTB9\n6pHz0zVxxaqwVq7ps1SL4CQ9w1tVZtn7ZrDN3rB9smxTrQEgF05E6v0AXdC8\nZEXczZrljJaWodESQsF80n6+W5A41wcv00/P/R1se7mbiAyE6veMVcHO2ZI3\n3Vj+5szzI9GZtAvtdsMR3F9KNB2JvVn+JDb+hY8WDHrVJNzYeTAMoNHmjb+S\n6/VbjHD6m1/xdCuErc24kb5OVUCwU1+2rE9AO/tJoM3qGIzENE5IvdhX5ZKB\nYwUu\r\n=u7bm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.79e1959c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.79e1959c_1547248719641_0.405126848165819","host":"s3://npm-registry-packages"}},"2.2.0-alpha.79aab1d6":{"name":"primer-forms","version":"2.2.0-alpha.79aab1d6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.79aab1d6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"67fd9beec624daf2240e50d440fd4fccabd6bb7a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.79aab1d6.tgz","fileCount":12,"integrity":"sha512-qtu2dA4cPbPmEMs6qZ4hutVGHIB/JjWFZDwpVnbSXU1jU77xvzq/UlOEPW9s+IFb2ZohkODJh5mxSnCqFkp5Ig==","signatures":[{"sig":"MEQCIBUdgmsXccZVey33PaPm5uy1Y6t1rMYj/jlkeA0CQD2TAiBsEYSprMDIaGhvkCNjCfjRkdrmR9chvmd81Dq1MEnNaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPRGACRA9TVsSAnZWagAAV5cQAI/XtGchFR+ElTSrMTMd\nl9dKGBqfXtQGlXrBDKQdpdTwowFvB3UCHGXS8PaUJ5CxEb4okwqDvWHtDpmr\nRJl1fHBHzbTTye9AQ0JnW7uJxh+5EHZbcUZ/TAigsbpPE1ZSG9Y2Xw4Nd/jl\ngrrgvCmDmxbDgoszqVeAG9ADRQezzLMY+js6sAmuVKX1oXRdrFy0//2M6bFl\nWlnnlKp+lQEbHhERC0KQErYfKHHAzjb9ty7d0F6ZSFSHQQtwDczF3V8A+LW/\nmC/YXior787s1MeulI4opOfr2MQ3KcgdZAyto2PERxbAmHvOmbR6DFLcucAh\nQnWv5eaOFk/CQzQMBRWg+DxLKswza+mz5RCHdLEwAeX9crQ/bA/Y+r8uBo+T\nWlTgXuNXmZ3akSJV1blSeAh37Iik4CipaSmq0rsn4d27aElMQ+9b1KnZMnon\nJC9agVqn1j+7IJQVzJ1iLoJW6OdeYqcCNKmc1l5qXGsIFhLTje33geDCrzyd\nTpAVM5osxRukpwcHpBgNF9qrzG4PgQJGKAzzlI8SRAA7Rf7njATK4CvBsI5Q\nXYzk4M08rt6cEe+nukIQc7MCXBiUkyANeW4iDARr2fI7ExqTpRTzgOu7xb29\nMa6ykHKgY8oi2feqLcYVHWPW8U1lF/xc/4SAoDSUJW5ggOHKniXjo2ePJay2\n3b21\r\n=L5kR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.79aab1d6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.79aab1d6_1547506047553_0.8635694528255013","host":"s3://npm-registry-packages"}},"2.2.0-alpha.f2b57801":{"name":"primer-forms","version":"2.2.0-alpha.f2b57801","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.f2b57801","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d4081b902c974c763af0395f124686451d638d31","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.f2b57801.tgz","fileCount":12,"integrity":"sha512-WUYre3iF8Xve0zExtSltPHi4K08trVb+GxuzhOh18W0sFTRYya1RDKlS3lLmPowEnEaLqUp2JUmkJ39C5iYWEg==","signatures":[{"sig":"MEQCICKJdTmRucdhQ/Y8psZKVE2jJshyNJjJCpT4cbPo4IVWAiAuF7u819vRUiDpUIXdb44SOoXQf006a3sz/LBggGhxTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjWlCRA9TVsSAnZWagAAT+8QAJ9huiA5oXqUu6znwulq\nVwyTFX3xwa+9ljBS+sID4atuHD72qE7+++d9x1RcWAhFJoc1MFVvvFwL/8Be\nGeTX1Xwm2IHwkVbP0L07/Vzye+nVXXifBZ7YCpH2pRyLVhSjnvGM60IXFTfX\nz5oJzRXpddmVlp446m7/BU2ISYJotmeszYKSoX4aiitY3gxy25xM85MxvcQj\n75bXg2G+mhbg61bO04tt+r10TFVHZlj7bi9LsoEFnzfd6a4pPSkqxjuiBKc+\nT4JZTWedIJgWNPWskNAjqKllvip6KO9iynSJC8T/8wZ41mDBvznnLcnkM8g8\noOlOwf+kGDpo59pnZs3nkqhqtvmS9jPSJ272zYiLXgpr9GqRQdTIZRK/scFp\nifGzwHRILbC6xKVNseT3XuoGaed94p7LDaY5UEPOChcYqMuXverhOkL2X43M\nDz2r5VBGCtfc0a7Jj2BvvQ707JgJUPP+Npm+F9XAQjJjfHcTfHoHjkeWSdEj\nXUJUXYjz9V59gDp/WQR3ywB/XfBbHpHg2D6+Tp0iSCOtwIyDMILFW5/ty0qt\n0QRy52WUjIQeqdb3IEoZ8VqCybdNXPfkfpnAK0cRCV0I1sjIc8y9vXgRwQoX\nDjCujCw4oq48V+GtVBcbrUHEjEXUJ/Gm5n3UmamY7ydA+Zq/iVGi3d6eP9kf\nv4AD\r\n=6DEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.f2b57801"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.f2b57801_1547580836447_0.11934093370247467","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ca348b59":{"name":"primer-forms","version":"2.2.0-alpha.ca348b59","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ca348b59","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"66cae98ef03f6aa72c58f1bfc7887cfd788e5d3b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ca348b59.tgz","fileCount":12,"integrity":"sha512-Eepb84EMCxjIYc1MWkHnAEvjpcsjY+lko9J8/eH7QXGfGnXdU0p3RrVzMpsmYB3GDTse0PR19BTvGpCu/YnX1Q==","signatures":[{"sig":"MEUCIBv0QDVCUjlizHJR6wrFEncYCfqXBrRle6CsxoZbsD2BAiEA27GEMdhXSgAJcktgpibZwEXfUlAXcgNhOavuYtZDjMc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjenCRA9TVsSAnZWagAAE4AP/i9FBZbWexWXuOu587V0\nG03PTgb26J13cYO7T75YAFXzXasJy5RFhFfXOXqt3JoLiOOQ1AH/dpFfhvAv\n7m68h7+dUqvdMJT6f9Xs4PrM99BsfMN1f1KQAjVS9OPgMlagvfOHHsl8+H2g\nuhxTh9g0tYbAjyNxhgNlyWI1pEsBOYV3d0k79ZfaQMKg9UGjrZV3Jdu6Ha9u\nqXYeLHeiN6P6RhmC27CHkOFhbazouNHx+U+qTQ+BDUvIzVHmgAicBZxr75lk\nbHHPEEvE0Gf78HaZXWP6jye9pFdlx7Lh0CMF+a1SYL9va2rV454qFfUOfXFV\nrgaidv6r6iI/gSDiKjYWE63YZ53vQV1VTECF4a7ilgf8vSYRqfMue8W1rxQJ\nNqB0FvS6rs1Kp37IxSCm8hRSCfxs3Zip0XChjCgIkTFQNsXwZtbd0GXAfPRA\nB0AGz+YzhN0mPWMnmS52zzwIK7nzzUVL+tVRvWVB06+JuqcmA9a1Ek7Sus+o\ntMv/i/HPrp7a/sAXVKQuaQya4NtWmMOzsZifQmHK9g8MCbkog3Pl3VdKH6Tf\nWo07Yf2OWMRaTPcnPD5qIbxvttTCBKyH0WfSQsFVSfJjpqV8ytLqQECHOEbf\nm/JVfrYBhXIEQ28uQUFfwsWeaDmos+Odqtocx9glYcG2J75kQC61mTyTUgdH\nHTtT\r\n=kjK2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ca348b59"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ca348b59_1547581351084_0.8136388327992072","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a5658d30":{"name":"primer-forms","version":"2.2.0-alpha.a5658d30","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a5658d30","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"44b0db8d5623348fb8ff87032b9cd3d2e8ddf7a9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a5658d30.tgz","fileCount":12,"integrity":"sha512-iV5XrWeKs5ICh5GbbESx+92sM92yQfIPgjhifsOxt3QW150TE6NpplwyOK1rTo6a1y5E9EjaVDYhsU108ZVddw==","signatures":[{"sig":"MEYCIQD5EEmQEVDSRRN1+6XlewYALIiNV4ZR2g4DEo0zL+NrkgIhAPvR9ZEIquKlBoxKNYWq8jd+kDEt4WokZMrgaA/Uo2LC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjfUCRA9TVsSAnZWagAArZQP/2uWTMoELjuTHWu6//5b\n75VsZrspTX72qyvZ7lZUjnbXehaW6sJcyvRuanM0DpfqB/SGni38OF5T20oJ\nGMIeY2nqn/pogvgWc9/R2f/++lIjuMVJL8EhKln/Xu0q+VWROoDg0ZykF2Yo\nrHk4aCCq0qFTzmzJ/2OpeXex/BHTqJZU1KspDty18QlSWOS9jI/2rzE3c5YW\npkIRd17X7rt7OA76DCgAls06eqNkfZvvYjvDcG6tarMPsAh48pnPLSXS0xqG\nM5MRzdVMwZQ/MMESRD7pzV0j4DQYqZQXDqN+m6wwIBVYSp/F9cL0kPeg0SeA\n7YuoeuDfCn3T05rqR3GZbUB/esm5vd9AytMxh5Trd8pSf6I2CIOCgM6EXLsU\nn1Rh6DrNIwHEirZiws8IVb/Ee8svWFzVagS84/kNML5W0DMsZaQmL8cdQQFz\nBZqB+0EndqjfMlILfObx7P54s8eR2/RvzFQtiH/SRFH/Hg9Cyi3Fd+brPz7N\nHtNXsP+oR0+n6tduPcRzuoEhOHaeQe6VoEfvNSWiPr6QdOKDOb1WlWrcPS9o\n9HjIHVmScyR+VQuncxyD2udnWIewx5I2y2be5DZHzOffyzKbLhNGbIkquAWc\nZwBhLcgUCehbIMO2zbk3xVuba+IfLodpXFSXp8N6oK957GGCtt1aVunARsTS\nP0Ap\r\n=Dl1m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5658d30"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a5658d30_1547581396224_0.5998433581336642","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7941d537":{"name":"primer-forms","version":"2.2.0-alpha.7941d537","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7941d537","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"90d041645adaf4a3738b850197c010386ba70b01","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7941d537.tgz","fileCount":12,"integrity":"sha512-bQFBmrS14EhFYz0LU3f70LPQ6Rc3KbxdC+a5+Po43OrOz8sd+SXwPejcj88lJhucmGBodyBSAq97ZRCp2EuZyg==","signatures":[{"sig":"MEQCIHRXIgne+kLSVB2f0aqab4eRm5ts9S4yIYGEOkMvxXAiAiA/bxm7ItGbH8LHp0SfKULC1SA/RJjx+2+v/jugFfwmOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPjrUCRA9TVsSAnZWagAA3JAP/050hixk5U91d4u2DR9E\n36YQbm80EwWJLeZZ0QUTiwArl1xenD/BvDMA7XkAS7HBenZ6UMfDdO5wnyiw\nAOT43Xkx5BatNmC6fanYDuusdD/b+2o4GQaqfOaC7VyqlNlG/9nracHt32K5\nKeCuafVyo9bzkSeKoLJ2JuwhnX4SJYOov5Vb3jhXXBCdWRRr/8RJRU7qmw9x\n5qp5X4blLMVXrQv+klQKkZCz4BMDH2qPGcYSwGwbFWFbMU4w+2GrzQ3M3sLr\n3Bik330ENISoUFRrpfdeW+in/KGi5wyUkm0wBXJUsNdsWbz1OOHWgxdPFCfq\neUdva1vtAAYQbKaUHhFP7VwVmK7kzOjtHfYc+JemHz1mQfIkcl70npu9TvG/\nAsjJbPvnBjsdSqhH3dodXuECUrhD+iWcSV38sPRXg839i8D4CTO8HUdQu1Ov\n/tjk7+kYvxORiKer58eufreAu3Ra29HWbpi1GGAYPV5su7wsP0hNSqf67W4p\na0KDYp34aTmqRZB+68una2Tf0sImpk1PBCNgSNgT/hL/4LP1TpCyDhuZRsVj\n3pwEY23NEA8H0Zdg8VmNtGxzxyQsO0KPzuWnKOzjW6ICIG2Im8MnqcZAle+9\ne9vPAob3ay0TiliuMkTHHfhjru0LhBSY6gazjjdgkICKb/ye3jcmx8iy1bL2\n+f09\r\n=BpZ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7941d537"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7941d537_1547582164085_0.05690772603446481","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7a0f07a5":{"name":"primer-forms","version":"2.2.0-alpha.7a0f07a5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7a0f07a5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f09cf2fb7bff9a2c937072e7d3c5e5f34a1dd4dd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7a0f07a5.tgz","fileCount":12,"integrity":"sha512-38xB1uadMMGNkb3NcslLV9onGmo85JPVdt2Gw6G+DojUd6MbrWt3ZHJ8PkJwaOL6CWDVYTrepdX/8o3gJzSTXA==","signatures":[{"sig":"MEQCIBj8k7vo6V9ExNYXitXmFfmzybpB3W1ej7/gLQbmCVfdAiALrkIgqILjocv/jZJMa8xCx/wMsrXRNWa57VewdJVPaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPk1QCRA9TVsSAnZWagAAptMP/Avp7jgen0X+WBxF0Jql\nDjY1PF+3RzFaf5sQaKccSdtKM/i/XVPhFf3Fgh7DIsdMce/D/YfsLvLF4+vK\nNc4T81DJMMiuO6hf7cVfDQfYZB0GmGuG0wErs+PbZkZ977cMhePbgb/Tst93\nRWiFmlErgIZF+RWyBFIUR+HC0e3sW6SO6EZYC91acNqz+NT36leAZfKS2dRZ\n6424ZIciuCPnV/dLPlhHM9GP259SLZByobq7/N6rkVjhB65kdaFA2t3d+QF0\nCuBH6tEJIdqUG61/Dqx+QtX2/KCfb96BlSfR3X3n4fhRxLNks4MV2vOIUL+7\nFxVtu6ar7kTHnsr+AoOmJymVKfit6MjeJubm9CqMsyKvBdEM/3xZvjGsAafX\npTa2a8xHSwtTB8YDlHFUskTnxOA2djmq+No4WQNRfAS5iOA/P+OUXKNXkJmM\nKY86FLIwVCh/FzpYS9vhGtlTGEQAWICdZo3RYKcGGd3EE1627o2+DFI2mVX7\necFpuciso2GpL48DxzOm0E1BZU9P+RJag+tqNXmplXI1X/rynXmEsFMmZn+W\nBhwk4wQSLCvNWJhdjA1M0BA2Sqo3SwMtTesUEVcdR0N6m84h8KjdGECLsiTA\nK7wKZqXC13G95BnNhpi+k1nm9TgMuxJI81WYET3tKiwnlMbaGU1FdHhVq5Ra\nFzDA\r\n=q7LZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7a0f07a5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7a0f07a5_1547586895715_0.26695105395008456","host":"s3://npm-registry-packages"}},"2.2.0-alpha.03430b81":{"name":"primer-forms","version":"2.2.0-alpha.03430b81","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.03430b81","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ccd32d9a781618d402b6744569e775a57e955861","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.03430b81.tgz","fileCount":12,"integrity":"sha512-Ercoifcc2wleQn0vEB7Qw4hlHHz1CRJ+L7ItvtRlkUAM0Ua4L+cdglkIccLFfjaKPW6vjG3gG4u8lF+i4URPtQ==","signatures":[{"sig":"MEQCIEtbUu2fS7IMRZIrsA2f5htEQx0+KT15V8UOVOJZ7Zn8AiBrS9zdrmts+7WjR6F22KFBNTtunvuqgnDQS+Euhc+EoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlF5CRA9TVsSAnZWagAAVzcP/1yE5q6vMwz9njtT7+Ew\n9y/I1hBt+NVABCkMQ1UAro5M2roTqW3pt8PMb/o8Y71F9zmS6uFOL+Ngc7C8\n/jeUpr7KVAiwY8dS7eZilcCx4r9EPLiMnXriZQ0EGgvGlsQmoNJ3kjA8wF4b\nMqAdQt97q1398zsGy/bm5j747LrwqywTBmZg8HlpP3doBGsAbwajIs8OFW+R\nkfVE0Gh2SQZIMw1nkqxSOYzSRJ5WQ6N8QsheehlysGfYCqKrZ/bLEtN4mcPN\nnu2cKRkfab0cNtkd4KL2FijKuNY6UKx4+ZxPCO+WnQBzdCBvkbhvhOeN8AHx\nacboOESRlzH80nOZCAJJBqks/UERJ2ijKJBmfvr6l8uAkRaK+BINCE0nXLIf\nXByOmximzBLnmsa6RFt2mM12TWv+6bodIhtWsXW+goIeo8ffnso91amCVhp1\nk0Gww6doiom69C1T+xDR3VzR5ajGeEuqOa0J8TARp5LhbWIhinM5ZQpC7lL2\nfOB1AfUOs58xdmb1IXCZ+2pm+vYf7rAZMKO1z1q7WqGU7TPzvenntt7DVnL0\n8r/t2cifAb+/d6gcOa52WvJ+R9pt0UHU1x6/uDy/1aClvX/f5RuILL6qtMLt\nbIszz6aj5tEDrrjf9sNCwwa8arbBF2GbFXfSCRUgzgPGedSA2N0HtS7isb0y\nPItR\r\n=0Fzh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.03430b81"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.03430b81_1547587960265_0.8206838843635458","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2aa63435":{"name":"primer-forms","version":"2.2.0-alpha.2aa63435","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2aa63435","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9d46c36950b3e32deddb459d6f76ae874e21a512","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2aa63435.tgz","fileCount":12,"integrity":"sha512-GBMOtNoV2hmulJs4uflnUN+BqMKHA7U3kumNKAnc3APDWzWoC3KceQTqR/bnG9aHuRR343SPYr29pdWMhWQejw==","signatures":[{"sig":"MEQCIFVvzA7obXYHY/vpgfYy1iFPP5LKkcf84fgdDoBY7cJWAiARtuuLQ+a6PbRh9yvMQeUBE6reD/E/LN9hdvQdlEO1Cw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlNICRA9TVsSAnZWagAAxrIP+wbDwHm+FLCteKcgW4D4\nMxDklwf1B5D4hDlCsUjAb2jg1JauVakFwfi84s//OksfWVqTHjDlPN/sEk0t\nTH9hiHjEuI8ErUicWkAtWqpIdz54+raa8zv5FJGZQDWnfzgH8gV2n/tBlq5s\nQMjSjbhVzsyXbcEa4Y06CWFmIpgYga8FFsNLNfdmRTcyGWpWDFD+ch9aGP9u\nRONqqnvVdbm8+H33JMbviphbWXEP+b5dXfcMx2haaqDQkwnSPit+nxtYFqeF\ng7GlktKChiI/GoTctMbB6uxXqu5oSzPB3OKXaJhIMVFw5gXkY7LAwhy6h0gX\n7oef/Lp2CgzxcqMw3P9HqwlIDANdZFaCXfjMrK2sTrP2NGuHOxl4x+vux5qA\nDFYrmiCcI6NumxJhFSaqjEbsbcWneCnUgpcAdL4N3trtaEP4ed4AdkPEbfpl\nGSqs2OBkQ1sDkdIY8gh+ARt1OwlLd+mWRxFKH6twDVOU354KEROJordyebrw\n/UR52I3yZ76iEbIL0qY2RxxhXgecZHqR8BpkFpHYwzsrGH+HUOT2cFK1Jgwh\nzF9lkddIjqAsVsHIMf+v2/9rCX6vRLX6uDWff6rqJb4UV0H1TNBiCx660pqW\npA2suFL1wcVhBEVRZCVZkRF4tGp9F/tuAWVuQLwgXLD2B0tnP0V+VASo2m8X\n14cO\r\n=aROQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2aa63435"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2aa63435_1547588423969_0.39877810001560565","host":"s3://npm-registry-packages"}},"2.2.0-alpha.51dbf9ab":{"name":"primer-forms","version":"2.2.0-alpha.51dbf9ab","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.51dbf9ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"9f5dec0f2d6e54913b72def29dfcc07185d8695d","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.51dbf9ab.tgz","fileCount":12,"integrity":"sha512-TTgUOOttpwhQq2jrbz7lZRkoQUybNqpT/plKIjt/MnooPMEXuz6zplCkzVJEiCimRsokrGRZ+WXI0DIgKAQjrw==","signatures":[{"sig":"MEYCIQDGPN99FkC5VgI+iL0InZKhNt7jjKmQD+ICINTSpiGe6wIhAIYc6TgUuohO4Z5kGxCxeRH8qKWH2YQ68qxyYgDhwE3u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlRMCRA9TVsSAnZWagAA0DwQAJXbeuMPz796PsrqCVEI\nMu83RDRFKDmV87ciAwHmtWb0ieDO/jW3eeCNK4806BUyKoDhO2We/MEB8HFB\nxUXABIioz731//kHsVck9PtbzGPH1ixSCCDtEb/T6i2h34/WziCjczpA6fBj\n0Eq2WtAawkRJ/eJC6EY/LeXYYxFYmCKDBJ5pBNeKclmSO5rOKeK/jf19LDRy\ng9QZzM0F0pGVCtCBfSJVTa3NoEkeudisholLMdgwCcKGEzKqY+kheVuyUgYr\nhiAbzkq2xAsQmLp861OVbCUZyyjZSMSsVv393Rt77gpy8wdpDaTnh2heX3Jx\n/L2Rklf49OBH2bJIABSDR84eKwSoTvliWaiSfLn4toGtmfh7iOZ+wlvxx0TI\n22L6t6V/zhecalNI6axWnEiIYZ7Qz+47G098OBsovn3wWkhJ6g/+1l6D5kjg\nG7qgPI9R3ODGPCPaDSgQSPA/FFcH5XztxOROqKyrxf2QOtyUrw7XpU0bBAFC\nvJKyywZ1yQRaMl0MOQsGTtZxj0kyI8W5wtpPtBzPtVhzyjxnmCqrtpFq/TEZ\nSbE0HPXdXhHf1JLizXOawwJ2QNmZmSgGClwiy6LMP+j3ougwN2yyhLG/Z5m4\ngkTJvvqSgrVhFoIhznzRWaHkBmluaOwbLA7O9XS5IcMVQLkl5H3/4fm+oZhv\nX8yN\r\n=yQ/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.51dbf9ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.51dbf9ab_1547588683289_0.4764825517729421","host":"s3://npm-registry-packages"}},"2.2.0-alpha.87aaf87e":{"name":"primer-forms","version":"2.2.0-alpha.87aaf87e","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.87aaf87e","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"0af0d9720564576cda180a072d73b1ce1b5a6890","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.87aaf87e.tgz","fileCount":12,"integrity":"sha512-j4cddu/r3IrA7WwEzrwsxtuGQWUyvZqp4ii1fSWcul2hn1aJvz/twrpRMDlSIhJk1rU4iGfUjffAFxL4Wnu6ug==","signatures":[{"sig":"MEYCIQDGCJ00pIzGc2ZfJ2dp0PNOf14CzJihbJ5MudYrfJ5n8AIhANTlnx5jbkXRtQY087wZkShReFbo9ARv0zfKjiknnj/o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPlz3CRA9TVsSAnZWagAAfSgP/1RwfDV1KfkO9MskbtWz\nALz6zaqFbsYSr3I4/spW/Jo3a5fHJxKOOKvjaTmD5teBVPFH2DQRxWgiHktG\noH9/ZWg3W8HeRrjhHZZVLpoObTMWcUWvmcM0eS7QHJzwhpv9GysbIZlCBbOL\n8aDVSWIq8YKc3OxfgolWfyB8jVy2aNzqMK07rf9ji5RZedAZRkUHA3U2fpHf\nLIjyq5yNEWtb75vhYkf8ttbD9lxK/yryru2bFtWG2AIyYk2ci4EWSE+XWZcL\nK7HJtrxafJUsXFkv4HqEPu2pQxZOuKdbonA7JKC9WyZcgoSMiNw2l3J4P4oL\nPHr27VtvscUpXUvKqoSJcPra/EfphCEyhFYiE7Yifx2uPA0kgxLIT53KjQ0D\nVDz6bHWCGpwCDxbmncsWw7hICw4C/y4qpnglAIc0dswzwwYvelY2E7hoH9rV\n3ZLKQpvyAfgfFSD4p/OP0Pvl1qM2C1+mKA7/0pdsfYWH+h8A8eHDIcvX1U+e\nJA+8GJ5zLncDBNlB624iU3AKB7kJcpVRobHkzL7RMkd2jh+E8OfCZMmLcAVD\nSR/O1sfMUhsWMS7XAtew+1/AW2ygnUIAHU/88LgXa+zmdo7hjLLyAitS4spE\nJ/AfFSVSl/xf0qTZ7oug+lGC36mXo8KruNpWGRkVfYo2NHGo2r0ipd0Y+IGt\nBA1M\r\n=2B60\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.87aaf87e"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.87aaf87e_1547590902554_0.14674882803308797","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b1478763":{"name":"primer-forms","version":"2.2.0-alpha.b1478763","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b1478763","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b2f8d436106cf2076d27a1aaa9cc7a630967cae6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b1478763.tgz","fileCount":12,"integrity":"sha512-+Zi3CeqXNOMx/7Pe34AnSVsj57zeA4lEhZsvaR0UotT6CFf/IaajxkLB9VvQCz0IMciOAYLf8SWoVeo11CBYcw==","signatures":[{"sig":"MEQCIGnrTfqolHeX4A1plPgUZMM82isVCUABSi9lJsuAISNLAiA126xXtsjQs2iCT1WOibYuxxzw1YEixwt1CCzsJ3h9DQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP7jKCRA9TVsSAnZWagAAnlEP/jteBipvn7uzftniyJHQ\nsKikjRMfK6HQ09QwawSu68nrfktVsM6JFC1bCKe8xNB6sStICNE4WeH/3Fzl\nTUPoHMnObwIGu/vEMJCNZaMKE32tw4/IoLCGzfdjcViAGIO7xexGTFBhTBhQ\nkqRZ34FH+bvc/dCckgPNjujPGYpNnXYlSDyru+qcSOOsdgXrOOSpJx8QiLu3\nu8oCpEnSj9yQz0IX90dbFTCNLZwGR9vpRLQOdNSbzL4st7BTIy4OmSR6JsnR\nasgjA2FLk36dig5Xcl7MJdQ3RIYE3IgGS7Ms1M+JQYB2Wxjgam8CPF+LHzBT\n69Ts4v3wcW670FU936YV+xfaE5oLkehp2+g0GsEf7Twt6xd7XyFY1IyBWrHk\n2+uMHm96UrkO7LcfzcJQfBGo3gfk1o9/yXuzXowV00u3y5cCiV+GikI6QG5H\niKbrO25PnTLQGMZw7mdQL6GB5jdRDyFA97EOSf9t/VbsqrdnyobJ7Z6pIA5Z\nbb/gVpnexMSk+EIqPLNsrJbEDZoKYWp9KaOY8qCd7u9w07Ob0f2JIdDrfB2Z\nxseSvZsz8khP+HQraUADgaa2b0ujQlA2uxongDDst08judw2aHU3G/r9cxVc\n1w3aCWQPrwm7QwJN2LJ7ddujMcPlXQAV6mcZdD0ZPV1b4HBZzf7RfTWpr+1A\nqCNx\r\n=TPz3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.b1478763"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b1478763_1547679946004_0.88719813530635","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e41bfddd":{"name":"primer-forms","version":"2.2.0-alpha.e41bfddd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e41bfddd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6ef3d30e5623cde9c94f27b754ca70f2fe5b39dd","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e41bfddd.tgz","fileCount":12,"integrity":"sha512-QhIKBxUE67Aya102VoNIZplRCebMl0cAqeCagkAoIluppjvryLxvcbYjUBd3G38SAu+7OJRH35B5WrMVBCZ+hg==","signatures":[{"sig":"MEUCIQCbsLbMuW8CX8IkndknWb1zCsP4XifV6fURzF64Bmb+ggIgQQO/H6iuXKwHIzRFcD3hCv0CfO24lbaqJrEC3smJqds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP7wlCRA9TVsSAnZWagAAnJ0QAI+j7Uvr5OFkFVV6TJe9\nHx5mvD2lswjawACYrQ2RbrAMoS4c0CQ92awdvKHf6t6sffTQMj5S2/PU5rsF\nnnntUUjktlH3SGNVRHglE87R+SuIBikGGxZXy22geGjYthl1vq5nZXMpWWEL\nzjfyDqwgSS3hjEu9FTdv1sbsu7eK1XyxiywR4XC+ucWE2wumchDhsfvpM73Q\njwOwJqk6ZDJONmlruoY0A95oOmt3yakr4UjiJkiRfXI7KDNnlXjR4JIQaNV3\nNXvk/aWhN6KCkBOwVqy4j0LVvziDh9X/XHJ52gi5gG4Y+HaA3GC2JK0Z1wHU\nAK1jhvmxagCt0zlSmWBalsr2NOklOpBOTKgGaALZB0D0hmQfgSI+ojm1uHTm\nPSjWTdurCXRJ+21GRBMvlcAgGGlQRnaV0F/0UJRv2zGFjEu0qA2m7It/6AyB\n/ZwZeZbchxLATX2CDWHgjYVTaZQV1lpSO5epyjQx+rmxVbzltMV4t61MJOhm\n+uTdnBsraOxJeLmgLSVozTqgULfBqX8fE1EnABfCobUczIkG/Rr0/jyvGOrm\n0QmIlhsm2O4Pz8QLeikVIPKNKtHDrk+UyeytqE/7QYNignI2qITPa55bkfm+\nfeFE++sHeEohfZg46+pP8kuXjGf/kQa106mnJtx7ASsx4bma3HwVk5iyxIWr\nTh54\r\n=0Dtc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e41bfddd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e41bfddd_1547680804974_0.21000907393324098","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d93360bc":{"name":"primer-forms","version":"2.2.0-alpha.d93360bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d93360bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fba772fff54891d0f207558cadf0a5534442e8d3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d93360bc.tgz","fileCount":12,"integrity":"sha512-ilOfsPI54K/FknFJhoESBG1MBVzBAW0C82I1Q3txkDNsy+bpl8w7iWTHUvI0Prg3GNZYM69QyxHPxiXhCLLYgA==","signatures":[{"sig":"MEYCIQDJO8F8rzL1KX7eURCAEOGLzr+jOiz3L8F85GhsITcN0gIhAJUPtz5RHuSVt3qiPXVhJAKN1SYEmh3eMV01YlsCztqq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcP84QCRA9TVsSAnZWagAAOwAP/RrZylf4/tmrnArIPYry\nm6GDNmUy0Y9I5v5MOwEvHrkcLM15K+GTCf5SlbQQl5RP7Q06WPcYI/0J+Zo1\nSEccD60qURSO33LymHxYABVXMUDFOh8ChHQBytTKNFma48Bm2pgG9pro4OK4\nC0iVK0O2mUOJ4M15WpaAJN/9NL7Lsil8IM59xujd8AyY2xIsbF/Oe0UKX+Is\n0QfPzL4uAWDhxvsMxKipdM4aSjjKvJVbBoLpCwDDa9X6DHYAFumH6WUa8TY4\n2dHT+ZJwtsA9uOMvHv2+Hv/LOx5vf9HpxwqBWYNQ6r+lIkLdY3Hjz+mw+hlR\nesMTPBsgmOplGaG+zqK7T/aWj7RWVO1XWcQFJtTWZ/tuJ+yIroj3Lb+Kyt61\n1LQZz+jjRtousOp0y06H+PIHFKOZMYGy6CBdq3/FX9NzhEAzcCb+152PcXlG\nV205QYzqeDSTDhA4By0r/LTCFFoX0PhPnyUbFMh7cqzH8Ba0oyeedKSLY2ce\nDVufStgFUVJ7eoJFvQMalG/Yf5pbKntbuPOoYhWijS1mTSOl05PunHGeIw0w\nZhkTx+8yBNMq43dKgH8xOqgQ9jG6dE7VyXOG1mPa/mUGAY3PlWdd0fL92BzK\nX95oMX1vpzrwYvZx6ySfNXQYNxZ7t0yeMbck810rvuJTwYWNdbZdBBhonZyO\nSjH0\r\n=xPyJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d93360bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d93360bc_1547685392042_0.8304857414979696","host":"s3://npm-registry-packages"}},"2.2.0-alpha.20dd7c15":{"name":"primer-forms","version":"2.2.0-alpha.20dd7c15","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.20dd7c15","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3de20d7df9c5683980b38a7a3b3fbefaffdca442","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.20dd7c15.tgz","fileCount":12,"integrity":"sha512-2rFqL1FS9lPn73MztXiqVdI/b5XC1F1PAzOOmF173oTv93tY12EbCkws2BWkVFp7EUW2zPttovFW5JndeLUdlw==","signatures":[{"sig":"MEUCICQPWQM6JEpjUIslmjRajG/P27tSUb2kVM3wgZ2zpZ8UAiEAoV9k5a1PUHfBmp4tRwAbZ4k/H8DqnGNFOm7JlUmRuH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQCVRCRA9TVsSAnZWagAAWrEP/1u6VH31hs11A6RGLE1r\nxEsW4CUSq45Z+sxaSRITWlOJtEk0zzRsbptUESBSvFGLm1IpeAFtI54X7v/u\nE++8ZYv+lkRX2J0H0f02zIpXruXxIcdxt89XBVADFoIYvww3HY98/NS5HLxO\nrGoMs6k7P2iuOw835mdSplZaCrmOBVXjHIWjVQs8qgyN1myo7BGHWJdvmnfF\nZGDWaKlm+YVUghIblLKLFh+pNdnidU5yRcd/X2niE2mAGsdxZBax3z7KafeK\ntxN2DVRcMMnnMJd3Y8riOsxpL2MUKH9XpFFjy2LeW1orwdHbAsFQUqYdq6IC\ndQomw/UZkxq9odPjk0Vhy8U35ApkDtU/tktP639O1xvXYNn6fy3kV0JZbGLs\nhZdzEEC/qq2K5Wg3TMtjiRGiY8LA2YM5c7HU0P4zmWOPHc3RMkaM75VuGfUG\nqt6gwYcc4fWTQ3fmvUjVHk3T9Xg85m7Zopzikbu25/yiMV47Bs0yAUWzUmnC\nciJ9m8blUq+UKwtoh8iVYOqU1MDTzgjXpFV7snKUR9IxLikuD+y4bDv0ead0\nDw6eS1G2x6H1SZXswPRAAk9/MsA/xGq5795Y1oGGrEfqaytkpOf3bta0RzAb\nOrccEpUMhjedjj2Kw8dpnU4lzuZhzI0sKeGGapXEYX/HHHfu0VopcldKowwL\nNvxS\r\n=y3YZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.20dd7c15"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.20dd7c15_1547707729114_0.7955527545275676","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5c653f08":{"name":"primer-forms","version":"2.2.0-alpha.5c653f08","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5c653f08","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2c31944d0c535d9fef6a44a36c8c23946fb679cf","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5c653f08.tgz","fileCount":12,"integrity":"sha512-vP1qYzAMT1yK7zMqvvLkchaqX0JbpjLDedRx2R/NmjDlKOT6v/U0J4fsdUH6uyVSdshPytIMgHEKSk9EscTk6g==","signatures":[{"sig":"MEUCIQCLFnrmWFQPOqJ9gcWVLgUKX+4Tr94JTNbNFijSI+l76QIgA7LgskNK0C2PjxhoYzn3rrdiJ0k1ZF2qrksGUYDEY3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQCb6CRA9TVsSAnZWagAAM9wP/2tnBQUiHnj9ipYv4ERH\nD8pv5YK04AGc63QYvGCUcnR7zvZOBH5fmIJPM4CqfOxGIwlywRPUMpZu1LJi\nkhtoJBiArby1iBTmn832OJTdJ9CkY1WgyBCqoH8y6TAd9jbYLM19fVoAWANa\nPWCcv51YdCrudIjUHuavAgkgdNp6DF1tX6jFpxg6B7pGBgQxhhuXq5Ns7rJR\nSApSpYLEr5KF0xJOGc+89jPiVQ33HPY9jQ5dUXQ8fX9oOiuYorsJN3hLfmS4\nMbx6Z5AR0UGKrQdcHThyJggSUtRgz0Cy5NHbQM2FG4w0aAFo7mGHVvSumLsH\nu4ADpa6nj94gHEaOGx1OF5SvicL2ZX86htae8xmGkEMprc1xsN1hfaen2sV7\nf9ShJwHbwiE0VIcuUkYFWvSnepbSLoCTutWXbI0WbX5GuiNL45uRjRX9Ivdb\nUwa/JX4+8qLJI7RupMifDRzW3rT2p0aaZ4CSnemUFFNY2FGQTx7tpWRUsyKm\nCzGEuPLESPMQd6cwjD7pN7twST5//2GbVBIiBvtZZMBOcVbQ4JKd6gPT5DNv\npMH0juxJddwXj5P0CeylUuDaYRUHRXRyBDrw7VNBJ0LS1nvAKlKulVGp26uc\naqu+nlZnAjyxyd8BscA+Ed+R8zBy2v9M2FUFRy4J2yFB1AvIHqEjb0gIVkNc\nGPXr\r\n=iNeF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5c653f08"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5c653f08_1547708154007_0.3124494402415019","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4d5dbc0a":{"name":"primer-forms","version":"2.2.0-alpha.4d5dbc0a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4d5dbc0a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"77b99fdc4f1c4a65065f77970ff994c5dad8f729","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4d5dbc0a.tgz","fileCount":12,"integrity":"sha512-TKNGziZpfdCXAx6rgJwyCeeeFfbrt34gxy2Erdpym0HpHVPxrlwqr3rVG/+SEJ6/F+kIHq+AzEXCjTo4WJbtXw==","signatures":[{"sig":"MEYCIQDckGzFoHb7Y65FpozV07ME6oOSIAafWeQxJRQJnDYHsQIhANul/BrUEzburCJsJUHJxZcIgOH54wEIjIjVmIi5a2yZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQNnqCRA9TVsSAnZWagAAXMAQAI3z1EO5e0Ua9+pH33Vo\nIF7ikEfioNbt2X2V11YfeFiIb9eBNORFKQl0AUlo0Zsu4jtEeHtNYFHMam0P\nMR4u4654SRm6F+k+VfWpbRSz1T7/QaB3Z9GK8+vuSO8amOYzCgG98fBq68Ek\nR0Pa2Sz4o0gPE8cyeElJJL+0S30yfLm5PFHNaS0zGoP6RM8Ad/4MftwV7dBv\nsJ2zGYaT25/SnVTHrtE6egaJHmc5YNhu0HgyEarkOmBCbep4YMtdtZ/XF6fD\n+9lFgOPY9BEYVYQA8E+IobguQSVxdkQPuEtugyTY+kyoRkao8Ze5aZwYEMeD\nVmtf9wUx/R/i5yovgDnlvciCZlhw+duCOhk9ObvdMAv+3BRZcR1tL/JmtHvN\nqkuM7TJvtI+i5rb+uK127rUFO7l85A7ZdWe4gjofiWE+TNUNGJY5mHt8rpEj\nKTA0AU4sIJFDafTwT2RoPtX5RUFXd3G052XHbjtpzM3dDWkYwxkJEb8kPZmm\nqBqKZOtZbvnR/idjxWcO7HiUig9zhOMs3wTmqPOvyiNAJULi+OU4eoYhERHb\nWbYcNH4QcEa4vNrIwBJrt7zTwje39fBqtFMwLkRySiuNLeS4AvO4wCdcW+T2\nbHjXS7ODITp/BwMSQIJ9iw317LwYr1kDpP5SbUxKyggWkzkJ/IdUb0itG/z/\nYaqu\r\n=+QAF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4d5dbc0a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4d5dbc0a_1547753961734_0.8213531510819814","host":"s3://npm-registry-packages"}},"2.2.0-alpha.dace91e8":{"name":"primer-forms","version":"2.2.0-alpha.dace91e8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.dace91e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5011eefe021c53cfa3fb4d7e61b714fdf18d4aae","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.dace91e8.tgz","fileCount":12,"integrity":"sha512-XzGrfXhPh7/hfVnXYwWhqs8MZRw+6CRkPIrEOruFZf8wG3fgp7ka8uFnGlxjSRePDllJbcatvfhnrlrFMh2Plw==","signatures":[{"sig":"MEUCIHUdRzpytuyH5Vsc6IflVMkJoxbJftYQH0HiXUD4/5lEAiEAxbs5LLfleXew9bXTtRdB9Y4iFbw4bnkNf6SMoioJua4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQN0WCRA9TVsSAnZWagAAtHcQAILUjj8HpNPhinBQFA4w\nU4aWVLgSZx3McHaz6z/v/D9T8qEpDgbTjigjPASjjq0LfgYSqY6h8NasyD/x\n3E3ND7u22jDNuw5QFvz3osNwwRlw+ZIxpHoN8LN25khQ0SZSv35CUYgVMcsI\nzPpEBK5qYl9u643O7RnVR/HAxqJlj0MZym5JX/cK4oGLk6UwQMSuQuMVBYvy\nlcdrlMCCluJiqvXhC6XytXkWdJ8xnAczofjHG+LSmPg6LXaD0iC7E3jyPAR/\nGN5mFZxNVqWiasjJjT4S+OVVeAYxPGo3Znjlgl56UpRz5C++3yUnPGbRlGcF\n9crC1O1QjKw4ftHi9QxuYlI7tOO27DMFt/ddc70sKtN4rI6MljaTl4TGv6ZU\nXYcfHhWlp2QYysC3H2emQ4LuDmvohGyh54Bw6NBcGkphKxLPUDtZ2ZEFVVtK\nOrXufcVcNZu2177hg8GhjIfMFJQSAVXi1mCPgV3vTC69drgdSvrYRwjvuz3W\nqpEy1FXaHgMGpKFgT+acUus/IMxOzEVk0Mi0Zf7NDBijm6YVU7JUXcfgTiFF\nNMetYegLpGo5SWSC/z4JL1mNhfoHfDMTnl67+qgrGcfIKc2TAA0ES8Yyu0sJ\nA+7P+NRCniNF3mC+4Kr9jCwMYJK7ZxXEuH61E+II2bnlNgqJylF24Wim+Gwv\n9++Y\r\n=5heF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.dace91e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.dace91e8_1547754774044_0.027407730687925902","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d8fa0fbf":{"name":"primer-forms","version":"2.2.0-alpha.d8fa0fbf","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d8fa0fbf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ce7e762b57d655dee6fbb5744bb81d0e2ff618b8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d8fa0fbf.tgz","fileCount":12,"integrity":"sha512-vdmNW7fbYP1wOtnc0VdekpXRRUDX7/OsOTa48ElsxCIXWsAZsExjdVBjdQD/GIfMHZG/2Jfx/K3q7ijLtGcDpA==","signatures":[{"sig":"MEQCIEm3n73/307abbbrTBRiFndBuo9MeYZb/ECgR0XHeF4zAiBUAF8KRd2xr7zzoVvhAdqt8NEC8ABRM83aBcWQyrOuBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQTICRA9TVsSAnZWagAAb3QP/0jX1Ciofxdw5MZm72iq\nzZXqLw0h3Z/fXojtE4z1MMs1hcu93FvVLewwbQkSFuq2/lYP2eIrh+vp7DYE\nMExKrvEBNPG2XydOvOzVqRLd6k1olvUsdpBXINFL8fzeY4aNuIa03ua6SJh3\nO7hWdkFU7Lj7gAm1TfUiVN0zN5uKOViOfm4VWumzOJtyFUqTT4rnevxsvw9I\ngv0sDfyj1FRgp2HP68Q709yCrqbonPk1487JHa6UkPX4Y8Fn2ziwNOPBEs+z\nu5DSZdn4Z7P/IKe8A2vmyRoAZ5HRsnTZ3Ez8Av8TkRAqVJl4ix2Hj7cEebJl\nLTBsLsA4sgoUuELFFrO7tWL9eVrZkIYQFHP65KkF5/frb6iqndWzc02kG2WS\nOR34bmFHD5PgPaRRGieOh3I/OXohfQFi0L1oBt4kSSUrJLQ6SbrFMCqW+JPW\nn0aYfPRsf+b7eIumXPmkqSkdegAtKSSFmMklzR3W2G727sEfSfvbkqPAlyfb\nCPWOZ+MuSaVRMwW4u7DccPKO03/5seifsF4rH0ky/Vk+igezisFXutWQ9sdc\nMPrrsaTPNZt0KLvF5P3P6rfJtJM129G/DLyVxcNgvnv4nJISZwLU+14hYMi3\nIHVHRa3y328wBmvvH9ruNY6sY2U93i676AgDpdPSCXA6ujtCNggXQI64sZzt\npCFX\r\n=96X1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d8fa0fbf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d8fa0fbf_1547764935636_0.11917613780267478","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0bc0eeca":{"name":"primer-forms","version":"2.2.0-alpha.0bc0eeca","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0bc0eeca","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cd2f016393e39948ff4d3f0ac269a5ecce0d376c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0bc0eeca.tgz","fileCount":12,"integrity":"sha512-Uk9pNu7rsvIATTx4n0cbegWQUJgAuUp9fQerT4n0ZLRybahgd4S1vYuAPYo8+pRZoYxvN86eN8OYFSUTprOHVw==","signatures":[{"sig":"MEYCIQDOaF/2b+tIWp2GfOAGk8WM37sHkFB7/ByZQLrwPi9WiAIhAOfAOxITnJBb/XdzFoGFu1DXCDDdV/i7DZsA8ndtmVy6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQdNCRA9TVsSAnZWagAAyc8QAJUkokmS4E9O9gmHaHqD\nyDyk2CLqEaZvG5/G1WxUirXPQAQh2Ad//vw+W6ZuWHkdAE+7GERop6ewP50c\nPXC+Bkaw2tGWpoy5yScqKYo9ePpTqrdwZO9eTYsxhiCbVISQh5YD4PQ8XoH0\n0yqL35vBwBsmhxLVDP8uDT4z+p3p05pNRcQF/A5i7NMx1OLwUb226D16eOQm\nTTHPIibT1tUoHUQT80f6Hm7dcVXbHjmIx84Wb3UwC3YG1PvkOgfRXjnjXZe6\nhLDPWWVxSlcBhjYSNsgLrcrYPCkOMy/gM7k4QrznmE+HIDS0QeU4nebVYLEu\n7O4Zjp0F+DLU+PsESkYHDzjotuaHoiyT7Kgcb5r6jp4WrByI/Y7Obr0/M06+\nvVozhRL3+hINJ5niDunO8hU7idfZ64yRjaS9YQzzdxcZzyuHpF2SZpYFD4D2\nPpHBM6dtm11LbVTtVGKBB9NlvINb8BneZujawNh5DC+Oqbzweu8X0gY9Nkuj\nEDm9Y4TX9gIjsuWBVQu1oTPAbSfiDTKfT0NGAQRKYiIr3iAbdDhoyEOL+WOM\nVp7NOtUvNgjDdGTucgF3JcGr2MJxPzOXr8ldvJbe/nIgkT9ztv+D91GAHPly\nRhZfp6oUv4aFf65+2jx51xoh/PtSV2+zStjwRks8RcVUxIy5jIdlA+BKX9Xd\n70LS\r\n=dh0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0bc0eeca"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0bc0eeca_1547765580524_0.7221887369347719","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d51305cd":{"name":"primer-forms","version":"2.2.0-alpha.d51305cd","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d51305cd","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"488ba1ab1eb1ca385fc8d0412dce54d531a9b4a3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d51305cd.tgz","fileCount":12,"integrity":"sha512-lsTgq2quX8kbh1gSlYbad54Iozw3zNu57PCeUST6TP0G3sOFqDtqV0xfngNVJ1KagJDNg5do26+lxvtjxPxbew==","signatures":[{"sig":"MEUCIQDh/MMJ12foclVOI6Gk+7Qt0/+Kood0p+RNFG5wOMD50gIgDSbjF19MoQ/FxhHX1C475zkIQdVPXA+vXJPVsjNAOlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQQzACRA9TVsSAnZWagAAjN0P+wTAO9Rbl4LWdzQtx06+\nyNhmEsECt1qGo96yEJnyIkP+6Vhx3bloZcNmjbXdYjGr0Dl0lYjEsgvgfhxj\n+S8r9RS1qBhpO/QakXnKZLIksNzW79UvBqRsyb9n47lFps2zQ9J355ZPPb2G\nfs167O1akOaHp1tLqqUN+cPh0i6sXfQ5ePxS9vDJEuqhVcq4ZsDqoohXtS0+\nnQAM1KAHMsruvBUoMRk7EMuKUfZbjxjBUaQUuhAiBshkTB+3bidLssrihDHL\n8bqb2maoa87VOzp/tpvuDtwA9bddhWeNqTYKB5CQQBmJE5kGAhgHy8XmGaqX\nwpk1xDMzZycGThaia4dIrZ5ZT1nK/Xwb/DmkeF1m8JYxQmO2i19Y9lQuhieL\nX836zBs5MVQdn+uI7iqqJf/sKKOFx2TjNUVzWHNRjC9vAwffeMCJhnrVrprV\nQlgLht1gPkII9X9Yd8gEB7jOQrAUXNXHNef7iEmeVOSXIZQlaEthZ7voiIFg\nhmtwWCMru5tFM8z5iJkYXIAmNl96koCUje7ciKb7DAPEOkqUyItyfzYl4W4y\ntGIF1AkLZh/MhRmEQ78wCUmsbZ7WB0nvOSK0My8yZFpmtED4Z7Hu7gUaUcpz\neCe4xkD3hLuee4dRszWlsgNJPIilJYdgKTFvRl3axXhgNqKUYgMAPfvjaLeB\nkscx\r\n=Cmp4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d51305cd"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d51305cd_1547766976310_0.48175155002188386","host":"s3://npm-registry-packages"}},"2.2.0-alpha.946e3ad8":{"name":"primer-forms","version":"2.2.0-alpha.946e3ad8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.946e3ad8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"eb0416dad922e23f4c09c138c81287574a0418f1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.946e3ad8.tgz","fileCount":12,"integrity":"sha512-aRyRVjp9ctKBI9VtPFTcFdaYjWpbZw5ULISwmi5Jg3eqZy8SmRU/UnA52fdDh33eQOxDRrRUFaMKQYCYpXi1dw==","signatures":[{"sig":"MEUCIQCx2ApyXgs5fEMBrwUOedcZEJviFx/X/3QyhkJ1mDTImgIgZ4mNT0py2a8/senaynhArk3N5INw2ahROniNiLzDALE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQR7qCRA9TVsSAnZWagAA4U8P/17zfBa891OJB9tfQPwM\nITzPUbcbkVP7S8c3Z2OSElwbpo0woCty/5+6J2m4Hi0AdvbNdQcKNkRG5W3x\nhCTCMQOQNBoXCXT8pSgpw8UsLBIBjH37L7J9fkUaOvSC47AwNyO3VuJY/w3v\n78yNrFXj/X7Pj6NUQP5VuMWxMKMge+ziJcDNc7BAInPqYPEMso93AzVqZ/Qm\nZrr88w2LJwjsWpQK5SdT2zH0VQhUmmKvepXOZ/rRgMYtMStgbsr7W3GjrwcE\n9mJzb1s4SuH9b4Ket7G2sVbUdtpVElHOfEbV8qY/g55RAJ+2ZIua0gklrTnU\nJq+Fi29+q2a2bmaMgCJEnsaxTPLsMuy8JgpOND2outu+YKr81QGBlvtGpHUl\n/q27NG22kE4G+YjoGUGM6DhrE9x4l2dVd30ihju6zgG4Oq/KXuvPu9N+/GI5\nozrpP3g3SyomuhY50evgTNI5Ox4Po4bldnYZYezk+8ZWLOx4dbbubxq6pyfr\nMKepwGWD29j6ohhHbc8DFEgFf/YuNc4PHgyxIhhTM67jgrqJrgcSgWjjU4fv\n4fbz/shctvXz1UZRMzKbLFJr0Hc9FHzrR6qg03eQQlkeI5q2ZNRG/Kr00MIv\n+1GltVIP5hxfFEbfjiA+blHlwk358zMP62189VU0T0O/Fxw3Bqh8ZtD1ZBor\nh8Av\r\n=Udtw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.946e3ad8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.946e3ad8_1547771625803_0.9018840921352691","host":"s3://npm-registry-packages"}},"2.2.0-alpha.091e3379":{"name":"primer-forms","version":"2.2.0-alpha.091e3379","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.091e3379","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4a08bef6313ac4676f661738b16b922aeeb1d622","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.091e3379.tgz","fileCount":12,"integrity":"sha512-u0tW0YlYLiroAYm5U8zniTiMQoeRo5K64/5GQiJUzS6wTkkp58rknX1mu7xMGmZvwjrQB9qJO5G9XVGfpqTALw==","signatures":[{"sig":"MEYCIQDjn8pJ5MYBP0j+IRH1XwPz5R0aT5rbD7Yq1F3KUo99nQIhAIRZsEVH6ZInGTABO2nrQSrd/RCd6ywf02AI86m4TWam","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQhFWCRA9TVsSAnZWagAAuzoP/2qeFRa1nngkoDOWU/wg\n3K7eyK8pL2CZOQj0p0BClxFXdbWlLexj6xdnLmU7K27wGPJgb8B5LlYfqZXR\nJ7rHmMm+TeEzBgQheYfSOAj+Rch38Wc++vRBdv9T3NIxx3usOuho94dkYRlb\n3/tNOXi79AAxbq1sEXibTqZHIcHc7Ztr0pFg3sizwR6oTcOcXPRoPPrNVpX1\nGNgq64oTEzid0+B+wXi78Jp/tp1AqlGKCvA97aCRqWt+AWy+sWgu8vXv3DfH\naOkV0WdvL/vsPvC8D+mTDK/ImbYG4K1a3RB904DHuhtVHw4uYXxbMtMqoz7+\n6aum8hW3+6fF1bsH7bWKp2ZA91+5dLb5WCUD03ooVDswgQtIZsqYw5UPS7VY\nDP/VkDXps2onIL6veVsEaMMIbcj85hIqEDhCWJEl3UzLnKZ9Vr/iOCmrxADg\nSnWBHgYvUl0JrZnqHQUdsDYvEXd2teNOGGJ0QrP5JkrnovYiM4Bv5BIwiTQk\nvL0FDJx0T7G5GhjndCHorX5shqzvQunYezyy+Yi8Ow9OZ3qBzznlvoN3VTKI\nDlDtUptZXd3FAX6qsW2wNoLqIAs/dpGA1JZnSY799hwzqVWnL+/anOpI7gSh\nbAf/SSa5utFRJu4NtceSTSzHvrscsa6+nYMm7ELax2cSA+7khE/2oPflgCUc\nWcuh\r\n=KqW8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.091e3379"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.091e3379_1547833686316_0.8133863011719158","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ee6f7715":{"name":"primer-forms","version":"2.2.0-alpha.ee6f7715","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ee6f7715","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"317a473564a43ad82b5cff5ef81c3b9d7d150f03","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ee6f7715.tgz","fileCount":12,"integrity":"sha512-HqnJ4uNMwN8LfKTB3z/T6ey25/ZDhK2XyVTTK71+wQ4nAUZHxCrGZGNHFtLsl4B4/Bc/rutmpyWCYvrXjCyQXg==","signatures":[{"sig":"MEUCIH7498pB3UUfOiuAYVl+OWSe0S3xp0wVMG+IpLd3JPpiAiEAohv5wNvHqCAiu30R98ghDN4laB4/bLImYpC5mYF9YuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR4dvCRA9TVsSAnZWagAAafUP+QEjCWRjXkEdcmxz9qLN\nVs6XErFtQRDxUaJV7hMZIK6Ak6NwqjkiCWvdI0Gw0pqVCgsFLMO0MYi+XbdJ\nphZv0J3vtHrkRnSognahJrrYhrg39ymQxN9tnrjZ6QZ1WCIDcYvIW/18szjr\n3C1lHQFc/k+9+JxQk5wt65IDhuRWuPW82+/U3N0X9JWSMHjXwcMh1LmkfxCX\n1amK384uY75cv5xuhTch86Tf8L0LfoRdEnT88eVvgLBuTV/6piPasDIdyESK\nLIMYMC7/Kzd/5GUzDjKKrWxsfjdLbuJaaQYxB3h1K/747aWDu+3DJsz5FWMc\neksVMSFk+MDpP1PhL1rRrAg6L36INnMLKBg+WhPLX9b7sV2KXdgT5kOXxB+M\nQeuqNec0CblMZoHuHJKTE1XSgcZdyO0/QYpIX//sN25OBYiPYniRRxUZ+Vh0\nqfOyvUlpO8w5TY0xOoHWjsC++8zLcVcU4p3CCq7kyPxDG+OBnUE313S37mGe\nfqTk39EgYG39Ht/hAbXjvC74+HtpuK8sSDs0WOSUMPerRvw6OlZVnn9v+JS/\nZARViz0cY8SZLOuDf+gMzmprPGRXkmoQk+olF2iacpnNnOET9mpemlWtXMLq\nsnlibRzTnki+IsgIYZeyrJ5kq+/kLch7/8zeMzBi7mL7pRoaeLj+oZSaJhDk\n2uHt\r\n=+L05\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ee6f7715"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ee6f7715_1548191599213_0.12239560219471746","host":"s3://npm-registry-packages"}},"2.2.0-alpha.20da46e0":{"name":"primer-forms","version":"2.2.0-alpha.20da46e0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.20da46e0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3422fe0d112357efdd037d1e9cba6002e4f21447","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.20da46e0.tgz","fileCount":12,"integrity":"sha512-3wYqPC+6ArFj49x5gKNKKqv7hu2cC1DlPcIXOUxatXUUcASYBJQlqd77p5Y6k6ojJcZ6JG1jrMzOtfAHDxQJvA==","signatures":[{"sig":"MEQCIG3e6XF1l7aWfIvAI0neM4KNr/bKan2A/9H6G7XyapQuAiAT9LNEMIBZtcZonvp1egyhdIamewZkHz3lr25v5lB/0w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR4iUCRA9TVsSAnZWagAAWdcP/0cxL78HUG9BgxXLjYdU\n6KVoB6q+j1KDmJI/fvxj9BZhYwGb3lijJSlyQDQZvYunV+A1POKJWmOrI4dc\nDlB1WjZs6gJvN422vw79Jq9MfeEvwFc0x4vQWye26CIilUFxyWOWlNMQNOpj\nLJp6ZPojEK1tANF4Zaflsx11QHGamNqgO+HcAfUv7RVGOsLjxgNBZw99BdXS\nrm4jS9HqH8PQetTo4dE1Y92vNvOQAqgNZhxNeCLaOK1lujYlwnPPpf7WVvYr\nSurXN1ntWaDP+uX4fmmvCl2DiOMYoaXOru97zbQPVVTYjZJvppnUgCTZO4nG\nXvKasqB9D9ZIrdhJMhS11RmYUEdzOiv2NrU2VmbKi49w0HDmAvgjLF9/YLTc\ntZVCJoh2GT1mnRRgJLhifC+ZrJx/eFleUcwfwJSErDZ5PL0HrinMhzSBjEVs\nlnOP02/T8b+pXxENaF0cw/agW32RlqGy+1OY5KX9iURWYbdaiB5eCm22whCP\nxCAThNwKHGRbBb2rtc5YbyUiete5M8h65qmLQsHlc45Qn1OQxa//waRrJdzE\n8hqjXVvn0AizzMfZLOTvDShZPiDmyaVIwenvqxaRtX8/qhnYm4fq9eVrx42m\nmV8DrZ6/0VPOsCUv1kB3LwiSmTEEv2ljm1Zt4bnWpfQtyglq3ejB63Ed6WaM\nAjBP\r\n=O/EG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.20da46e0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.20da46e0_1548191891473_0.2342313158572038","host":"s3://npm-registry-packages"}},"2.2.0-alpha.4b1305d3":{"name":"primer-forms","version":"2.2.0-alpha.4b1305d3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.4b1305d3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c3d1c707cb5bf3a6446ffa7f0f27c34554c1fcb1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.4b1305d3.tgz","fileCount":12,"integrity":"sha512-hwU9kGq36Ei7wap/B7PRBc9Bmc374/T+9PFYds7WLU8y8+w0ao8m16wZv4MkZjZOqDDBxDaXJbQyI8qhymO5cA==","signatures":[{"sig":"MEQCIGMNfMeH2LruwLtI2xbQvbmb+zTddma6ot+Tgo65BbqzAiAWUa3mJSlDVLuACpk5LFK//sjTfbM5+bGmAOJIMtbN3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5ouCRA9TVsSAnZWagAAJMsP/A2xy5fN3kwds7N8lnfO\n5Wcuy5TD2S/fGAnDKdqCSR6xagFhBPdY3SxC1wL7bjUroNvVSH3dQLAYR59c\n9ktMQqIQy2S83jFIpWe62XrBl0kH1H8TO/VWPgMinkP+JQ2Tc1t7QXEkQMl+\n19goAa5MRsEJ/3BR3MIY5QEaK/e4kQReVvUe58bQ5tMZUIqPcujHxNCH0S5q\nLOdePy2jn18hkbDQkTa3i4vi3u3n1k0vJEcjNGtpQ/A5KdZ91lMsPd6NHSwX\nGJAZ+NGod9eJMCUXxwHOcNH5ZFmvp5GiKhO1/lBydcnkOKTZ06aSzER0ZHOe\nTsGuFp0q9JvKz/mG4slBfcQXTL59awa0nm3TWv/0O1brHBSZF8hy1PvCzobg\nACAfgFvV1Fcrj9FxLCndLhVRII9j+MG1L0f5BQ2Afo/7mssdavE4x6opQ85i\nhcnP54fbwYcDTINck1WI6GSzKbfS9aKilGbWiMzJHlHHqVIP1XqwysmA2hCV\n3h08K0dzRUTeP/7gFGHaw+Xp6PBldhYaqtWejHikTTjzB+Yk4FkQUuKMKUDv\nNdMXlATCdMcMSqk3p7Wl+aJ5QxIt9I1KQgAg9yIDBSvU3xap3WrAz8lptKbD\niUiWitswxI/VLGsmN8qUCblVla11wZz3hVaIdQRSk6eDHw8QV9WeQAYIpN/m\nLE2K\r\n=OMgT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.4b1305d3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.4b1305d3_1548196398164_0.0840087491585535","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a158835b":{"name":"primer-forms","version":"2.2.0-alpha.a158835b","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a158835b","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"7c3dacd6c4f551b5e451e729e039a83678f02258","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a158835b.tgz","fileCount":12,"integrity":"sha512-17JyFnBs1qG64Na4JWS5IIH34h+FrESImEFLYJa/1cxqcWf+R1oM2y9UzOjd/5faDMbWPHQTQRJQO9HGFxeBEA==","signatures":[{"sig":"MEQCIGKUFBluWRNFn+xpgf/E6liZyQERMGSuN++KOwGEGCF/AiA89mXx9E9TNDSHtFZAYW3pqTmnf0Zc+KqO2jxeulOTlQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5xvCRA9TVsSAnZWagAA+iAP/jQgJwCtUrgHjQ/vgcFC\nYU/F9Agfm2X/DU02z5Q7RjQYRGexsHI+ysv8YWbAC7o+Xw2boMT7AWwM729X\nS2DSp8rPfWh2NpYZwo+yRNPGCPaSFP3IV2hF+paOb3EcBDOcuXDs5srQXVfx\nBb1enGBvaGx/nmiZyqZmLPW7o+vUFA6Z7PoDsSvne8fNure8MV/gDe5KhSuS\nFE97VFDW+9gOeyT3YX5bpTfXENQELUmNxATBquN28T3dJNHAkCSG0nSdRP2T\n625JQ65PeQ8EN/2Xhq4Ixs0g1L8Kqi67YEcLTAVVqGENYiwjVtzhDzKYF3UG\njjgye9LoGGg7SRAxEm9lfHDoWAbMxvPhPQAAs3i3chZwpeTkkIlMsJqcnKjl\n6pBcxXAbtt4VzevOqyw9iL0Cc/gdNPvJNe6xCZh1N6tOGOiOMm96nyUJR7Vj\nF+oqy8xHtbFQKHf7oVHoHf1sCWWn8XZZyDCKX07FRLndNgMegSctA+LA4ves\nW2NkuLjaSgpFExtj0jOu4XDoFCWJ+AMfr140KS5f7euuMOJkr8Pjud4jYOLX\n1d0mg4FbVOvfTcLSd3DJCPuQaFI5S+0iGxHPJhyoszoTHYrqy2YbJv+4oXIP\nLExgZJTEu9K2sWLW4D4+i4+fqVn7SQPhIPRWihoFVpo1SQwnXesiqGPnOCb7\nI5pi\r\n=YPeF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a158835b"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a158835b_1548196974682_0.24986308050994266","host":"s3://npm-registry-packages"}},"2.2.0-alpha.031b4784":{"name":"primer-forms","version":"2.2.0-alpha.031b4784","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.031b4784","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"76cba5a2ab49303a6b0df0d33f54af1d72db78ba","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.031b4784.tgz","fileCount":12,"integrity":"sha512-L57EHUBM/SAWZnok9xEYsTMV8JlnXE/6K+P312mqrelfJ/6CDAS8aupdw30gaHgmLD+sK2JAYi3zv472/7N5Ng==","signatures":[{"sig":"MEYCIQDB0eldY5UTNfhA6fcFNmXDxPWC79G+gamdctTReymL0wIhAMGmtRThRK7Vxtt8mHCZ9/0ZpMD1yg8VCKCV/qSgxMF2","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5z+CRA9TVsSAnZWagAAj9gP/0/OzYmeWbKbf5KJIGkC\npAb5/Qetr2gAdXw6RuudcmeNglxZtd8CwWo/Hf2o1gmlLfPDEh2kqkccyLey\nCrCirR7Vh4w0LLj2EzaVQ0d4gjVVTo6BGzsWyY+SIAWbVZjtBKWJgeHvZ6mQ\nAx6Bl5i6B5S7VgMyUFt0UcCNbq4+JLXs1s/Y6+HTu2vF2jkwnp/NWaQ39FZ0\nFE6YF6iKgJTNFvq0tExw0ElvwbKbqynzKLyrGPk5NxeD++VxRRRtCLrnyPaM\n2KyqMGri8VabrQAjQIpLkq/w44eHtphDzJjDbHA4Ibb67VOAsQoAEB1ucmG1\nDkb4Cq355q/W3pHlDM483cokiHG8p0g19Uj7I7hP9skVywcRo5P3vTQjR1OP\nCqMgiTpdnaLVmC3HKulwMIagvSKMXFWuN9DnLwanxJ53eUXnhRPRipMusC4e\n0NJ9s8swPvLXCBDucn7IDbTJXDdhQwAFzNVdyc9hMYViys7Jsr7lBrymGeI1\nb06eWAZ0xVdYJomnEq9W8nx996RtoFv2u6Jf9udPDrfO6sC9jFPcgNoYFQwC\n1YmgzqGxjvwG/CK0uE0mqxaEaixaVvCWqKYCcYnRsKpPMV8XraCQkxOthv21\nQIc6fSXGGpvVSsEgo0v4NNUDsRlO58qLVp9xHJmHcgLJ1nGVLl2Wj9usyUQO\n9Pr3\r\n=KgvG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.031b4784"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.031b4784_1548197117979_0.02312963390515055","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a5b2d418":{"name":"primer-forms","version":"2.2.0-alpha.a5b2d418","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a5b2d418","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"fa074f074b020784cb1e0cde93409d5a78a0fc59","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a5b2d418.tgz","fileCount":12,"integrity":"sha512-0AnuDTVp+9V37a9HWRVrw33hkhE2ySuXeenZ1j8Q+jBf/j9I86DnyDgLYZziWcFgO2UWQeSwF4SRoWsUylB0tg==","signatures":[{"sig":"MEQCIF2KECrGUQnNDKp2MwSQD54A8NnA63jb7An6bdXcDwT0AiBJLF1imflhgHRN4s/Jflhav9qyIZAxxbIebs4sS4Dhhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR51NCRA9TVsSAnZWagAA2BQP/jby7Ic5mta5p9zBHGrY\nkRpllA2dnKhngVn2TseZsBICnxLv2IbOeYKW87nKALY8Lgw6cLHPMkdIa4cC\nbilZ+ymOWe1gfykqTn0hP9oimF3H3FhHhiJRMGKZ+/kLr9otXH9Ny0w/9fd2\nFLKajpHxs/6u/x+vwvgR79xITUOmXee72sAm+4+cLVhQjGMugMG7fXh8SZQp\nniS6a7IepOt66yRnB4vCrjzQcTnBErxUffMOr5ECm/tn1JLafWJImvuzQIru\nhIPOxGeOcS/N3424DkRR/Fkpk4YTQZrRTYoYm6okiwwdlbeBBknLYroYIcyN\ntoa2DoGVEsbYikuX1InKdFnCNCi+JSEbDUzeQprLIyNZo7Tia1swtql+YVc1\npcxXwYUojRJyj/U1UY5lMkPdFKSnIAY9Vtyz069rtV1ixWo0Tm0BRpmsJV/Q\nBSVNHZX+bD52zY4XcGFmaGlGq0B2yKmRZcMzk3qMUp3eK+mx0LAx2SFgiphQ\nh2fveV1jYS1bCCGbvtwZ9iKFJVMo6bHV1tQlAiyCzQ78pVofSMQV30pwjqVS\nI1xQFSmoB6VkamrnQaXBIzfMstKzWkuH3jkxPc2TjEuw93XuA58V1ywTNiXp\nMoJyf5Q/m3FqRiG38EjQz2vDTAnCjvlSfbXMGFzJP/OzYYP91aVwWgG/NZaM\nnJ5X\r\n=Ixrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a5b2d418"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a5b2d418_1548197197021_0.20474967119006648","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2507e037":{"name":"primer-forms","version":"2.2.0-alpha.2507e037","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2507e037","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"48fd28b2bf1d131a9a4ebd20f7c36c3edcff41a1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2507e037.tgz","fileCount":12,"integrity":"sha512-pbNJ4oJN9u5Z4Dp8YzJPIZp5n0zJDgFFkKYRPvQim/75kK++r8ANpV1J1TU6GL+Y3QSdExcTh10rGaw5iEm8jg==","signatures":[{"sig":"MEUCIB1jBTsUvt1Go49HCu7vDft6P4uEmmDkfb8p7vSJZF7fAiEAhQIWFK1uXZkLwdHZ1Bcwm8rqGGVuETrpSTPv7pxZx2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR52pCRA9TVsSAnZWagAAMi0P/3WCEA8gCiSy+iv4GvuW\nG+HUzpkZ988qM3VkAZkbTq6u0Sm9fQWJvlpxlb2qGt9lswtXWTxlH5e16Cq1\niPL3ekATvU6yKx0Z8N68XFFKsqxrCFbjU9iTKsUrF2M+YFWYDEDV6Ne9dmtE\nZ9/kerC0J2fXIBMkaMmEd45sJY/2X95Fj6bRzSrNj1ZrVpd+gazV+kQ5zDQR\nrl+SJ4VSkhcMFOzgyYAGIlPn4+PySYXNtUxh8CEXXwcSXJWOdoYJ3LeLfZGe\nydgBCBdHqjupOR74VKzd2sZKMWQqj9drt38aAxQHleN44wt4cPjRJRDdfYVf\nMZ6Q64aXjvLOZ+4of83zXOParKpc2RN012znqZZvmBLU/bsIFjCSFeLPTM47\nLb8rzqTxgjVNz+glfyJX6tWZFkVDjNlyk/+QfSWNwDxgCf/j9/Fe3vFUP+hq\nGClSoAiqxgToPTYoCVH1VRnO81Qv8Jj03peDOVL57UTCpwvp9YiT/IMZkYFj\n8a7x2Ux+zDQYdSMBdrjxop4E5Owc8ANg/oxq/mOrbCY/ptAntH0j5Qa9sO6Z\naVyF0hYt/Y1Ss7UEQCSF5VSANWH8/WXIHt5NbFVuCdXJJWJUxcE+fq2ZPXur\noerxFxBMuY9mVfalkANAl6jkg6fQwJUc2IP5QqS1oPMQvXShyojgv/bM/yHR\n16nY\r\n=vxu9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2507e037"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2507e037_1548197289131_0.08072763851059817","host":"s3://npm-registry-packages"}},"2.2.0-alpha.333ee702":{"name":"primer-forms","version":"2.2.0-alpha.333ee702","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.333ee702","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1ea9c36347f0d695af5f72a979f1b5e43a864c3b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.333ee702.tgz","fileCount":12,"integrity":"sha512-dgTMINbmr+8kp/KOv53Md+rAiyBvkbSlDVLTEOMR2CYBaRIq3TjcCY6Bf/FEDLoqm08rZl74NmdB2nU59AII4g==","signatures":[{"sig":"MEUCIHgKCUbAiOJc1SX/5BVWddLKjQFoBQlmELJQIRuxQF6OAiEA813RSJDNQGfnrqhNh2kYm08ww77Z3p1ywmxtdPJRcdU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5+wCRA9TVsSAnZWagAAeCYP/js8uSauFTN6sH+7BMhf\ntemjfiQMr7jDV0NlgZzzjsfuAL03iV0m0MZe/ZkDvth5Ip+UAxCfUB2AZff4\nyd1u53FAe56/2tysJTLLziX2io69F6dBLfUui2L+BVqePJaK/R2sVCSkZ3Yh\naYNvhot7Y075CatFkbxD7GCN4jefkxcrZt2ZySFWtgHugye/c7VBiPvlFmsw\no0dolG6EPv/5aEX2jubddWzQFQ+XComnXgB39u0ZGR0qopnhAnPWlLIt9W2m\nw6bWacs6W92UsBy4KmQU8gTmMknRxB6RDSydxe+5hWd+ACM5dSl1VyhuFc7C\nFjBnkGFrphhbtliNO6m+0kGutHoVA0VPQ4ZSqCF5MdhojToGPwJoJrRKZ90+\nHUFsb8lZF0c/qrYkKguD6Lycpm0n3Ynql2VOgRaYBhh+I/Jj4OgmfA38jOKY\ndpy0WXtZ16/tztzEUG236LhrZuhRBc5eaSPeg9tzB7XZ/25C3wkEGp+3H9Ow\nxVfTAgZRel3cy1FYaxFIFwORoha4yw5NmMVGas/7mziSSZiljfwsX5ou9jXI\nLbGG4uyAC5gFp5nrktLUxXKpnjKYSzBo949LAz5ZgQjkgqY9rYfMxXLElNKa\nKd9xEMmVYNmfJsx6KxWoBbtEpLUf1m6+ZCNWzi0/nizSMPwqyhQWjkSPdB3r\nbeaR\r\n=akwr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.333ee702"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.333ee702_1548197808305_0.8279852789329616","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5b896e00":{"name":"primer-forms","version":"2.2.0-alpha.5b896e00","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5b896e00","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"50c38801edd5966532980d99ae22a5c644f5dc34","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5b896e00.tgz","fileCount":12,"integrity":"sha512-JBRcepYm/FZgyyeaq9BMcLZ+qrxMdzI2o/jFg1/lVgSv8SetviYTAPlAc+a6QL7skpcK7DjojBwAVkEiwZlcxg==","signatures":[{"sig":"MEYCIQD/6kFB0T2aHX1Ap1RDonszXKVRHSZPY1TsmEMggrt0/QIhAMQ9fYjg+DY06ENOFEj0QWoMCueue9ynuPB9CC14Xk7h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6AVCRA9TVsSAnZWagAAbpgP/RpU7r45xJHirwypugHR\nG6tYg8aynzeFFol5RqyATVaW3vNqar301OSawn1GRr8VEUYzBKnbOuHVIfNh\n/ASKKpzVW8TRWqakZbZwgk6SehKn5mwqqN15DBjzAxlStwRD1bqmu24KjpSr\nrYP42hLj5DkF4V94Q8GCqsljWeNkNUOCFqll2Pf3C0vtWPuHU+M7bklsic+g\nfZyi3ej31NI1HobhtbxC8aYCxIOR1hRdsiuTUK9RoFM9L9ZdCI6pDpOk0VKK\nU891XD2UvGOGBOZ7LqhsEWufgk0u138TumMdd8Aa2w/+2ixTlF9WH4LZGLT7\nIJaQ/l32gvf+QKzQN/tVZ95/YDIv5WZqvyRTvzdJLwg9vykYOy+l3KqPM69C\nEXmke9huLXPhTzzYWDwrxmlu68KlV5Thm58gTfEpzRpuZTv/KzwY3uQTpu6S\nt3D6zD6ELIVeSYMN13yrn1qK1z50foew8S7BeiXYpYOnz0EpT3V6MTZvCedG\nysSsyHWMQDsKz1M0zKKcUaNXzbKbQ5hkbN9P6E8MWiMigMIIRBg3bEaqWUnD\n3GcV2dF0kHLuODrHtnrsZ9MJy/fnNuSTQu2AuXoIkTlLIcVBJKJaGDnvADQI\nUIc5QA1vKEVaIWKX2DeD31v8Nai+nmgJ5+gh2NGltz5oCF0+aCbS61WJBN0I\nN+1e\r\n=kL2O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5b896e00"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5b896e00_1548197908840_0.7921301179991558","host":"s3://npm-registry-packages"}},"2.2.0-alpha.ef822821":{"name":"primer-forms","version":"2.2.0-alpha.ef822821","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.ef822821","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"00606e1476683f4aa173a79ea656a586e0ffeb3f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.ef822821.tgz","fileCount":12,"integrity":"sha512-dBP42kBT5lhU2KXawiFBoe0HF9+wfQFx08VD3+nasxT++IEFGU8VDthAN+gbDIs5dmUqQtdtzEcWP9ghr6j6kQ==","signatures":[{"sig":"MEQCIH/uVEYAkjBKyydBKcCp+oD/cNH8Uc8OP9VsEYtSw46dAiBmxKhXIRO3ilkEQFymkG0TFpbUoi38790ve7uG5ovymQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6K0CRA9TVsSAnZWagAADDwP/14F+If5CtW5g1d+IVQk\nB1kCjUDMPWYBqlqn8QbVo4HTJrPS2hQd8bWbdX5puIovahNj8CA5mtDqGPX+\ncAobXxwwAE3xZljT4q/+03vjMaksBkCQP9LtZw7BNLSyh8KrN7eePaBjgMkK\njHTUDTGkEKFu3juKiDyy1SMQYiACntNOWwjvZIXNSUERZkDY6bNbttYG+cmO\nRSJX88AlMmvU5hiU5bGqwGOU6cbvPD0oQkXdAFpbpEwNxluQHtzfB+m1XHjt\nuGZMQNogpogI3N+5feob6bsY5+vSLh83mvJLy4sVvpgKxaxcMnlnewTNkU7H\nu0M2StqN6pQxMAqEBu7NdB+ujmnpm2ItM9E/DVPj0CptaIWwSMbU2p/2T4NS\nwVEaGDBPrUu9wGpdsQBzFlYDedHLFxcPz9n9P2fn4Zmc8DzJ1tCoXsx1c0C8\nEc09ijZSjME0WBb16i5lQafcoIh8Rbk2JgprfEvZFNs1zPKFx8t1IC+Pgurw\n+XZcvrwmQ+EJtypa1AMLwyuJxKXAUbB4hLEFgQ49KYpRAYjzKUk4KBKCdVGS\neyyrOzRunolzDEVn0RLG0FKW0Rs1WldajBLiMJ240R9T7hNCwoXFk0KgH6Px\ndKIIGnqUAYOo1I3cN8/V16DW5MdXwSZKND69JDHvmV5lFpoMWyASEpc6srPY\n3eKw\r\n=/13K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.ef822821"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.ef822821_1548198580051_0.285526590911235","host":"s3://npm-registry-packages"}},"2.2.0-alpha.fbc5fb3f":{"name":"primer-forms","version":"2.2.0-alpha.fbc5fb3f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.fbc5fb3f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2ddbdaad2b823880f07fdc1e979ce2c657ec93d7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.fbc5fb3f.tgz","fileCount":12,"integrity":"sha512-x0jOveNoAvFW3gXMKx4aDBPI+R6ugyazzRNGObrdI/V8awAjto/p6HafQ8tnRpZA9MLmyieJrc371kXgX2hobw==","signatures":[{"sig":"MEQCH2MdPYbC7oqh5YfW+9mgPdI3ks48PSaTPQe9V4WEagsCIQDU9zsuboAomGfGkMyQUyGUm3X8IiTwPnv9TmVGPoOJGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6ORCRA9TVsSAnZWagAAYlgQAJ/LDbkN5e7ETykuSnZS\nbK4rGD2tv4dufKve903tZRE/vdtxeMq8h1s/MotH1NKdw+Y/bE34GsH3Us//\nYCaMd6ilarB0oqia9jaUQoa96JYPJgbFpMfIUQB5+MnT5nNj5b80vAyEQHTt\nMUgaNxdR1fd+J8/AvpfZPwCHzld/cY7XzCtKmFahrsQJdB5IN+xRyKmwQkja\nW6kmJxghHUnWQ0oQGFSe8isuWVGlQGJMKCKxE9cE5ZvcJFY6eTXAbcKlRv6x\nKCOdZ/Nbcofc0IxMxvbtz+eC3m3IJOkeYIqd5ml17XcLJd5+YvcA1v7XDtaR\nL5Cs6lZXBCJp7E47besankw9z3m355AbxKvA1a5bmL1xoq3YuX5dEIAIJPSx\nDFx/nXb7rpW/wxbq22cSyGDYZP4xXp2mrWMNBbXWko6EfZka2xEs6L+iVORX\nVSCc7+4nAC+Yqm94OKL+JyuWft/iazhmkk+5OdK4MzwzfrgfGpOr5BPU/abu\nISNMn5y013iF2Httjjx0bTynCJFrjBZhWOL0MLo5eKov59E6wQwctq512UwX\nTNMFgAlHHtzR1LvSwonh4JdXSDpgsyuwS0SwnuONpa0l+kia29m+ucYfR0Bp\n2Dqs2K0RnDOAHJpAyh82Acbqz5UP/jmfheAkuoPS06Px1WBxUWujCjiOXTat\n15+U\r\n=iRIb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.fbc5fb3f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.fbc5fb3f_1548198800465_0.4752990467758551","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2ccb67f5":{"name":"primer-forms","version":"2.2.0-alpha.2ccb67f5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2ccb67f5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"33776098b6f8322815fc11b08de4a445c3619099","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2ccb67f5.tgz","fileCount":12,"integrity":"sha512-JaWheK54W/AzBcNtz8u3gz5hYA0JQvx8Qs8q8LHtbnwrfgbBxmjLpMboYtAV8OM1t6cJC2BYciyhUv06KdpBLg==","signatures":[{"sig":"MEYCIQCLDZVwzkw1qgoAd7OMS65navZCggI1CdKwkxKdlNziHgIhAMdS70c0Q1FZNGtrJLbIx1F3uNCFuML3eIPDz3aAsuP8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6czCRA9TVsSAnZWagAAMk4P/jipwoP8dm5sB11JAza/\nA3zPO7SXSBzP5gErPEJBqTt5V/slfAKUGLeB/1F+CzOsVf3hfhn+Yq8mATas\n3gYh6wQxC9nYPWjxgFQQIl3Pk54fr25vJMMhbDPikgo9ChxhDXzJn0mPFwOP\nkMq8M6q4wNrET5vm3tmWtLzfgO+dBxkWk8UdolCV8HU+iuLhtKqU5eYPFoAq\nOokORiMExMQXfPwAuINhEqQOq2rP31mTb7UC3JaOS8yuEAzHC3Dt24uP92E1\n7WcIA3cXbgpNJghQ7hUeM8RUiURfbJaAU2yTBJ8Ec/D0dTtoT4NaKLUiPLJt\nf7YFbkrAx23KS5r/A05dI0xXItB66zUEOX1va+hwmqRisuTtLYtHA6KFqtU8\naVd4JSerle16JMG2uJbyik6A6xRqricXlJzLDD1SmWPV0vKOH4IkHOBPhYL+\nhhwu8a8FNFh5gtfu6HNZZzTCrT/+KZSxqFL85I6P489+PfU9F7YtGrUuqEoJ\n89b75a4fbuNDBgLqdkuswEwPgHJnFLnfDgc7V64M8JZwV0FHVG1Y2xJt2AZZ\nmLmIdEE0IyJ7u4r96UogdMbQmTtjZ0gXiRrfvE9WF/DPfv1L4VUOct5FNrfw\nwCDFVMGLNIN111Kn6MalVsVldyNQiediuwlfR7poQbmRNcWHc9UZx6SNYz2g\nvTGp\r\n=gT54\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2ccb67f5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2ccb67f5_1548199730683_0.5137678372924428","host":"s3://npm-registry-packages"}},"2.2.0-alpha.12b798b8":{"name":"primer-forms","version":"2.2.0-alpha.12b798b8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.12b798b8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6c30dbdd6074964b6e17f4dc95d2b81955294310","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.12b798b8.tgz","fileCount":12,"integrity":"sha512-Q5a5N3K47BoR82ZzRz5O4svbVM0xtG8XmK+lTLDed3qcvOz0+9cBVisn4h0ZGgFK5++68qexe8izBAj+gDqWyg==","signatures":[{"sig":"MEQCIEVcq/2R8K++U9lzS88MaFxhzoXBL7GGVzl3VETDh6ilAiBnA14ypLy4wg+UYyIQ7+Mn0ilGgRvKtmde0l1RpiMW3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6mECRA9TVsSAnZWagAAHfMP+QDwl85vA5uIEnAot0Ce\nDQJscH7EBfYWALyqvKEUDr8XYBE+DEJvjwamJ5QrRN0EIjKuUb2T3iLCcNqO\nhzxVLWnCcWxmxzGuketGQ7vGK6t+Lf/AnXVka9zvJsUYzmPD4dzkeMgzUzhq\nztXwa0HPHq442TsztddUI/0MdvJ2tBD/dtQzmY7XnBpatT/U7+l1w/OD6foV\n3zRHGV/TKWG/ydkHR7jaHGgF7Xuzc+UAJE9hIwRKPQczvz13v7TfJl9lx52K\nSRMNR/ZE9LS/bwu8glkXWn9bCNo41CmoTnZwTTllnIAR8/fSPkQbWrUbSRLK\n05nKRXcdSsFwNmjdCbSysYLS28CNzgjujqKHz3j17scf9KcpxWdZzU/Ao3pk\nv3Vp/5Fpt+yzaL+9PrfSJmQFi+2OvbvqtCUdU+T9RpNeXT1VggPqu/CCAZY1\nJCLla83pT7XdSMegeht5ZSBYJ12RyEB1ie4XcfCE87UmaslCi9qXnK6zXMTj\nHEsK1fNhG7HCfbM4OjjHna6KF7lcHCNmkXC3gjEY7UNbujr4595P5c76KLf4\nu5lOfOQJ1hXvtOzwXKgjcioPKD6p+WbFlrdID7irUGvCVnUiUr68PWXaK5gt\nYn0xwgKGF2XlVdPjhk5q6Le4r4jd3RC1xzwQAAs8ol0oWmlFT1SoT4msZlrp\nfUXB\r\n=tkXe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.12b798b8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.12b798b8_1548200323523_0.05638543277399677","host":"s3://npm-registry-packages"}},"2.2.0-alpha.0e91d9c4":{"name":"primer-forms","version":"2.2.0-alpha.0e91d9c4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.0e91d9c4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1b23743fef4166dbef742a66616c2f176a3812ea","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.0e91d9c4.tgz","fileCount":12,"integrity":"sha512-Pf2CSu0yokphlwUg15rHIAXqMblFFQdN3qKE41DpJ/7bl1vhzUI1pWVDx+mcmb59Yz6caUF+IKSwo4UUjV7Lkw==","signatures":[{"sig":"MEQCIEu47gnZXqkakwRF/uP7tWwtslbR0w5cbU6qFi8nzKRFAiBjDc/jJUGmrX8fZBinpB1n5V8LLpf6a7uJDrYvpZnfCw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR6sTCRA9TVsSAnZWagAAsKoP/RccoZKnAOHVYTbAFkvy\ng3rHJ+luXhDDJlMiukNBooZyyvv0NVL0VG585xUmaiyM1vFTxnJiNQHiSMfE\n8ouCSnx8L7cn4OJxYfE4dBrEG97nVvzMGUS5L80ZmifKeJrrqSPRg4Y1x+io\nb8rU1achqM6SYUe9ArmGCMUEPouhbLipeXNfP64vJuWzLNpiKFT6VCynbMgP\n3bC+FQgJvQE0FrsLR0Wa5PskpCyG7NJKbrKxS+FWMSQgDQjXcxocG1zlw+uh\nrVTuBX2xgqKoQ9zzvFxBzDQSHENCmyfj78uZgf6NNEROvHr7piQkrIQ2UDUm\nvsszlLxMJmbyzEarcwyAqstRqjJ1cwHhRids6fV+cUzBk+u7zoGgBeUi4rfO\n2gfI0oiKY06HAwZBvCvY9GMxI2jLnJwiF8/F4eQDHHnswve5NKTHyK62hACm\n+LjAj0Sbec3fTtZRrRa7mBB/wvoaWjVBY//Bc9ogvQUUYsvr4Cm6pC75k/Pp\nueZGFdtXd+ACZvxXul2QeaiWKEqvb0Xmj1ZFXYIGoVmSpwEPxKOGUcoEQ0Jp\ne8KkjpMhWsilSI7dHcjE1PBpP5Xxmf6ca7VUkacRR36hoDFHSLtdT2LOw63l\nT+K934V3xYky4Di5wLZl7UTT9kJ4g4ulLyHVy/cODSXrQVug4Ba3Rp0XYfcv\nnU03\r\n=uUnq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.0e91d9c4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.0e91d9c4_1548200722619_0.606319997863298","host":"s3://npm-registry-packages"}},"2.2.0-alpha.9d5ddbae":{"name":"primer-forms","version":"2.2.0-alpha.9d5ddbae","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.9d5ddbae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8297b3f7e4c3d8201bb2a073415dd9d12b3bac44","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.9d5ddbae.tgz","fileCount":12,"integrity":"sha512-oYxK47GwBjw9j0evpcaLjg2gHXSv067JqkrlxCxJLcsig1tO2De+5s2vhDRs7+VuEUlD+eriRqIGub2wH8yelQ==","signatures":[{"sig":"MEQCIH0KZDC4WI2e79R0NU/biuYmgCv6wmXX0qqOa0iwX03SAiAXMcGFrh8iu4rtJc3lkiZUUrk1QrPIiL4TrH2+ExCf7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7OmCRA9TVsSAnZWagAASkcP/iPNwj6tO1Wh/7X7rZWw\nrktzM+OqPvISEEwZ9+U/LbW6NOWQB2f5NEo58hbqV6HVVx3wd3LZ6bPNWIzE\nfm/QGGUXnD5qhBllUwGDqDc4+wmKUEzdZYlCw2xcFEfjuZ1L+8ALjO3v8Wd2\n8HByoqJYjpdkyxpfbgwsPckSCJh7KUc1vFcQIWA8OmSOsFcJDDDGQgT9g0wv\nhh66Hc7QD40T4QP3txgAuRy/2cQJvjrzZvhNaGr7IE8R02Dv3syMmdfMQx5g\n87WedyUc/rED4tIKc/9ixWDLIzG/ZrppxDmQFRHFGRYs/KvpaMwyDZLXivlo\npF6htANRoPw5z/P48hgn2DfuQcMNmDiKb33VyWTB9ZYUu1wbTHTuTjGPWJMP\ndiwsZ0lB29CCoi95Kbz2dbA2zoXwZoZV39X8WGxcJAzSM4OS7BCnjNv1/AqL\nzDp5O7qbpiaFmIAMWBZ6usTPKIIA/knNWjk9RycQEgeR8SuYhuEl2WaYS+mi\n42C8BybqJTNTYLplA8Q3mjN7H5/lPa4lvOSMGstKpAU1H5T/R9qHEvAxOA0U\nHX5DVcVsjfWZpjxvSi+kQAJXhQ0/GX3BFsKeYLWWEb4LqyAeuCqfZQRfSRuu\nC2yyYLEO0EmDWFQnz5PTnph9H49TGEml5KyY9dSTYKNobJ9ughJocTp+YObA\n7npl\r\n=XIne\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.9d5ddbae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.9d5ddbae_1548202917686_0.1148214105023182","host":"s3://npm-registry-packages"}},"2.2.0-alpha.d8e36290":{"name":"primer-forms","version":"2.2.0-alpha.d8e36290","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.d8e36290","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"57785c290dcbcfe7bac42c97c3bec6ebf83ee523","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.d8e36290.tgz","fileCount":12,"integrity":"sha512-ZqdYEMvJcYkl8LxsRTSTvp5J2fSbp+mFT90hmS6jGVE+vsVgcTatYbzyME7pAXMCZ5K2aZVPiI5XB/vpD3Ganw==","signatures":[{"sig":"MEQCIEVnTf8nRPalplKnIvMN4hUI1vk5PPm83YLay21W91hnAiBtfHTkVBJkWjEhxaWszaV1vntaFKIbN9SNSNgW/4ORYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7QTCRA9TVsSAnZWagAAo18P/0OATr5y/1bJK+rzstLF\nBV6b1iMq98TINNAJRR6YvqCbbzZmRkUW7sGenaOd4g8CE8UsKYho27bfMdvX\nPmqFFIzg2u85b6ICC9oR9EWrVWdGTEK/vgTe0kLKOgSD+RHtfJzItGjJ36M2\nzT4vsuWCkrA8dcY8ukbD0zLiQGx0cx+0+lLXMhCKHkmBYarYVfHSCW4QAzau\nzMfdmTZMApI4X1TR5af8kwRLz4i6VcqHw2YhuhQ4dmUYiVvyOTIUN9vyyQHt\ncux+KDfenIUM0Mlej++Kh+qYkqaM7Ybor2RfWHxkga4+GE0LHa2x4xgj+aNm\nDs+imnSTU0XDs9tL4D4nD1caYAO9O2CSHKLP/Z1mGlWbdOWsK/+0OBN1y2p2\ngCIn/s9nq8edrgdlxejmqvhXOBWngf936bElVyP3fl4VsAND5VRxMTIcud9X\n29OAVZ7dcv4cGUsc3/QTHKx4OPOY7NCMiHnzn9I+bP6FkuKmJC9G5VLVRxtv\nyp+PsI4DoRisXMGLfgSdwZ4kV74VwmT9rpjRkZdRk3+YRTX1UaMSBsptjzyc\nHDMnqBXQXpChYz9ILlX4XO60dYRI/DxY/u3/h0xaFaFj9lyCLl+VCLw4L3es\nitwSD3kTa6e/drSjm+IW2JYB0SO5Ail9s5FK9AyAzmLXo4EDdBlfoH5GQhdf\nYcuW\r\n=Y5z5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.d8e36290"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.d8e36290_1548203026726_0.22032343314449365","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8d395281":{"name":"primer-forms","version":"2.2.0-alpha.8d395281","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8d395281","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"1eb27b41863318d4633df48b13d913195c2cbe46","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8d395281.tgz","fileCount":12,"integrity":"sha512-3R/DGlka1SRlHq+cBgWL4tsNKN8t5b6Ifyq508peEJy9TtpDITsRqo0kL/ZWeBC/DC5vuqjsV36LINJ+5lNQVg==","signatures":[{"sig":"MEUCIQCo8dtrtHGZc6M36U3ld/px6TdheEhRT+jqark/s2KRygIgbgZZx5QCeN4D7I1uDyOIAbHJ6EgKRiwJSXyuFqejJHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR7SOCRA9TVsSAnZWagAAS74P/09pN+jO7AF9Pub3FZxy\nSOxiOuFqYxOMoKUDmCtutLzuon6OjyKzKe0yINnZMZypP2xKJH40SGSt+MBm\n9HksEYwAxsfw6Nt/Tt14IHmfQnhRvMMBLXIqxfDnqUbfBhkWDafqWFSp3ITl\na7RRHamc+Iog9S6thqvWMP9u0rds/ZrJAvf/e507oJ7yxW1Y4HTJY5iuWmhj\nDIL0kBEm9GoaUAYKbloF8WRn24n2VBXiN5zQKmXcxde50OiWsQBc66maWSQk\nrlBgZAuHVxVzJOAH17NGrP/K+mYdRpmQYwzsPhNGHfhRvt5sJR4xDR9D0zDO\nHPSpqXVbpKyUNevGfN00+4RTTv4C9TkXLiueN75XR6jTV1q4qX4P2m6iUtrd\n7ehrORvZ6T27V3Rg+f42U1k1uzitxgdZcmoEy04/eTIHLLOFZyBJwe5pjWWD\nNCRr9A6zU6T0uZ7o2uB4knLuXf4QcJXIvkdlGuiTCfSnDyJgAu1UWWpkUDYs\ndoRHzhWSvxvhT8n7cZFkJJep0TFxM8OGfH1A+CXHc24b2jVLpoaCQGApLDZO\n4L5nZmVhAia9cc4EINojjz07ebyLWZq3u2KaNowYUUgvggkIVIL/Pwap1ldY\n5Sg3khDLj4W+NMXpoSymyzjyd9d7/wQXjVhlZDVBiVnDubvwUEJd56bacIJ7\nHYkX\r\n=FSvR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d395281"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8d395281_1548203150161_0.7277943035185406","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7e8b2dae":{"name":"primer-forms","version":"2.2.0-alpha.7e8b2dae","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7e8b2dae","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"6a96c5954374e4c44650c6b8adfad612ae007c38","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7e8b2dae.tgz","fileCount":12,"integrity":"sha512-LP/P9jZrdzMAkRD5Dxc8AlP5qyNSzTWXueoDG2G31jKI26sPFSUFNDUnTny56pHtRax2GDo5+GIOarSyyXJEdg==","signatures":[{"sig":"MEQCIBdWV7duV78TMF669qZv74C2wQXE8a8YUT1Hq9Xx42UfAiAqL/69efSdCY7MtG+7P5opFwrn+W2Q6BmlF5s/CqFTrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR/SzCRA9TVsSAnZWagAAp2YP/0Lymkqu1eTwPiItvaHB\nfPMqWy3zfvFjczJphwX6K92p3xiznDrDWANddxOX4SE5gdq7LoPAshh8MsYx\nidt/rUnRANTJtq79qdkPk+7QaA9AK1IHcMO+fwIGUW+SfSrRbereH7MFM63W\n01SycYrptZL1RC/FPr6l1SO13aYJmAaL6nGfh+Vt9smzgAzDDkBa+edkHbfW\nNFztsP8yPkhORBCPGRgYj5gQbyVz7yZzkMrTrUTbEDVPdQnvJv3UKwQl5aLx\nfSYw/nMEJyUkpqUBNoFkyaw+pgNPlCdNWvc2+is+EbgEX3WBSD2LqvdX4t7k\ncdliy3czeg5SB6TXG8JZonxzMQEf25npUaQmxUUWP3X2jhLK0L9qt1s8mqID\n3DuEnYKfFUHSYmRrr0kuw5hTerI207zHDMJeNTmTXSuu0Wjc5RTk5POz7rJd\noGKbr6tYHSOKtRUcPdS68PizB+sMlSqHbTcxNkyjiIUc28EXLGvHTB7Whkjt\neS0aafriAx/cDJchmRhV490gauBDDzzo09HeG1nh1kfZpXsqssp5KX3TH6UI\nyc6ynUS3yy7dvIcHEegEd+ojTSH8fIC7f4p80tfWRIEhYo1FwadWoEUs67jT\nd0+XS/u797Gf6H35fwyN23TPQPQUMTZL+b9qDOlFW5Iqx7ywZ7PzAxxb3Toc\ni0tB\r\n=PF1J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7e8b2dae"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7e8b2dae_1548219570926_0.25245456317188975","host":"s3://npm-registry-packages"}},"2.2.0-alpha.113894c2":{"name":"primer-forms","version":"2.2.0-alpha.113894c2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.113894c2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"68fef8e5476607f7d5ae652423b43fa67d277782","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.113894c2.tgz","fileCount":12,"integrity":"sha512-q/zOjrVxAo9TboNQFv91HB5af+VswzLfyfPND4hWk95audLu+0tZhA4JOoUp4H8/bLUuES3GSWApK5uOFFrQYA==","signatures":[{"sig":"MEQCIByexqBGt+DfOc41dE8T8IC/6IegQX47pL14B0VCHugeAiBIlh0VWRoT33JFUVswgkz4BCBvvRvg6FLzesnSilhbUQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR/acCRA9TVsSAnZWagAAnngP/j8YswIEIV3ELLUvpWE5\nUUNujt+4hUejfmg3ELjEfrzcpM1QhTltNlu16y7qtD/QUQfL6WG8k/HbM2jD\nQ+Kdm8WcAytJr8v5sr8wLe2/nECGKYc6v7jzcOcU450mb5mRqmvo63SfcZOK\ncuDxJCwaXcFrX4nhFZzKzJccB0SP75edOuAmfsH7dDf1UjspTOectNU2b1dJ\nonntVrnA2HCJb6g3ShtWBxsRzazW9rtV78frT1H+BhCIkoWTxGbD67i7sRHO\naB9I8JPQ9lL8WdT9JL2NjOtJ7iUPRno7bqt7xcIvLtgKTK5USrb0NdUEC1V1\nabr3kfbvcOGqLgXf4y0mXZ6RzJqcaWgTlifS4DNeAgX2jnExO8HnV2dknueX\npX59jYQljis3uw9B6QlAztdBkohnUZKsHxUunEce049l1xingN0EurjQkR/I\ns5R9mzkAwhkg9ED0eMFsZ1JpnWKSsoTlghY3bsx+nDa2DPhiV7Q34L3NSOfq\n6zQTnIFuQqdDi5hJJJ70Z5rq88J6pYHlV02qswW2C53PSQKUZVAwYSf1h0zo\n41Ip1Sctxvh21HP96G75byS6j4swqxH635+T0FKT+BaD/FFaUpZdeOAxjEnc\n/aM9CqvjG3YbHOJXIR8/N9fC/Gm63XNov8YhzEE0S9t956y+hzC9mwMuCi9m\nPrtq\r\n=aLn+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.113894c2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.113894c2_1548220059535_0.7208133765931171","host":"s3://npm-registry-packages"}},"2.2.0-alpha.12076a07":{"name":"primer-forms","version":"2.2.0-alpha.12076a07","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.12076a07","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bdbc4848fabcdc85181e9076a907d3e6ba8474f0","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.12076a07.tgz","fileCount":12,"integrity":"sha512-PnC3FKq+hsAoPi+lzIKGuaLanwqD5qq858qDIXWclp8e12gk2hOWAI8hRB8+X042YpKeFBMN1beztxDlLuYVkw==","signatures":[{"sig":"MEUCIQCc/34zvco7iqhuFEYYpZzyxs4fKRi4QCXbWFvSzJPkdQIgaX4nMlxPvIubCo7Hjxvw7f+HaofEEsfbQPAIC6E3veE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR//NCRA9TVsSAnZWagAAC4sQAJ+bAf31PH63LdkPO4ii\nv29eKfqMcrrAE1oGY4uMRrVc8J0shw0AME15NrDcFdzFaVpSnwmfoOOT9lle\nNnVgP1A/CM+05piLoDcluRx7OPl5FvaFy+JwtGCHN9/ZIUe4o/uVoIO+ooKD\nIKCdY1B5+egRPRDVeLJ9isYbRhNkJu1T9jT1HRFpaHO9YUQQtRuxo7sz6kHK\nHdaEm5aaIYyo9nC7Zjiu+JqV0elZmSxHbUCp5UPS16Sk40cZNPMvkhQxF5Qc\nCAQsk5E+1ht+K70xp3Wdqk7VNI4sfr5XISxptfM/JruzMEtOBlPSj9jVxExR\nRhvNW+jWUdWA5hK1vAExFdbA7RVFaH5MA4uYngwGI0bTdzCN3j29MORk9ICi\n81fOzVik+S78ZGscOVvoHkzC6Pn7d+krkHcSta7/jKx2X110d8pcwQPUE6WF\na9BF+8srPh2U1T3UCXO5E2WPS4cVYc+xbDDkvsLhgDyDJzSS0OjgBAzCCCZa\ngYoLqCpG4eoyQwc5h6gZa3benQtaxowNVmJSDdXwMIrzYAoBc7Qcg44fDw5/\nTg14EVA9hoVCn4Hfdc4CsK9G98Ej6t2Pogunpao5qWQlKVBTO9PpR+MzLV/6\nJbNcPdq064RrqtM2CUSdB59t5RzlpwD//6MEwtMcH6VhqZNAJQLzYnXUm0/Q\nekTx\r\n=Qq6d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.12076a07"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.12076a07_1548222412747_0.13726745871428347","host":"s3://npm-registry-packages"}},"2.2.0-alpha.33d1cca1":{"name":"primer-forms","version":"2.2.0-alpha.33d1cca1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.33d1cca1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"5e10652be8940bb116d5af2cc7ef2e0e9fa228c8","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.33d1cca1.tgz","fileCount":12,"integrity":"sha512-OYP6yNoBkfyCJ8Nx3qp2VGW+KnCxsdJSMG7i/V3lL/efCViRfmOnSxK1iKs53g1vgTnQ/fvJ+qWgQRdEaRhEAw==","signatures":[{"sig":"MEQCIGP6B9R8g5Uzg/VAtIyYObp/oodx3HXtlnB1wJNgYlRYAiAE/UGpiS4UDHho/AfJM5tv1n0nQzfSqJNJJpwyuEAGIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSL7MCRA9TVsSAnZWagAAtEIP/0iGK5SCa7YuoKtv8KSW\nJ2p6f7zSOODqIKiuNZGmlu/tHqiEcCkOGKu5HtqFmQi1/1ZV1T59QOlDHxFY\nk77tY4Ov0+LrOb6wJj6T8nr9pok8Ngt7IWxHmQhAljdZmzFTKzVHaqsXiyGi\n0HNGxDPRgSG/cqiDKHBEq6VCgnNHWvxj2hsKFTTnqVpktjApiWIkjF8XdXMl\niCKMoU8pxXeDb5slTMJ5AhaaAYRGoP3RGxzjwixf95SEuDtMa3CPf0vi6Xva\nCaN8PavXwktQoN5AQme6E8HIEdWMqD25aBqhPQo1Zr4vcfhIfnnrxWES/X2h\nsMO9WLZW4J4b1Do2bIiGxhUBNAmRZ1u1ANGLRmRU9WLN0oqNdUQ1lmrwEcpo\nXiqlP4CqguYLhX4hqeUFJaaCkyuileXyykzoip93115X1NRjzyWWqEtHfPiy\ndlTfgVwkEiex2oCVz0HE39PHynsgLwOzwvGaxVb02Fx/42JO9phsFHM+e3R7\nhCGQa5YOyISw4X1KZCOLasLFQRN6WiGseK7TqHwJVpLLgcrCI3umhAsxM66N\neGn0++Ar+sulHsFR3ejYfG3OjuM3m31GhEenxykFs3XGsTEBpDCC/sFfKFtf\n5IWGyU8GfxjBk8jW2fbyT52lO381tI8C5oyVA7O8sasGg/JQsJTcg6ned5vg\nupwm\r\n=A7rc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.33d1cca1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.33d1cca1_1548271307451_0.43787740332410197","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1a7850cf":{"name":"primer-forms","version":"2.2.0-alpha.1a7850cf","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1a7850cf","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d442f7a302096013a45fef1a1fd168219cc5ffe5","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1a7850cf.tgz","fileCount":12,"integrity":"sha512-UIDaTOiJ80oiDqhYHt9Fe4P7a+KNwptxksgP25E0/Y5ZuZ/wBh1QpIKhvXzmv6COyZKCRJZ86yZ2ernYwL9AIA==","signatures":[{"sig":"MEUCIQCYfOmQ2W57eA0TxjTePbfUSzYep0JhpCEQidyp9g5WFwIgY/3Sws7p5SWGwih7A96F+aQf+EmTl+TFisZ5JjgWp1I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSMNQCRA9TVsSAnZWagAAKkMP/1XvejsMtpM30zYtm9G9\nmfrL+CcVRKxShTCrZxrTEmpNOspoaUsYTtxTtgFUWPDYjzSW1ler3LmCZ0QV\nUPWior7I/GQ1wPbOTYBqlX8fQ82fBSb23BojSCEAJ7cAfnaaXBnT2SafLgX2\nrXba4STmx3xHVQfRKNM94qFBmtve7BTuM63Tv/0GEEGkE8VUMcRm0IYWYXwo\nBV4JP7WaqyY3KR0BHm3aAAdyF5qlWM9kG50upSl0KmLv9pAZxc2Vnps6WJvT\nMZv1gBEKwX+Y8YTOQIeChCuidleARspwKky95tkw/lTzAWbq90Q0HiBWaIhB\n1jlf+EFvUz404k/VzYEyIfgIjOqfm7Z2hc+OSlfgdNhVg9mRGbQYk3xoLOwN\nmOL+pDOiULpiZCBfvlK8rB4z5fb9sVM7oH2ZQa+Y37ZR8bDD51DstcH6OCXH\nVUXd5lEKvN9abpPjSuFNRxli8EU5MUTzDY0OfO3Uqvj5qvxuxnvxnZhLB6M8\n7egcPH/COqzI1rkw7no2piSFTCjMkp7zJksEuro/o3flDQKAqgn9Sh8uswLa\nV962UtQc33eb+YLjLlCdJNldOraIjLUl8vlwk/qj2DkiC7/26gTAaQjU4qhS\nVb1iiJTSF8ysO+guf/zU3rQdUKFKawlrPv0LoB44p4tZxpW0aBpBGdTMnHc/\nWs8M\r\n=z5DF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1a7850cf"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1a7850cf_1548272463826_0.10431531328122179","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2682bd3a":{"name":"primer-forms","version":"2.2.0-alpha.2682bd3a","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2682bd3a","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"908edec07e3a6475ed20a737c99e287739a6ddd3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2682bd3a.tgz","fileCount":12,"integrity":"sha512-FpDFKhh6tXSQ3LO/q9kSU23FB2GIpkQq6dj5NACVKpT3R58of1++oxaF2xtZP4K4mjPFbnxBwZY8c6dX8hmnxw==","signatures":[{"sig":"MEUCIQDLZ1+pRgRdvGrsAUO4r/11CxsqRa1CDV3V/QAPt5tPrAIgesLVS1jh8ZW1B+PYDPn+/3kVubYRz8n0g1h9FZ/UkDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSMNlCRA9TVsSAnZWagAAe3AP+QHHV2Gd3SzRYSIQOnoH\nZf+v6POyuX+G6BXBo2QvO6tifD/0zXEnu8TBQqqvEFxdm3e+haXS2VkKe1CV\n9ItbXkUT4YHEdzvDcsZ2uvydGUJsgSraB+2FDwQ8RszF1IYQllpQHzInmqpi\nzzImAnswp25BhTTel1+C8ZKgQHjEHjGwxebactucRycVlxuG0lmjghdeEA2A\nNDwoLPRBYSGLWRqJR2fYJb0jDG1QkveX66E4yBPt8Q+Lzg+4XPS/goVJIPWU\nrEIJekUVf0vRYpje0XFYFnnOQk+rYiwO/Xs456i4JUjPFOyR632mJX0WquWv\nQa13Yu+H/CL7mOFDyncBr0Amg3U3Wd212xJW9HVHGtCViK+6NczCXfFnmuA/\niO8gln/rj7C8pLE8zfb1sN6TgHrf6AN1mOM4+zADAbUnyDQf3xqG0Sbzf8Sq\nMc38CIuhHthExcEE3pQIARGKjmjY0kdwewOSDPhEe0JT+fBNNT+lLd6DxVra\ntQiUz9bBptu04PGIOg7bC/6noXgwNzj0X19//SeeYapy37h5fuZXYTN0i73O\n5/XNNbbqlgjJK3BxwXjqnNoqWVxxCq/pyKPMy+xKY2ezMkF1MV+inwYvDVfT\nEluO4Red2VYjC9LArydvZP5Ii1tW+H397ktam49YMjZlgOmyUk3YWulVBas3\nfN7/\r\n=Yjz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2682bd3a"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2682bd3a_1548272484936_0.7956774048280715","host":"s3://npm-registry-packages"}},"2.2.0-alpha.96f9fe02":{"name":"primer-forms","version":"2.2.0-alpha.96f9fe02","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.96f9fe02","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"05ffe7195a820cf1fe0af187e1214e6bb8bc8898","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.96f9fe02.tgz","fileCount":12,"integrity":"sha512-F138ZWyXVW922PWhZ8zGgJM0hxXES8fLl1+TykcPQZVFNWTyWho0C8rbO62T+Uc0H149V7/V8Bzzk4cMQqAm8g==","signatures":[{"sig":"MEUCIFdFNluDC5akSpAR7WQ1mOkHIGKGpiW0wQ7DvMXI94CzAiEA3bm3yw3/zcIrtWfl6UwYBVI15EA/wC4kp5++knkQog4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSOGECRA9TVsSAnZWagAAd3gQAIdw0UXanGEuISHlHj2h\nqRiTjKDOsu1G2xb0hvuAvW+2GY9mUqdZUjLzvZHM7HM5Ebv6JpBv33P7pvJC\nT7BbCmxLSTyVtrgMy6LlOSlidPZRwn6/pbC9b6H3Fa/6BG4ITCBitK/CgILN\n/piLhODnlekv5k1q2gW2qxNX8p0iESXMtVLnIu4h7qn4CfQi6H3crUzDvBka\n2mcWweyxBJSvgQGCQgaOLwhFet/IVXuokwJv684iQ4glskSD+HnyyI8VHXzq\nE2eg7WaN9Q6SS/8Gzz40uSJU1u5+S8Bf9i9yCyOlFEgN298Vr4Kr426zInw6\nprRB+6EXSYvWVSEw9AvIkJZUD7UwmdCF4HOuN4Wcjqdvs6Hi0lFAdN4fFTo7\noPiB0DfP0rQ6gTbWMcGSkThfeJf9V55mWpMiINFsV0cG3d+fWKdi1fpq1jac\n1+tD+ojGQzjImNtr5awrNZwsMEwE+TS+RBls0i/oo4aP5Mhctgn4DNpLW6oM\n3kXhvKaK2gCpJycfbhiv9j3ealTOdGBSkEnXBNBWipjlY9tSOSRf8xoe5bzi\nZCpXmNyJOdOSBOJVs6eku6R9W25l2Ru5igDpk8FBIEAjbdCenOEWpW6ywxsg\nKFnYt+sEtRBF+dAEYh9VldEtpf3WkYqlUd80vsNfV+MoIK6VaS9/NzjRDnRM\nrdnj\r\n=Ur6G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.96f9fe02"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.96f9fe02_1548280195685_0.8427654456594467","host":"s3://npm-registry-packages"}},"2.2.0-alpha.7f53e5ff":{"name":"primer-forms","version":"2.2.0-alpha.7f53e5ff","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.7f53e5ff","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"8b24d889525e6bc1a527ad75f7d8d814ce145c85","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.7f53e5ff.tgz","fileCount":12,"integrity":"sha512-VwE/T4Y9YC1tHV5RkpxlviMt07DB6NUqjt9YGSkXytNmRvP444Pvj+AMRszp86/TQcDcQ/FkJAc3tDsRuDfi4g==","signatures":[{"sig":"MEUCIAxLfIqgXXUcpu9NfljmD3Ex91A5NzoEKGA6mBiDQq91AiEA6XenbRh3StzmGShLhj/TNbPml0035ItSQxNWUjOAq90=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPBOCRA9TVsSAnZWagAAnk8QAJ0CcUhadOdaMOuMHiU6\nT8O29KwWJOb2MB/1bUARMj8fdkR/ZBNRe8Oi0Cai3fprVV1hRzkkGKZKKdf9\nKtB5VCdHqAnLrteJzmn2FdCeArrj3dyHS+xu2eYd9MBpKl06zymSN286InIa\nxnWPvtXDv7OPJWHxZkhEeMROnLO2K6xiJ6EKmI7IOHejhhM6YlPbFelEqnsa\npYaw7zvFakdAA84W3NBFMAwoQ9zYeRtIvxl9ii4hpHrAOnfHyihIQx2ulOgM\nSe1+qVBlchewx/gfCTs4E+UEBdHolNsy1tk303x8dhscXf/GvJ8P5FXSIUni\nHsk7iS/87WbjabGS7uoirSd/PerD3jP8cAUT6WfVXlQE/XhWJXE5/E9MJbEH\n1TMpom7EyWVF4+AdYb/PhVK+INTsVFGAXwbQLMyPgzO7CvQRv1iDd07WF3Ay\nzc0jEA145RW6OhNisvX/nXzYbNJM4hkRz9LLQLRjJxGbEDfqTVZG9MBlQ2i4\nYxa+xb6gkTLjs9AsAYOrpGw2nopw6XA22/qEcnBff6SJvmnXrCpu1o8Z0hYM\nf9J3d33/lUvv/yB1MYsNKfSGJdrPtr9u7eZn88inxBLqJZjq/h+KKssci/sf\nmTeSd/yuydUJmGgvWiSxGcTe3RIDuD3I++fjNJsvbuSDkv3cakikVVRJHAo2\nPmgG\r\n=avj+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.7f53e5ff"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.7f53e5ff_1548283982194_0.918189203130916","host":"s3://npm-registry-packages"}},"2.2.0-alpha.78cb7baa":{"name":"primer-forms","version":"2.2.0-alpha.78cb7baa","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.78cb7baa","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"bd16a9dce0359bc836846e719e5bd027ddb51802","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.78cb7baa.tgz","fileCount":12,"integrity":"sha512-hOAHSHJhGU7uISIqlQuvHATHrFAFB9skidvl7mHmdHjVNagr6UBnmZak99X4O4YW4j7dW+1EkccJC/YoG7pZNw==","signatures":[{"sig":"MEQCIFcx44XIGvVzKDBVCohdubXTXIXLH9x/Sm76k5j7iQ0NAiBReIeSQrNwdnOpyEosX6cmdsfB4FA2+OLNJhN2qKoojA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPXbCRA9TVsSAnZWagAAs6kP/0SMdsp0m3yBWa+CimvZ\n9U1lJfvOw8rKgR9ku3yt54g6aNqzcTvdeQs5qYIeha525gf3a/6/dM2eQUTt\nbNb8zeyvkkbcg7Pts8PSvwJetAhee6/yFfk0Q5EBepZUvlt4xMJY3FgK0PnS\nQJw7PME74bJ78+Su+Ru1MwRKwGLqaP03p7CPHUrcevTAnRRTXO+whRYQmGzI\nDxAyb+8x4ivnWagv3AjOPtzqIGFtSbGdQx4+Hd6s6v3p2Mud0Yd/ydPJVLdX\ncoEB1VNIYsoKukrBVdLKjmJBxtABqin1nq5NgJOiD1N37d++q09uOtjXh1+L\nv4XS4KSXkp0iGcB1raKhlOBYF8wl2xcaiMqHfkjilKwjaEmrWutxa2iDYsqW\nBDIDYNb5R6lxvJ3N8zH0GBqrkgFrQT9x+1CCuGN3iqmGicG2Dq592YQpNYXU\nQnOWU33/uae+0UztOQzWmXhLWRaKb2UnfjCNLf8n6jMzPs6yJdq1Uh5W3vNz\n/MSRnOoK/brr3aDhKm1S9VYu8/4im69hoY1n3AJe9ebH3sjJk6TSIOIZ7s87\nrBgYw/yLp0Y11oaa04OAEUbAKpY1OpwhQ5/njcLmpi6QWxFmoZHGK50bxMLe\nfa/ClXRnmwa7uCM4bhSLLm+jRllwnMOeoeR+8ZGK0rJyQ7K/hlzjWIohamK0\nJNa4\r\n=fy5m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.78cb7baa"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.78cb7baa_1548285402553_0.5379353874435744","host":"s3://npm-registry-packages"}},"2.2.0-alpha.1c57a0a9":{"name":"primer-forms","version":"2.2.0-alpha.1c57a0a9","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.1c57a0a9","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"007b3cabcc9796be7c6e1eeb87b3e0661ded7c09","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.1c57a0a9.tgz","fileCount":12,"integrity":"sha512-xOvfHVtcigl98PvpW3D+DGuo+0WLoCk9quiBho/sC2ayVSXZG/gLK38HosWTBr9tgtpxJqG5g4i0ROhEnMB9gA==","signatures":[{"sig":"MEQCIAei6fK8tLFT6+V9xy9GqUAVx9W4sGDub6RfpqKGdjRiAiBh8l9wGN6hHk1J2FcIqSCGAiLhcTo80yopaN6N9vlodA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPivCRA9TVsSAnZWagAAri0QAIPuX0t2tKj19eofWy0k\nnxpuni0agATzo3vr4TstAjr9nN99UrMEJjViOi7wERHCQsn7Ejv8FNZ7Gob9\nsG5U0C/Lp7rLSQs1IClAkDFYeFS7yYcGxiZrs0exGUfeyyyah7rVqqJ0rKd6\nWYr0hYlv9PGLxhVcoaUTbfQOhxH5q7vS6OVSbS7q1sBbHdGn/JYlbwUdnler\nwTbdUWM5oaeQYe0np3LsulZ2HDXU6/UUBUuro0HrFCq6MBlGdG+vv2DV7dWU\nnUq/CTBxPay2JJtSMRv+svH+QLlsBC65vEm16933j6Q8IRfhk97+dHtHq5VF\n+l4/g+ZRpBOoXYy0aXhMKyjnp1iw2rGVxPccUoIMIwtm+/L+J2qBGqm+IA3c\nrwGH/dgpTgTU177Vo4JSonfyhSf2tn6Hj70U4S9F0Rfm6QiZFcxYHUFzbGbt\njhWbDMn6tuANUs0rPLOigPZ2IvNu2KnnDXpO5BT4RCFDXG2wG+q8HpUL2cpW\nBkw+MKpcjIKy7wVnvz/UCqHLRPhIvPHKUYgOkGZO1ieWW9rnTTrJxxIP8UCt\nfv8S2F/OD541azTQWwFFa4aseTcPgpzjeU9NvRjvhFPCEj29mo6GfaduJqDb\nFrNjrTPz6xbEXy8pml1o7vT1R5/yo+Tztp9of5VBEhIXd2sQ16U7GMos1nJq\nW8L6\r\n=JICD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.1c57a0a9"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.1c57a0a9_1548286126724_0.5859395074719667","host":"s3://npm-registry-packages"}},"2.2.0-alpha.c9e70d2f":{"name":"primer-forms","version":"2.2.0-alpha.c9e70d2f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.c9e70d2f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"81641f11febc56f73421048b3f484f10c8e1d732","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.c9e70d2f.tgz","fileCount":12,"integrity":"sha512-mXLfR7gsolzSYxVj6dV3uRO3rfai3LPTrZHJw54A5QHs64R4RjLCwraIq3YZ86nH/0ayOZBGanukaHpWsQ8qJw==","signatures":[{"sig":"MEUCIEg23Aba0C9pAo1cV3FlImdTlvyy21jT2Fk6GX9UD60cAiEAmvwuZ5q8m0BlUdzz77DA0ZyX0h0UsCo34Ol0ooJ1EkU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPkOCRA9TVsSAnZWagAArHcP/3ptoiE0+ZgOIy0mvYyf\ni7eF5yssEU+obkgSlR64du+daCsqthO3nlq39+6b1frrfEoY9zdH5TcgqddA\n0zYh+c+vcT0lN+crILfASs/aHW6FpN7pwVtM0hWHNOggNJkHhZX43LBUhM0S\nLeERdyrE65/62hWdONpAElGBlBaSHrChz53v/YwETBPIDk5jz0jC3vtedeGG\nxkI85SyLs+UVR4+DDgPWq4pfSwh83segxDuTIZpu7cpFL4DpzPLznQmyPqJ6\nsINAeYIyONkZBWP4rjoIYzcSbxiak8f/HjU3KnVEJYzcP6rGiBXE5R+lzPce\nKOCUdFcYzP6rOh4tFemulwjToHZ1YklymYYPLO44Q0AhUdG9R7byoIKtkt8X\nAjaro+5Pld3kv0YPVoUetLK7VSF09nlw39XiEFhkZ7VlpmThYYdM9NbMazNl\noXXCLdgEdu2j/+iOV0YyQlANfyd6Lq7SBIZMeLjZaPDM8e4XPeq9Ho7UPPlC\n0XriJM+RlzHcUPyTch99x1+bAmy9DXPOUD/u445YAFj31uR37RWj+lnvLiSf\nfTJkYYrNz1/Bnv19EX2KAD9vnV5jQiZ3GC8jPjWq0svYPCKklJjZXBOzJPqd\nDCi3CpDiJHyZkpNuHL/GNo8RaZ2OXbLBlWurZOMqtwEtExifW2tnK6rgC8Mb\nq9W/\r\n=i66q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.c9e70d2f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.c9e70d2f_1548286221599_0.3670682777274863","host":"s3://npm-registry-packages"}},"2.2.0-alpha.8d7000cb":{"name":"primer-forms","version":"2.2.0-alpha.8d7000cb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.8d7000cb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"97598dc0146958d35dd5e3ce416227f7fda21cfb","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.8d7000cb.tgz","fileCount":12,"integrity":"sha512-XV0CzQ2wjdG+PGigkToO64g7A/J+180v6iRzwXX2f0/gDufQeKRVjnKIgMJ9XoQdtFmJjZGw4gupzdBA/fglig==","signatures":[{"sig":"MEUCIQCc0tUsJ7YL2IVis88FjAKMudfVQ8jf2gLgcxQtg0B5vwIgSkrd6qh7fSJ6LGg6Kjvgub/ZyXvBOdU7PUgthR1n56U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSPtUCRA9TVsSAnZWagAA3JUP/3T8oqdMATn1G4PBcROm\nzrV74eUutYxitHL6ghd3Oz8wUGDO0El59qHs/rCjHj3uvUD6EtSAzDsFEIR2\nKW20ahccTWNVNscdYvsJbWoIPApWULwSAr/iZiowLyR1eAOiYTmQNjQRgbVD\nowxKuzxfgc6OcQCgRb3t2wOVH/+VYFMQwfAhhzP06bR2J68P+0hJ4L0kLe5r\n5zIdJeXLH92vewUXHXRfOQln6xi8L17ET2yJXMphyciHyI67Z+fAfxN5yioH\nryzniVAJjOGkJqNTilEdqx7E9xD+PsXYqiPAQ3HKedIIDPE7TyIF1RjvRaBI\nsnIcwiYKJm/P+H/tMqmY+hjyj92yePe3lQLnHtoAQ8zUWXJusSCEpVpfZXZP\n/Jyrl+YpDqtc9jXn9qwSunq8zXE7X5Mla0y21t01/nsKUWkYXq/K/TWqdM0s\nTfsPthiqPxHsjlUESC1rKu8RygafM+kFjaaFYxFPzMpyh0NgfAiD6cvCplH5\nVxkO13pPEGqj2lwudznMTV6RKY+4i5OEogw4LiT7zNxCuZOP2ryhSLcxumcd\n+kh04GjXUMPPCbrRDXlftBFyIGj0rukqQMAceUNyj2I6j7Fg6n/oL21bwLvx\nvUlDvtrcBrDLAiAe8jRkRjwdF/kUIpSNvuT6YzL7d0vIm2x8bmfUjfR7aCny\nv6ih\r\n=XO8V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.8d7000cb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.8d7000cb_1548286803698_0.025010502626225728","host":"s3://npm-registry-packages"}},"2.2.0-alpha.127dd98f":{"name":"primer-forms","version":"2.2.0-alpha.127dd98f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.127dd98f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a198a3b02ed84caa4b4b6cbe17d73f5bf2ac6dc6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.127dd98f.tgz","fileCount":12,"integrity":"sha512-yzLFA8yev8wpkU29qQhjgJzAWXOUH4ajUGugD50xOSIrC9hqZWuPAAc15heZlSle8GjetzZBJRFyOR/UB7JiiQ==","signatures":[{"sig":"MEYCIQCnkrS8KSFvkXPbW5GUmk3blo62FRD0F9i5KJnHYEUS+wIhAIupfcGxdPi3Vk6Bg5P78Gp+L5XMNP0N0cOOzw8S8Ac7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87742,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQEJCRA9TVsSAnZWagAA+3kP/1DbSC1TFZAvpLWIY33a\n7l/JMkLA9WZ4C59UNRr4HaCOX5qfAwAkQmQjgkC451I73tSc/mBR6snnEe6A\nZedjA1pJtohadoY7HGK32S3inWihPHWvovESEvulGQIDYqLMnXhF6YDzHzsd\n822l488UqH14QcCwxj0Ux+2HMLR0cm43zZRTmoVdkWDyNgErhyJTbs9nKopi\n08ktI4umK5k3ZT73hCFc6GE0c2wePFdx18PQdPaRlZnp6aXklAfcA9EmUj/p\nAxaUyEVfKfvUmrtBFZxSwWQJYKbsHGlZm/aZ1Q0JFwgiUPraUUu6lSIRmvjw\nus9SOvxCEEOEaWuhuDocVfg6+qqx5+ERwudsfFCkMTl6Uf6pNAvt8YhWa8O1\nC9MHUEiRkm2t1D5MDr8VOh+p0ttM0IXikASE+X9uYGQzYGBmr2R8pZdWk3ro\nunJdT2URNeuOhcWAMZ3hcvNPjXR4xsSmlrSK8cdNFdIkiUp0T0Hj5u+pIT/h\nQxuAsW8iIdv8RVfO6X4crPuT5baoma9Mip2WXVGz9uuoF/Qwzb59rKNzugff\nhVkHq2kxGCK6orj6ZdAp0A9+yPbOJwTSX891vREqcvhApMuhgDN+OziKoRBZ\nwsArEMONwwH2JWDDXp0pmRNkVDpyDg/pw1/dNgA4dfh0kRMlEI0aPVuOBZdn\n0zR1\r\n=YH+3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.127dd98f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.127dd98f_1548288265048_0.26885452097152185","host":"s3://npm-registry-packages"}},"2.2.0-alpha.61aab4bc":{"name":"primer-forms","version":"2.2.0-alpha.61aab4bc","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.61aab4bc","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b41d299651221f777baedbf51e9ae886180b7866","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.61aab4bc.tgz","fileCount":12,"integrity":"sha512-pl/YUsHVW8FGxU6P1averLR57+Ni1M+8OXxWNGIc+4cCL5pZY6D8UWhi8YwRPDFgjgWOhNRjwRry9UaTakQ5TA==","signatures":[{"sig":"MEUCIDPVti9QS8kwutWqQtb3NLxpgS/5Wxp8fprLSCdq0x0cAiEAvbVxbhBpbgjzdqESdGgtv5yUCNjwrko3mqCinYA05Gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQFPCRA9TVsSAnZWagAAWpsP/3tmZoqZqYu/SHefvuTz\nCUeb4aAjkwiM29koiLrTxKZIhdNHsHmu/NUftvI+wy1+C6IdFZdarkwhhCJE\nLqG5s78oWlYwN5iqpQWKMAqmfAyUmfgS7yovpaB3vK7icPFoYDP38xTj3MYA\nYsj/fRTRpOCoBEuH1pwrwnf6S30SO5uGGllEeTiJl40MxvpMFe6RAsYoCo6m\nphOdv3nTkMPDKI2rr/9fn28HXDw/NTj1e4GFr32CyWla8yTpgKhRW3PZJ+no\nS48n3phh6lzIHZ9ZRi1HtFiBddHmn566oahMt95EhwyuBStJKf4u5xqRjoV9\nhBEZc9aSFL1bDJ23IBt8EA1vNqsaJueBBp/bo5a9k0hN51BtTkNQ4exkHODC\ndfGDgM0Fnm+yYbfFA5UPdlCvt21a31+zTlzGWhkzLbXgxnGPdAgArHZJzZcW\nS+L4xczFMUUcHsu4kww2xmN0Y4eic10VJxM8pNXX0yyNQOS+dxsYC26HwS93\nVtquFfOcAnnZdlaQ1mrknOqXwi+fnAPYA4cMbs/nQ2RH/nydKHuq6DdhUX5J\ndWm3zVdLI+OXwDXNI6bzY7W2bXg7XKJdxLz8t6LgPZSBoOcBQCWHAf3mNrLD\nU+tet5Nlvja+ZgO+iQfdjQv4QFpApROx4Dii91G0ieki8wYbhGWsPmjPXWt4\nexq2\r\n=XL0I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.61aab4bc"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.61aab4bc_1548288334391_0.8600818632994656","host":"s3://npm-registry-packages"}},"2.2.0-alpha.68c3e189":{"name":"primer-forms","version":"2.2.0-alpha.68c3e189","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.68c3e189","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"28b75a4dc36d901af3e2de1090c71d2e92e76897","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.68c3e189.tgz","fileCount":12,"integrity":"sha512-jesrjRa7GxTnF6OV/DhOcV/oQcwIlBHnNM2v7XxQDWeuzYdM21tVRz8jVxzxC6qu0eAE0/Y3wuA3mTCuNRyrCA==","signatures":[{"sig":"MEUCIF2UW7vzjAl/0ph0FBIToNs/nY7CeBMTy4qbI3eWVOfRAiEAjWyhMeh04xkCgSnjA5TVqHZWoCzKvJSjWDjT5SXwXqI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSQovCRA9TVsSAnZWagAAWAYP/i/OHrgXOK2v1xIbL2C1\nB2A+iO3f+PaABte+ICTwz6iY3vEky8nIqPjVlVLg9ozGumvSWNjKqX9mlec6\nI+Dudps5mcq50inBs8TRGRmutKFwD67ld5wLOR8rkQeffKEK0mIpjP285PNz\n04eW6wWdauprGZfbeEIhitFty9vUUGX885me1V04mbI6e11oTVwHOzpfVmrV\nMSuC5+NcHcomt6QwhyxI6eXv3D3UNvoyf37MpbFP6dCrHWUvHAvJetBEbUNM\n5zyQNzHCtlEvvgVBbrnR2r5amp2Fju6stRcnD9kF8uy08q1XSNJvW5NA/G0f\nOXqxP++8IWL3NsIGaSvCM1gbIJCDRvSHATZjSOlALYh5Dd87B28UowYgxXxx\nUpTni2+sUx6sUXshXvC5D8Boxs9K2cLnw+g9DV6NTpFcexl/SrUt6wQb+l6n\nOpaoLlOO6AIIKGA3quQwfbn61sB3AviLWU7Bb0kdT+1XcEsX2HOblKb81HWp\n+npDKSbTao9QOlKT1x8eSoo+0EFqP4+4+KliWUvz71uOUnU8ZVzQiDMq3afG\nNu5LzA/QoWQ849H7SpgQTR8TO+A2i9jHY3O6ZRnXIXpv6N2t4yqpX7GkxZD8\nfYj8sB6lh67TJejjZBAnfg/7k42coHhJxMo4fXFlLNCCtUGqOVXBcrgqtmtE\nd6HT\r\n=9ZEg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.68c3e189"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.68c3e189_1548290606780_0.8529249359070226","host":"s3://npm-registry-packages"}},"2.2.0-alpha.5a78e62d":{"name":"primer-forms","version":"2.2.0-alpha.5a78e62d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.5a78e62d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"06db560595dc6c97c06dc45e14c56d129870827a","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.5a78e62d.tgz","fileCount":12,"integrity":"sha512-0HrFFFtY+fFOoRiL6tqF+DxjFIjt4f2w3rk8WC+BlKLCBs2Izpx9QADusxBqvkNxN2K5rWg7y59Ul5TYrQVp+Q==","signatures":[{"sig":"MEUCIQC6SIxfRCXmUm/FQ+uj0mhoILEKKEhQaj3ENejNBdX7BQIgbfPBBORIexsYW0dTvkaMmFaq5Hm1X7sgb5NRSoLR8zE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSgvRCRA9TVsSAnZWagAAWbcP/06NAw/01UhejMUOO+id\nKCFzTQkCQKttX0LmpM3I6n/rdsKwTpRNjDlu+Lstcvp025SApv1f5sy0blcb\nsPS/NwUOk/utSzwNkJGMJ3WMOEuXWenD50xjEcRs6XBxYBGlZC7y7xUneBqv\nhgdR8HY4wh2NuNqGfoFko4ILgmDSHhd0F0mRt9tJrtJG17y0ybo4QYUQY9Hm\n34UEL7WNAcpX+9ckGxb9ciN2GMZSeqZ1Skqxr3zmz0bbWb81j7q9M44dXQTo\nQKVw+cptrF54AQM82uO0khDrfNg/KgszexWTiq1BtDk+UMVJbaGeHad8KoR7\nfR2DJIv/k1jaVa8WIXVTqDwqr6KtnXWGRqHV6mVG6lDaJNDs12hPBIqbFfbZ\neQOhNLdfCqxyuBAcj9WKdxN5uFl1KBU/FormEm4hAVTKJid6lusYeiP7GsLZ\nwEwcFCOCaAh1qoqIub3Lh2azacaD8FddDGKUk+uf6h/oa+aPZAHRQjo2Jst2\nyF8LOKVQ5+fWCZSJwwPROgDhw6TccI/Sho0/Bb0MVU1jQHih67mPR1Kqjz3Y\nJCPg6bNpQB1V7NqapkZizZvygbEJoIRh3S8vodLY4+ownntz99ixco85Mvx4\nCSle4zuwPAz5l2iDrOXqM29+rRPI+UdAPf5B3AM5fickw1G6ZKlxU6kpD9Yh\niQAk\r\n=hJBB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.5a78e62d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.5a78e62d_1548356560604_0.6081273788245554","host":"s3://npm-registry-packages"}},"2.2.0-alpha.80c32bd2":{"name":"primer-forms","version":"2.2.0-alpha.80c32bd2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.80c32bd2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"3bf9a46d231219cb5114341c66bbe4c79d6d9dca","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.80c32bd2.tgz","fileCount":12,"integrity":"sha512-4yVc1BX4fK7esPRfekYaee4xv4d3xTGi1jAZjGXTh51TyRPocdl31ZgwVKG3dAH4cjTsFK2U9NWCZbWqkDWXAA==","signatures":[{"sig":"MEQCIB8BL/zTfST1D1Mk/nSsWVqbDYlql7Q+BuLcyBx+OooLAiBKEr8qVH9vNihf/zmUr2BAFOxQaQXWErrOrWBE0/XPfA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSg1xCRA9TVsSAnZWagAAWooP/izXzJHzkDG/XpNc/juy\n37i0wSgtRrIzYOxKSwJYJBmII9OtpWR1D54ffbCoekfKK1M8nujoGU/kViuu\nmbQCZ7aLRtCFwObNsELVfnx8TJ59mirOoRM32pTGFM5ax2ZheayjaLofRBrA\nqV7h6f2oqtFpzsZ76FwMfZ49kWw4x6LJaunEZPLKaxRenyumceWEV/xP+7IL\nuBuRGbZMADIMEyrUDd+H61oJr6OzZNv8obOTQ8DnVmY0bE8QHjDY9FBFDhNv\ne4TXzELghNO3Br+ViU/srleS2kes2d4nW+wQAtdUBkw+y+NJYVad4f9a4wqV\naUKU+pUY9soAiS0ouR65It1azohWes6DFQKthRxfKUYp9kASlaMPJsUwrjkI\nqLoOVXBNFgZZkGjm+Oc30qBS7LFnJIr7IMzxMKAiVU9CE5NcW86Gjo81Z5VB\nYKrU08kB3silAduRKCZD9gJEstSSFORUWc2YUR0R+Sn5oq4MkDn5eaBAbyop\n3K5PeaCX871ck435EeTt9VgzvYDSykQK7GXWSiWQlilhpmrarugvkt6rt7ZS\n2h8JV8wrd/r0zXe+69p28j91X2UMRz/6eCzDtDRyROChhxch2rmlLSRbXNFL\nxSR79VlCWGWmkL5IN4eXsyVjshWRLxjVGkhKUfu2VUeZBxcErrVACBjmbqNO\n0EQf\r\n=cbLf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.80c32bd2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.80c32bd2_1548356976887_0.4057041215742221","host":"s3://npm-registry-packages"}},"2.2.0-alpha.cb697793":{"name":"primer-forms","version":"2.2.0-alpha.cb697793","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.cb697793","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"f7edbec145c155caeaf98ef50a1980e4d596cd45","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.cb697793.tgz","fileCount":12,"integrity":"sha512-qLGQnkdA6mWUXCfNn3wJjH+hrBiogjE5cyDGXIojOepo0wEbIaig95Yjp6oK5Y0wmNJXrOJBh1iK0WM3mReCfQ==","signatures":[{"sig":"MEYCIQDbNYvdvhPulLMxuVaF9Fm8sLxABVEFz8ZBKYi+Yq+teQIhAO5U9+J1C2crZr+AFAHMCbHkq9N7HKPvZ5T/mkHrCUS0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSg8DCRA9TVsSAnZWagAAQo0P/RmQhDu9OprifMB3MitJ\nkq3Kk5stk8Y5PPI2h0PrqOFgVCv+aHm6QA77+zPTZOAdxXH9PXibpM6jVibx\n/CjG9bvl40nCwCro0VXtdC2c9yARSi6UT/mun7BOYWOzoEzsPpQh3IC7f195\njX29Krom9MEgt8J4KBanewod6m8uV7xmIu3ZQWzbHeWAOzX5XXky3l9Tlpag\nmdwaFvG48r7jfRYKChkUvOLxRO03hWdlG/jGI4i4ZLju8Hf0iIkEn48PvBUN\nJl39Vjg3z8s7gnmFmEE/tD0Euhu0Gex8Gceh80unJtxeQrN/W1t7USNLE/XU\nbqZIRjO1K8pFuQQtn6igEsrZcWapQSX9M8r2GgFQcoQUra0iNZ7bjXAGsXlf\nVJWbW5VWmjyhqwPlH4qlxmpIHtTNCU3gAjzE/bLLqMZYVp0FGN464URWNiza\n2Ds0wadqEgChgf6gYJUel8y1zYQ0y2iw5FWDkMVoljnAh8JB6+DgTB6G/Yc+\nUhI+9N0iOdouAgDbaQ/kUSI7OpmTCJWF6RfacUG6eOQcymlAz8wUlLThSQ0c\nflF9GsrqoOzIeSUNz1KcNJAt/N9WcGWcvkYi69w93ENgCuAli6+8sa+b946U\nFjRqzLYo7JyvBqUIg3+c4WwR+bvB0KNYX9LcAxB9LlQ+LDUNg/QXw7vc4WTk\nwAAL\r\n=f6wS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.cb697793"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.cb697793_1548357378331_0.2651248059923854","host":"s3://npm-registry-packages"}},"2.2.0-alpha.2be44f23":{"name":"primer-forms","version":"2.2.0-alpha.2be44f23","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.2be44f23","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"aca06a6920129334814d291542fb946dd6744d12","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.2be44f23.tgz","fileCount":12,"integrity":"sha512-4coXoNNvRwGkrDwnCzwcMjUdGCW3Qriry33zd9bRRGgBxxt6DE62ODQ2xRVMJazF2dNnVXRQWJ5YAhCrnOQIQA==","signatures":[{"sig":"MEQCIF1/EDf/4Krc+C+bRbYU6kC5bsO+qb1paY/K/FxaXldZAiAHW5bJODjk2T2Hy1wJbQKcGQXF5Bbxh6CeRR4VUmnYkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcShMdCRA9TVsSAnZWagAAMWEP/RQ0m/2Ytxa4Gco7VVR0\nQ53gmp1dvKp5IrlRd6N47lHAcsuP7UOIzqSgckEDrIMVZEhjCN34+2+phyEq\n2oJUVhCpdDWzdGGqONJwIvBjV1gtdp1T7KLVpTwkljGDmWNivvxQavmQ1Sbb\n/ysrWmA7dFqneOkqBa94dsHaBTWIT7JSvGD3xWo1JTfAUp+EiQ4aZOAiCtQ5\ne9jtAKFF4xyMymXoK3+PZw5exirFSce2gII4BpYlLbiuJG2mG8KJnZ+rGAec\nwuzY92pECxaLttiz3XEXodsU1Fn5bXWSgpSH0v+VDh+DqXQnBKGWiPQ5yE8h\nnzK0pfm3VP3xOv3BTG3sjYAEpf32lNRxk90ZOL7yVF0basQbu+6CBu+8F4L6\nKN5TUshsGenunpTKRDEVUP581Yyx2f7j9VdLs8O5Xc+NyBtm9kYMgs2gGF2Y\no6m6p2x4MVD1S9xQ8vM0Kd1yMKHxst8iPi72qZYap9+RVoQuHPOF53ChXqjL\noRD+Vbgui36qRzJuLxcyn4byljPVJvJOdr2FMGzyagu59pI2Lsb/y7UbUmuO\nwzspE231qW8nkVBv7yDPLaGMC+HQkVvlBuHigZhIque2X+8WVdhlvoGruWEf\nC8r8s3T2qDpRCVk4J1/Cks7S4MSiZvxv8SUTt8imKuTTsU/NtPUM/YIMqHTw\nugXy\r\n=uphy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.2be44f23"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.2be44f23_1548358429382_0.019406288956620443","host":"s3://npm-registry-packages"}},"2.2.0-alpha.28960460":{"name":"primer-forms","version":"2.2.0-alpha.28960460","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.28960460","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2744a242f80c09a8d1b75208234fc49fd26b34ab","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.28960460.tgz","fileCount":12,"integrity":"sha512-KUFjxMa9WLkCcC0HZo0VZCp1N3LO96jZVp6VslpFDjIc3fTI12WirRKOQVhB9Vb0JA9BL5yuRU+J+MTdSglbvQ==","signatures":[{"sig":"MEUCIQCABcsfyEkYfTFg4mDVWl9f8sFc53j92SBHPg1L/ARhAgIgM5FCviNDXBseU5wzwa8tzjCkiT4BWizN9VC1ui43JcY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkDCCRA9TVsSAnZWagAAwxYP/1APNksAHKtLN3pbgJ/s\nkHurTDtF2XxdRM9cpqzzYvO83+KA31GhdUP1Z5ET6DhfpaAmulo5euzylLoK\nvnkISZYZyAW1jjIT6rlLB/UNL5Kgy7djUir/v9W6o/xeftPfRBNclmBGX0dR\nrvNuokF9nDnwCl+5VZhJfFSQiMvhWBuq5ZKfh4YSoa1rFLga+a9h0eWB7U7Q\nRd5YyfTAusY2c/Fsz7VljmisEIQjPAPXCx6uV/hv5hEsxPikQNOmXCjEi/aH\n3vgIJycXWy26ZZ3jDHuLvIzvcSqu/OkWTQLIC/T2xYVowix/uwsl5cOLNCyu\nbkR7eg+SvkletMnCF6LR8MQjDrHI919RifwPMF0K7FLic5p/4uQFDYXYoeSR\n5PzogUHBzQp+rZq1FYMwPz7wGqxaD4hhjJMBxqVH8v+ful3+x2xM7wATsXEn\nYtpWl/s4H7K/9oLTWPAa38JT+dhjwKFUdovmHibaa7wyfA73rSVGjvRnBXzI\n/+pYb2ZQzCS36CTULCFHInXjp72qmFZ8ojbtWcS341AUkLdx/vwdImN76Pxz\nIlq3l9LFKW1ucMj1PebovxpaRV2Qtzl3U4clwT/SIfa1PynkucXupRfy93BP\nUu8Mv1UYWQcbKu4COA81CV0yCsEpMeZ05o5t+oJDhqrYalAEmXAcXxQctpNI\nfaIw\r\n=cgZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.28960460"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.28960460_1548370113881_0.8172583728145206","host":"s3://npm-registry-packages"}},"2.2.0-alpha.77423703":{"name":"primer-forms","version":"2.2.0-alpha.77423703","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.77423703","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"313da5acf4ecd16c83a88bb1a5d157d982ddf914","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.77423703.tgz","fileCount":12,"integrity":"sha512-4Lx+DKv2aHcnOKTUdKOo7gG9W77SvwJFKE0p2AhS97PBkFDO3Dd6o2Cb8SiUN++EdkSlCgsv5NfU01/TlB2Ryw==","signatures":[{"sig":"MEUCIQCnycvQUP4wcsgv4AMAprGUFBPEUKqPTtr8grafBTh8iwIgH33WujRnSpBHsC5IfCXw5o2BNbzDJ0pHGmJQELMJwJc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkHrCRA9TVsSAnZWagAAoYgP/2S3k0gnxs3VNAXjlZPZ\nScSdNDk1RDROL9SzRGd5LldrTKqNZqWKuGg9rtqRvSYgP40y+s5FILS8EwZp\nV0Uc3zyjb6CqjC/clyQZMhyNWOwWKA2ZWSLpcp+mU1JrtJCld6LhruI1gXpd\n54r4CTNuNPrgHojDlLnf51HwyIZknfbCSs+0H6SrpVSpagvC5oFIm3sEEyXV\ni8XVsrWMtMNoXmSfHTdnPOucP0fXwQxditc8HEeYD6SaKBBJ6DR6QMXBHIBV\nGq7iv8vhnO4gFbpN8J4yQpFwjCb0PdW/wVMfydTKVHHGlpSEP+WdsKtfgWRf\nGFRZin3yQqEyai2O1f6RSLvWBD/4nKu5kOTjVbkeXqJPFx4ERLZERdBl8Jvg\nLr2k1HmHg22XQo4bcwVJ5jJY/sp0oQ4gE8KmokqODRD9vImBhu4rbygBUI/p\ns3tVJMMR3rj+1Ek2FgDbK2cF4caKxymbTBmiUPdPaSFemltSPzcln9BAG5bi\nzR3SfeU5zis7CpU/IdWq/4BeF9cGX8kDgkSO2c7/iZOJ41qkRoBUIQj7YHhG\nv4rJ0x1aAc3avIeETlwyg8pYT/MDJ4OGZQVYq4Yd9KmXIdTVQ8/YUjM3zE+a\nikZU1Ve8+VlczCf3nu8NF6lLQJb6NMvGvYgYoj7rD9G0/Y89GwSE/oU/LVdx\nlkC5\r\n=uzMU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.77423703"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.77423703_1548370410367_0.6026074950579698","host":"s3://npm-registry-packages"}},"2.2.0-alpha.e6d3dacb":{"name":"primer-forms","version":"2.2.0-alpha.e6d3dacb","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.e6d3dacb","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"af589cb9694a682f0b8094369ca0cadee1be57ec","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.e6d3dacb.tgz","fileCount":12,"integrity":"sha512-XjzqPszLeix3iU13faR0I1Xz/YCe1JUhIQcwEawTBaO/cb4ZZX6yBCBE57E9jpfE11SlVowt3Lb0FM2IJLpLGw==","signatures":[{"sig":"MEUCIAXhzqpQg9sJR8bZxyS4IDmWrF6ZWCHe4UMG51HboLMjAiEA4CNTGWrlaejBSRFaWsBFU3xMXY0QQpP2KgmL97ZRbEI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSkIbCRA9TVsSAnZWagAAHrQQAITF2pHvw6wljuXAnyqK\nvw4ro+tJv+AliVSQdg1r5PGoqviIXbQa2g/DzNwMXQd/97ri0BvB0LjVmHel\nQ/ehfaIWGXbGy4O5lMYx+0reaFXPMhzicHRr8LENk0jVEQbKNFuTYAnEalP2\nOUOqT3CUr2/6NzwSTz9aeN/5EsQyBK9xHZKNMrKveACRp5Zbto3tNRvNiztz\na53sU55I3+XXcaMNIbcqEoIdgVx+9MTzrnh50Dmy1oQSVaES825I1KUWfnrO\nz8GhwUcRT1RGda/yIAfsbAsXooApj041xc6cFoeqDWi0Z4h2cdEpLZUtae9Y\nz+P+vF9EaCpaNiydJ0AlMrpod5X/PcVSelC0BRH4zVn5k/u+dbwesZV1Vjob\nHj0ZIBEAa6l1PIonVsOLz3GMSRBJtBkg2h3JgUOOFxTvRVKzP8m7y/d0Jtjv\nhjO2HGfwyM9CnMmhseE3M56nXR/v5mvxLW2NAFompQUAl9fCe1VCaI/pkRTs\nxc4w7q2z+koOLQI0ZHa8vVMZ2ncCpMsgTqWw0Z+HD0alFqHztnmB6efQzeLE\nkj6XXGWTB5CmuvECGiJgPWeiIEn+atBiJRcPahXCogbZor7m6FE+ffbCF8CA\n7bdiMP+LOyG5jx0Ns+2YAEcIYri7CmartCqw4O+puuAg9c1/f2sS8bcdtwOi\nmydc\r\n=z3e5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.e6d3dacb"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.e6d3dacb_1548370458851_0.08683903098719004","host":"s3://npm-registry-packages"}},"2.2.0-alpha.618b7b78":{"name":"primer-forms","version":"2.2.0-alpha.618b7b78","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.618b7b78","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"b01a12a22a4f9008c5e6f1bc3731c9fdc3464c4e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.618b7b78.tgz","fileCount":12,"integrity":"sha512-Wj2E4mKSQzNRMcit53QXrZmVmBFp4NdQc+biAJR1PsGaB3okGcP+cjZfjY0gr9yckk/9393N01pZunDdiz0flg==","signatures":[{"sig":"MEUCIGHq7vB9MtJ4ksPWdx6ejcCmnLyzlBG16GBwlKaJZI8JAiEAjX+TkbIQbRZi3NggjSwKnD4NQwtuWPrllIMF98Wj5yM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSmUmCRA9TVsSAnZWagAAOhQP/jQpwoH+UMfhacEoOoMa\nvBjLmtuQjc+8wQ5dBRqpq8iC5/JJi5+sEy029jpczdoCoUPXMSU8kjoet9qx\nvvkRe2qQPBOW1mPLmzJhskRbxu3+18VUVnsTtV8iMRxVwX1vecKSSJzr0LQx\nt4qsKsPtcGFIzkKTah41fXQ2XEQliKjLvVK2a6kt7ZM1LlRjGbikQk0dDziO\n07HL9fIq69yFsUfaG0OpNgqMSjgrLexwelNNvostqLbG2FWMgpam9UscagBO\navKm/TX6tR41Ic4Hd3BaUqeXFm0wBj89yJaHOUKxpF3+SMovWcwWfBYnlayc\nHNvm+PyJ59RU4Gci3aWgeiBksnRUKpukJTyGsPZN/sErNy31gJj218avf4ZD\ny5Cm8aUrciys1ODtxE/EwZXAzdTvVhqH//TlGq8rm+2k6AHdN/yLW80Esj1G\nAe8L9ZaElFRkTy7LV4UEb8jduEZ1AcYd5fJMwhnYZRUOMeqnT+8gyRkz4qQA\nfXahJRWIm3TD8eUQXAJkBI3p4pobZXyDj4H7Dk7xOsR+mM3LgKNRc/NLJLpB\nfLt0seXf2yVWxr6QmsYayptFF+rxpvuij6/YP5YoVQ4kPfy1/zkMi55OkulB\nm5n0Y9rBJU0GMEJu4/YrHRWR60PUHtaEIOTaNhQrUBqmYDniqbVdBEQxI6rM\n6gmF\r\n=L5FV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.618b7b78"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.618b7b78_1548379429920_0.2405160365312311","host":"s3://npm-registry-packages"}},"2.2.0-alpha.24b4159c":{"name":"primer-forms","version":"2.2.0-alpha.24b4159c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.24b4159c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"374f20a1cdf6d4a79a66f6336ea87594c7702542","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.24b4159c.tgz","fileCount":12,"integrity":"sha512-mU8Ct+/GGH29BmZmxM7jPQaKa1kE7j9h72L7Fcw3HrbdbMA1bjBdJoc1X4ishd+T7oyNOf53LHLiVCqw1MJqcA==","signatures":[{"sig":"MEQCIDeWOexn60EszdEVRZKBQES+iKT0je6le5Rokfe5GbOQAiBQLBqYIaN7wfMNpZR+jOJnGrR3QfDoyzj2b1OrxjgMqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS2n+CRA9TVsSAnZWagAACBEP/0i4t3e76PElAwVKzauS\nHifHFVZI4OtBgGI4TpPoxQtFvRnrNO+rNCI59JPq2ZY3qMlj60osesxhbNa/\nOLD3aFvfIxuE96eoFlWj2hJqSbER83Xq35tuDftr/sHDHog6vMGoHpV4TwhT\n5XF8I5mtRvxowOuU/aygZhzhqswk2fM01ZfEQBWm6K+OPpN5eTUsI7YHZOT6\n6JPx64ZGeJOMZgzY+ru9I91mIFcWGc4GvmG67AEX6Wq2JZPujRApCPWMoc6S\nyOSFfMwo7ObOCz9Csx6vKAlXJZzp82Zdai3v6WEEKZP+8MswO3b64ke9zE1b\n+bEjfnK6vYygEsAjod4nXcs8eohC3J4qx0wWeQJg7eg/XMbi2n7UeHQTgJLx\ndaOs5FspMhHJl7pJsIl+Vp7RgR7waSJf1rIIezTZK08jQT4YgEkO/T2LjQ/1\nkA+SOLEpxYxPgXQMCWWuGC7gcTYBjhvteEw67IAfGwwhOEVFqsic082HceKC\nfavPIsLXBsKOKLUP+oyj+I7MS8i09j3s3D94y78l8jOXsYD2w0mxM5fIYOeI\nI4ktrdo2irFGuOuEXTYFbhs7lqC03qqqZ4RGZqUTeT7hLqLsyy37jtKfNMyA\nanFmUYoKZkGlr6Oo/1MQ/+PFB+DXvUkxOS0Z1KQKbCr75mdzbelAOHvrR+0e\n7xI9\r\n=SW/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.24b4159c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.24b4159c_1548446205003_0.2854543866184833","host":"s3://npm-registry-packages"}},"2.2.0-alpha.645f5f82":{"name":"primer-forms","version":"2.2.0-alpha.645f5f82","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.645f5f82","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"30cc532b77d58a5502250ed5a58d84efdd1ac84f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.645f5f82.tgz","fileCount":12,"integrity":"sha512-EPPwzMsrIKCDdhtzbOwdkXIfMRU1lsO9Z0c/QJRx+ZOKo6bcMzFJDUUFqDPtIkva7KuYgQGQa3nDS3bhnetEYA==","signatures":[{"sig":"MEYCIQCd9sV/W4OeD+6i6UEfOWLTpBUy7iUzpCZopv0wJSwJ8wIhAMSLqpBUPGs0tsIuIaHIP4HnIlR2r7wcFWsxamIq6duG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4HNCRA9TVsSAnZWagAAYqEP/1fA2kNJEMYm6Qqtbdlm\nWrR8fQDkEbxtR/KnpFtaloMhHmxTm/hGF+b1iOyzWG/PslFfzF++KE2qQ3y2\nFwnBs6E54YgOEbkRjCtlQJY57MNlbZhLOdJWkwN8KJslsvsptTrXNdunWvbo\nxbafZQpg0Z5T4BS4Pme7GUKd3BV86W/8eXBwdZqJLPHStFXbZEuUYXEy2qJB\nsjEz53zBNjLQwrLQkZ+pSGldFxclk2yoU/MpKNClOG8G8yu3PoXNRFVU0mHX\nu9lsq/nw63F8ME7udLt1PCVTtLnF/dMEf34taOuQHAlziSV+eFqz05lr7KAW\nG/8DT8Uz2G2b4jNAe8pf9j+lpv0l3EWCny/XTu5jhF81ZhiU8e5RiLvi8Vas\nsHvblo1HbAw98UOGjZXVZNLPxCJP4Ic6YM5/kYVewwYEtnhgZk3qXZTeEKCq\nM6scEdS+YXduBJund91vqGf9BKm2BSCfoFJBTfUPpifVVanvMrn480gmV7B4\nZONieYox4DmAWUDJMtyiygIm6ciEH5GFZHganJd8lgWkXxfH49M5J41yNj12\nfknR6YKFfegkPb9CnfBNbzg4ZCmcCI4Car7JLh6e5G0M6a4uSOmOmU4AetHe\n0bD0NrF5G+3Pp7XT05d3TJcUD075M2ZkFy2BKsKQdJb5bk0wVCUpP61pKM10\n/LOn\r\n=+n0E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.645f5f82"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.645f5f82_1548452300768_0.4667300075259857","host":"s3://npm-registry-packages"}},"2.2.0-alpha.10e3b361":{"name":"primer-forms","version":"2.2.0-alpha.10e3b361","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.10e3b361","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"2424a579a8cda62c1b0818e49142422b792ad3c1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.10e3b361.tgz","fileCount":12,"integrity":"sha512-CJbxmBnu0XCtyaSa6blj9fp5rMoglmCe8chwmqQbyz0fZBUuMPUPrHlVAiD/aUuEtHIk9cgvBO/PbI9IzqSObw==","signatures":[{"sig":"MEUCIQCekfR55S31FISp+fDEr6AVVQIGGnAYGMzRU3Kqrd57NgIgLcn07MoFNcBnwoLTFI6z0ClzTraBdNU5xlIIONoesR0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4R6CRA9TVsSAnZWagAASPIP+wWFd6ClQVeXwJZLGNyh\nJkFZanGkNcN3gPeigo/oLCbcbhhFHUXP2h0WVWegyHfERW1q4Mp3rYF9GSao\nE9zWHUBqbDQ4+tW/ErkVrtbM7id5xWmQzQMLLYuwvVfqYFqvtYg0OXQgowNX\nIH8jwFi82IqMhduk4bznwwxo5J34g7qMPg9GWJfvtxZDJgFX//1GqGWCjLGJ\nXrergCtu4I7eKe8ccLVUjC7x4wCajrdC5An/kYvTbB57e9cXb0+zEVKtqqdc\nJKEwI7/tR+sdTCBzCKXXpAinl9VOJpLNz0nD/toVVrJ7LrEQKdi+3nJPyqd0\nqbG0bEE/5PKHlHPCItQMBNNrUEeBqyHhUqdDAj8pH9WVLey0SSxal+QLyeGf\nV8PdOI4jJ2RETwTdEfUxF73iRRjxuivHDevAFGlynOgPwF93a7Z1H0KUM35+\nttG/Q3fcV08NAGWMbAEpeXS9EEjUW4msarImqN28S0WK/SGb5HOTRx3VM8Gl\n06ioQnWkQRq9b+RzZMPPhxAx1WiojLbP2hpIcHIkP9ouuRQnZVR+fcMduVmF\narxZC7mZou9vntKLm19Et+jMdTfGuq0tPvKoPMnYiyaspaYk9qUAHv/s1clK\nyEVNFtHY3Z3owSRnnxGgi3uZmIY3sZMCeHuGDFMHyeRR+5GUCOCmk/1RE0+X\n5N0d\r\n=syXL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.10e3b361"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.10e3b361_1548452985352_0.09781649485949195","host":"s3://npm-registry-packages"}},"2.2.0-alpha.b78e8ab3":{"name":"primer-forms","version":"2.2.0-alpha.b78e8ab3","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.b78e8ab3","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"870b6f1a8bf7a88bf3f268ae4a25717eb9a425ce","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.b78e8ab3.tgz","fileCount":12,"integrity":"sha512-fkxtolPMWjKAZOT6asrZ+V0qR/aqx0+KFlNBlG0NidmuYp+FWMXiax6qu6dSDjUV2suFSANpdQX9+C21JG5MwQ==","signatures":[{"sig":"MEYCIQChszUcvuyytO0TaLTZN0mbiBnDQi+vTxMxryTCnD0YDgIhANFBQDRyykH/kLXNG0YEvE2/x744n2s0zCZpwjmbKQyZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4iVCRA9TVsSAnZWagAAqyMP/1QB8nO93Fyh0ndC4Y+u\nNSszCWYeO9u/4GyHDWJK/mgXQyIjXFOFIpF4h+foGTgz5V207cAaK9akiQQo\nbhM31BvWR2yyxuF62aAAHU7x4+Wpe15DaEAcmkxgQzciE3rluhF3KsKM3dCG\npKP9z966OzykR43whiLGsEajwr1RPelCUvIPM0gkYSjSSL1/q5mOAt+r3GJf\nLiZHhRqmUsVS+sHIxHxm4BQcjt7Ff91ecnVyuoMNWNg57Q3Ia7IuGSYwwJA6\nwZ55HSIxvQ/BKe0xvgZmOU12qBJ33et/umHtCMpqyA1CEGcbBBTHwPPCcUvP\n1EZia4erG9omlfUMjZnJUxwX5APpt5D4cgeR6JdHvxaefdEXZ2bquOMGOwDO\nFDyOYpyAF7sIg/qZtCdvKq6UAQf7fSImZJGVh40IuG+IH95wiUpU/gVALMMV\nNh13AIubQX7cViDESl/2/K8PDPeWqDVdChAjG+Q+yq0sWW8TNgrgDEJgzTUw\ndmoePNhz9PL2i0qsicunVeHSynxyS8GMuqsQU2x2pgolqj3cN0ygBBn/CSIA\nWdqMM2D28RLBfhWTHaLeO7AVaC9XVUBZ8NPuYUYt0dM4tfHK535UXjv02R8r\nf4HYsIV1qBSe5Qz+JM3fdA+NPMc5rv+QrfCHbUGDXoVrW2pW9tS0MaIxResb\nkwcT\r\n=1A31\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.b78e8ab3"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.b78e8ab3_1548454037121_0.9813762734864593","host":"s3://npm-registry-packages"}},"2.2.0-alpha.eba8f309":{"name":"primer-forms","version":"2.2.0-alpha.eba8f309","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.eba8f309","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"adcfa8706fc6de2701ca3dd59f19784a9dffe018","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.eba8f309.tgz","fileCount":12,"integrity":"sha512-bsDmdd+dJN0k+LM7SmhmQ9PFy/0yqcJ7EWMiW/yJlG3hE7A7cX451MMLKJ8T19Ha+FHloq6tZwqgiCy4w4RTvA==","signatures":[{"sig":"MEUCIE0tBtvPhYpmI0jXyUhbZfFdxoNGeUHK6iEnAoB2Ee0pAiEA04li5aMy/mLBjkPeDCMVfkpif2ftiXgOzcU7gOnijJ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS4sDCRA9TVsSAnZWagAAZn0P/RhvzGOAF9mnXH2F1g50\nJ5v8IQF5ttB4A7cMHcoCqO43pJ0fHzidEprOKIIRhEpFAmr5Pwn5rOWVJyJf\nBRkHKvSI2SntixAQ3IFyyRa/t7vjViYJ+pfNCwWEJVeOqmVnv8ZhTLLC56KY\n3HMsJWx3KNbeKMOjDaUsN4E5cTkXmGoMJCyLm2Jm/qpC6LlDoTWy1jiYiRpW\nRsCE8ECz0ZNCIVIqK9T/CNiuX73a8ndw5uC77ZKLl+xty7+5RwP7Fs5pdgFn\ngAu2jbF1heAxAzuxgU84W7T+VAyPhKYsCu225aS0NL7x9WcR7+21gpaWCj+O\niDi2xXZsQgnrKpn6svu1o7JT3xmmhZI3Vs+3ihE0OSMHtZjZQcWKuCijAPEw\nWZvbSVnZSo9wN1ZapTwraYNALLml5wXLhwyOaLG1ZnnJFHjatKsoqij3IJs5\n+cAjRLfhvTRNrQZP88NdajsMyhUYfh5gUT9LUFDwUdBzi/q2KDqeUyB1zxaT\nvJzfTJ2CVEjydTwphPqugWRGjQg+WxQ2axm12hP9+YhqjWKm7J4aiwy0La6i\nVI5FfAIHMBh/kQGcFoKWuqK5ARSh4wNEHKKwcsskmjSKz3mdU2Qi/LHHCWx2\nVJWVunPeHqeXvBoKTVOrnjrB7Z52uPwX6m2iWjsD+D/jCAVec462kZaMk6zO\nFmys\r\n=Y4Ae\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.eba8f309"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.eba8f309_1548454658936_0.14859284154281305","host":"s3://npm-registry-packages"}},"2.2.0-alpha.a75d1fb5":{"name":"primer-forms","version":"2.2.0-alpha.a75d1fb5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.a75d1fb5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4d74e509a84b74b34078f34885122b43e5430070","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.a75d1fb5.tgz","fileCount":12,"integrity":"sha512-3jc23RQwqQGGP9/r8XnVXKZOTd6iWtHlksmQVcYT035ud1b8q40Ee8+UCdj4wnq3Q4S6YpAZmJ7YABoYDcv/eQ==","signatures":[{"sig":"MEUCIAIE3+yLgD3OA85DY92XFMkOGQRGSB5AX82e4Boi/2PSAiEA4UEQeDZLzOP9x55/D/wPQ5s7eHmuBooiTlJcCHAPN9I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5a7CRA9TVsSAnZWagAA4mIQAITgN0/qHEWtaUPwTL9e\nQaxeoO8rKTFe3BO8nLWyrfQNk2CRFRUOuqAw9WbKogIVb/mbhYuX1x6AyRwA\ni2GybKtty25iMYh5DlwcuUcG5rUzHS6SgQZiHei/ornzrD+dfRcSP3QNSCiF\nETECY+YCBlIaFrngodu8pwGDiPzIICWijfz3XFAVFZ06HU9yhOTksbiGFdlQ\nE1YJWkrjVwrklE+h3aD8mPwmo1X9KimmC/fGpQ0sl3Mlo1mre4rzU+/p7Vgc\nNA/RSn7Kp71jo3gUG4wIi309csY7WSxYb5wqAMiGiQETuuaFWgcOQa14IYom\nyMIBFGuJBtTBd5eXY0XBwJraxqTi+qgPGp1jgtvkQjsImASN8veNKCYXVG6O\nQfMhHcUooth+bBRq+AOT1rmFF09TddHge35Tgv0uc60ad96BvzoPYUzeiPBX\nr/LAL0f6WZz6TDHhgxNMRgALDALTTH4TuVdPgSlHoWGcTZHkMMoW7BUonTcq\nyZ6gClv+lP6NyGxPw3FqT1R9rcpFCJDF2AJNwY6AquL75uW241vhjIgAabj1\nNeLWAOvIpY8f6c6FZOtthlnoGO6OShZ7Y7auA+jJxB+hf0N9Us/5rOSdJrIG\nM3MqeZOFSyxkWzjRAOoaORN8Oa1ScD67DWnlVpRVT3UtzAHtwsNgd8VDT+aL\nxSzg\r\n=Em/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.a75d1fb5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.a75d1fb5_1548457658376_0.7062985150507166","host":"s3://npm-registry-packages"}},"2.2.0-alpha.78600794":{"name":"primer-forms","version":"2.2.0-alpha.78600794","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.78600794","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"add650c8eb44cc3e4776b9d40e30fc98e45c9b5f","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.78600794.tgz","fileCount":12,"integrity":"sha512-IGvdigsgOtMFK8LNfDypFrY+GOigwez3JuGB/w2lbl3BqZYTHsTrjqOlK1fBRG9r9bV4Zt0CaGsoAuhWZmCFEw==","signatures":[{"sig":"MEUCIQDwBBaOffkmDM+eSx84Lhq/BW5LF/+xNNMLq9ERdMEv/gIgd+hHZarQJTa9HdJ7r3TB5INBBV2uVTKNdrQVLHU59Kc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5c8CRA9TVsSAnZWagAA5aIP/2EOUlv+Mzqm8AJH0t3C\nGtQBYKCbH4233zUmtwJXBC5q864/5VOYn5R8QKcTp1GWIalrs07mczlOY1Dw\n02+5oPNZ6TN5BZb39Hc7aALexe0mxmqKphmMzDVnVMKRcl2cpBa3Diz4dfpg\nEZsBSGoA6bpc+9WW46OS72qCKY0h98ZQzU7JRZ4aOqU5E2BP9rqdH2mbdvzH\nrYdDqjrZ2hlrtATyrJJdhNQ8gl5++n9Tvk6K3vZsqejo06BIiEKVTtXazyJQ\nduwogzuXhVDujAU08+LIvSJlND26rOkH4I6dQLUKrLL0Vi/E/N3JEF9qCVMz\nrHtzgQww0Jm7yu9sqE/3MzX0vgYVPHKubfC7tw3/hbmmSQ0pNMI4Yo3Dltpi\nMF0fJzfyPQE86H5fSsp8Ovqzl9PncDSYCYF5Xq6AY1mLhdxB2drTfClLeXaa\njRQoyi6wPC6op6sxIBKFtnOae6/0g1dxCK/+QbHshNVXHb4SBaaY006PHwRR\njFYkia52w+5PtQTRGXLtq+Nq8CZG8968hevmmwP8L48Gtn3z3IEyKQMLABg1\nE2uhYEMpR6j4l8eSoa4Htk4epfhhJ7/Sf0Qv7TB51/omb+vhXU11VaAi6tJ2\n4sq3RbH6N/3Asf/fq4t9mA4nrLhLqxhcRjGRbSiiZ9V2MLRD8nFpLiLGtv/0\nGkMi\r\n=svJp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.78600794"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.78600794_1548457787801_0.45040811265014713","host":"s3://npm-registry-packages"}},"2.2.0-alpha.55f783ab":{"name":"primer-forms","version":"2.2.0-alpha.55f783ab","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@2.2.0-alpha.55f783ab","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"4369d5d679676791901c974794f78fccb5b7a14c","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-2.2.0-alpha.55f783ab.tgz","fileCount":12,"integrity":"sha512-B2TrwTJoSeDpwKH8wldvz2Vlu61Ptw2mphSbulaGIs/KLQsCPcqd+/SFfdx95TzCPrs1xZneeViz2wfCH2P6+w==","signatures":[{"sig":"MEYCIQCkzISZVh02AurqpMVaXyYIBuvQQMBHtV/nK9+KSxlj1gIhAOAaRHww9quP7REuLt/K5qJAGEC19+rTdkPdzTfXJIaK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5oGCRA9TVsSAnZWagAA4uMQAIBm2ZXD5ylKrWvKYJtJ\nTKGfwjNCGSKjTfp/MTe1qc2B3/cf7lGDy7pIK0gD/wiIflMRQ0s9RRW/nat/\npPkAsKO062+QKd3l9SEru60LnNu/tAUs47PF4c5IQMlUpXO2J2gcAOAIOpOg\nCALs7iMIG2/rK3mKvUwyEVSEAE+CG8Ao3WIYrD8Z3+Q5/QyIK8VtxmeC+ci+\nZgC2Q9XxVdFjch/9MavH/ouiZe9eRFB3/0uJ8T6qIS9YzSSoSSt8HzYaQhwx\n0pZ4ualbFeGhVrzC0g8lDX0+P/hCXYNKJfAycL1HbUwTLSRuZkRSUD6HjiAi\n/WpQqps8+lYKYXqfHz3j7jYmyoKlUNEZMJ1Oo4T0cdyaf7V8j86v89hEuoX8\nnW6MfFMY7p98csryxCJMMJ1i5DKeX+7szaNhbWs0sr/R0Qx4JKVY824YejJ2\nFa9sDS+1Z0FacFXNasmGgea+Q39298l5uWEdiX9HaiME9ACCuqg7JMeeGPCv\nH5I0EVcNNVUJ1aQn73e6OwYRfDkN4/6bVx6qdQW4B7epUgIPk4d562qkrMDV\ntYphptRB/NwQU03p8z5TUok19dEVfpBFJ114hxPzb4HTsVz74qlYurI6UeNJ\n+KUonvSJIhTdQ5D7pyepXj7eX/Qj9WqrROHyTjLuecwqazgul0AWpKXWpJL6\njAVx\r\n=2UVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"4.8.0-alpha.55f783ab"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_2.2.0-alpha.55f783ab_1548458501628_0.3265034992724998","host":"s3://npm-registry-packages"}},"3.1.0-alpha.dee1eb40":{"name":"primer-forms","version":"3.1.0-alpha.dee1eb40","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.dee1eb40","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a1b8a5839e0efd5e22b0c67f8403588f45ab46c3","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.dee1eb40.tgz","fileCount":12,"integrity":"sha512-udcto3qXDvbM6owkBayPCw1u76tzDh4L+czRgVrtic/WFQOCwaYP5+YHIBsWqrdGAb9Bqo8y1WJaFIbjQm5fwg==","signatures":[{"sig":"MEUCIESMsoIxkfC+uDtAgC5cAg4/f27AqsaQPDyCmFKHODQSAiEA/ZQZcmF0lRg26Sz27xdmf3WshwlALRpiPoeDX1oVnds=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS5sQCRA9TVsSAnZWagAApfEP/3cjq1WK3vnIY+Fr4PGV\nHSJK9Jae6inqOlFZj0YANM1QVHenBcF0+NvBNWEBRztXQ4VGtjWOM4tIlOIn\n7rrWThjrrEbmP4e2K2NoTeVsO/dM3VAehod9HyJgiww0vsGIYO+bt0gKN28T\nQyr2OXTyl9LmwbBFaJj6qZGCKMFo2QWWsqgDQ8XoQ9RkIplEXBD+IhcPJDNn\nHyuEKATM08VN+Nr84lc42fKR6ugB54UTGILzUdspv99i/ZJWN3vseh9L+fSK\nQ1P9IDDKngcD0kj8aafXekHup5EC2LPGuKN7AlJgWhKsB/sZmrxVJUOqqHum\n68CLofFU8u4ycw3x0hMnDKPJmwmVd92n97noAjHfD+ll1etou9ux6RDIATa3\nCL8hyJtCgbx75iOlTY8THd51uemTr7oAGN2KwO2ZyjpnKsMOuCgVShQhzaIw\nbOzm5K05FO3yg3Jw2o5qE5ShzmD9jkPp2ayGg3oKdM78TNmIE6JlndRuKGVH\nhxU/+2ueZ5Zqud5xqXxQsQFWzwrZekYW9xfzMoFxAacVFHlEcZlfRo/CDKyQ\nGyRAVdutR1H5OaiPvHad98DOhGYpJMxyovX4G/bpQJ/nOCSl9vQKvIoxlCe3\nf1lwB3nKGmh01ZJsZbbS7ujiipBBtpz0tw2df65opC2qWenYt50zg38FuOO9\n1SQs\r\n=mQiA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.dee1eb40"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.dee1eb40_1548458767752_0.61087691997855","host":"s3://npm-registry-packages"}},"3.1.0-alpha.82c06bb2":{"name":"primer-forms","version":"3.1.0-alpha.82c06bb2","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.82c06bb2","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"15bbe72b2c54bc729ac6f8ecf9d6e1ae88993520","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.82c06bb2.tgz","fileCount":12,"integrity":"sha512-pFNVTk/11jouz3Q34KzAnTFRSD7eq51oowjeSBO7fYa7+yEV2FndtFcTW6zJodJ9AmI0M0Tn4i9gqQfbJaQFFw==","signatures":[{"sig":"MEQCIEOy4R4JN8g93lSqojvjvIgGrzCjwYytFCd12SW5tRJ8AiAZG6yS+zO+RGoRAk7icvRinMh6RrCfJzO4dioDPmLSrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS6BmCRA9TVsSAnZWagAAndEP/RF4/XTmIqqOL8cPkjgI\nVIv1AAmn5GauDVN+1pmIGxDdzHVG1Da5IhNEbgfh8AWgbuBuTkICXFLEeElK\ndDzMUXI8OkoEVO73I3B0coGdsZew+oMKkBn0/V0UOpgJsn3pbzJI0Rq0i5kA\nWpyuf3VDgQN555G0WpgEnzn8d3YWsY/yMDtQTrJwZ+LazP+m+j/hCHXr+svv\nS9pD5TpsXx6rtH6Rsx3smn00/Wx3/YI0v6gSQURBWMFTtSE0YUfCCjsjbnfl\nqI3encv2ygW2QTs2xaUX9UnF3sc9wN9G7Wbo5nSRSzHj1QDu4ehV62oHaB4F\nKDqJfOrMkT9DpfgcdLZ0Jq9otgvhfK0SYkHflrm+6e4TxKZ6xPosF0CR+XkD\nz8BVs4ps9+vYWtaEMx6ak2Y++MtOr2K3iRXqyIJMqdWN+gSYEI/78qQrHIXH\nFfKEoH2A50GhWFhDn7VQwBSq2bkSfbgN8Mgp3r0U6LW1jYBbyylewJT29rnn\nTVuYaUIezptivs+VrYGw4WVV/0FrG3x9/9zCC39HBQ5M2z5VXLSc13iNDNcR\n9TuAIexb9GI3rt93oQL79I01l5q58B+Jwr7I6P6e/GP0Ou38nSGQS1eMQrN6\ntOEAuBsZhJKwXPHGLIYichiscUNI9RVjem6J+c55FWX+79ynbVXe4xLprdl7\nYZbT\r\n=L7b3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.82c06bb2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.82c06bb2_1548460134214_0.18766453313217135","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"primer-forms","version":"3.0.0","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.0.0","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"e6974a53c467ac1fc00ab67eb7ec5270cf82c549","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.0.0.tgz","fileCount":12,"integrity":"sha512-buKBHx1skjLmPgYvpFL5Xr3cbE9lxGkWS/h8lsuwL3ZCx5axHFu8MI+fKL6BY1EInRfbfk56d6Dn4QbC/ctInQ==","signatures":[{"sig":"MEYCIQCfNZczFcEgBPjvDbmY56aXA6WOwo2MTFhZspuEnUP6uwIhAIoVSc9QvpoMefcqYO51N++nUMazI1FwCf/InntOWyQA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh23KECRA9TVsSAnZWagAAkRsP/jKb5A1wFWwwZ+d8YYb2\n284LIQYb+SSpaDOov+m0VKSxL12eUZNGA3DdfmBVMKBTs3+3knD8Yy5ptSzM\nqasE9KftN3xfC2xZ3v967FUygOuUmtEfe2zYCQiFAh3mpYTc5QBwiJl8HC+4\nnhn4ZaM7Sl6Ho37+cyyJZPY9dtsaJA92etVFJP3B00s6c6psxdCx6KH1a93I\ntZzcCTNV/MeTgA7bfLCVDwviMELegIyO5Q1+fVZ2zPMBDbKDJNTk4Krnuptn\nt/hdrH0qSdO5z/wTFwsIvhbc2GrkWWOiIYw3jTmuEEWrDgyQJxdbC6FzeYvo\ndiTRNv31QFHjTv9LoasP9ADCMfpI6F/nw8/tNc6mIHqFd4e98aNjN3BjCZfX\na6S/wpJRVG0E5WD6dHK84Tal4S5BPXvZIP/61Q7ExpUsXVIz6OMV5ByLPSC3\nOJy4/293ifCjKQUjxIk1Ax5NKrz6IsYJ+k9bNxPhrBFM4xs2Ip4bG546r7FE\nzVhIfLp/LcegFSpjCAhCWaAG200gDvssO2rdV/04JBATav1KaANfVtoTWg3P\nkx8f+mcASydjuCZBLFbjVhxO/1tR3kyAi9IYjdNiAF9XjrF2RlCDYJ/ev6P6\nzrdd3wfDxui4E7z2H/+APutesVErX7sbZY1p3jIegDhI9Q3nCPme3EuhjlLo\nHUy0\r\n=TAhv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.0.0_1548460815835_0.8465502274034407","host":"s3://npm-registry-packages"}},"3.1.0-alpha.e45cefe1":{"name":"primer-forms","version":"3.1.0-alpha.e45cefe1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.e45cefe1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a14e99070e8a022fc9493107a3399b7efa62d829","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.e45cefe1.tgz","fileCount":12,"integrity":"sha512-KMBtcRTO1cc1qg0MqAbFZ7TkvGvDO9RdsHl44Hm38blOHrltHJ9s2U0rgqQMvn+OUioxoQ8gSjdIEG8G27ZFXQ==","signatures":[{"sig":"MEQCIDmORY4wgpdSE23Q+3nwNNkhi3r51TLYRHkzT0RtO3yFAiAGpEOQsU7j3dks2WawhMy0miR9m+P7+HlB/tssr3zOkQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcS6QXCRA9TVsSAnZWagAAi9MP/2mzYWVQwyAtvYjQhO35\nJewQ6ALizjqGqfTC694JkW/5BibL34LReVUmNaRo6S8tfT33rtM98e4QzHoO\n4srdER5uYcieRKpqubqKsv1RMfn9sN41i6NGdJYT/HG5XveHiJWRNm87Srhm\nFAhoiErxgOs54BfPSmklNoFEKQII6Jhv+lsSE8PKJZR/gTmLwBKSDsCP6WQX\nTaFt+ZM101EKbMI9tcIQXBIKuDrLZ6RLK6fllvas43HU0ayDbPYTxFTiXc/K\nRmX9doYLIeFxauvTuioPRINcoedkErL1TRCSbyvMK0gdgxNR90d/9v5j3UFq\nAtthivoVWHDRVuKmDSPeEB+ejUAde4OFxI+TlsggiZ4SBWYEoyoc+HnQaQ3y\nIBX6bDlr3P98dAqSQUhNPwjtQhuO0vLxR/+X7j06Sx2PsdyeivZtH9kUnp/l\nMblqKMlRxI/jktCu7xPvbbNRCr8+gH6N9ZW6WHoFUp4rrlAZr/Rg5ukArZ2T\nTXyahgaEk6y4PhzooAL7rE4vuxvL4MR4xEOsfvM86odUdwgjA6NPiJaLDTGI\nyUL65JiRuT7nOeR1ca2XE0w1Kycl7m+Ff0lwJc09lLf8Zpry59QMQahMB8Xz\nSbbl8AYvaPOMqei9Pq2erMYi9IV9imAUfD9EUF9kj1O6AUGHnexVUqcM28qA\npkwD\r\n=GBS8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.e45cefe1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.e45cefe1_1548461078711_0.8042740645671655","host":"s3://npm-registry-packages"}},"3.1.0-alpha.658f95a6":{"name":"primer-forms","version":"3.1.0-alpha.658f95a6","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.658f95a6","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"31c6fecfc7be46f42497001e3b92a97661de79a1","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.658f95a6.tgz","fileCount":12,"integrity":"sha512-57ufISBYmjX6ee9Gv1JGr8rShoJA8VhYiCDc89Y2WFUzlCSt/FHl2nfJxu62mKWWaQb/g/A485Nj+SBTcsMUVg==","signatures":[{"sig":"MEYCIQCXmejuH7Zc5TN964azgd/xftVyVtje7nywEdgPk/ME0AIhAPMK3FTKWX2Prm6OJAMQWBWcMEUaO4WqphoIfocM4Gjp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT2bOCRA9TVsSAnZWagAAOi4P/AvKd1G7e15NJBfBp0Yw\n9zGvO945b9RCsPhrHNweoHXtBVLsAupjBTJtYoTluoatieA2Vc8wnBSPFE6s\npzRsGV354Vjgu4O+tCGepgIg/pktJjQX998zUzdSWYsTC1b/O0nPyiuxVEJI\nLvGi6sQ+x8nJLQ4rNQ4jVLuvqxcq59rH3KHnCBjPckBFmnMJLPM5QRG1pjOP\nsBPVNYN1TDMhoQeL7Z6gEZS+2wiaLrycgjLU3Ia0POLLtGUHKBa3UejBgk2M\nQm/wzPVE8i2AWLmM9UTpZIRLx9q1o+XJuWeMqZuSdjYDRsJvDMYYWH+I0szu\n8vhxO2qCkyRArzStXx3xpeo6GDcZnJ9qE0t5IuddFmCoOy+lKKNkEQgg4fXp\n9Ue5qgxyvz7mVr0Qa97dypWEhxW16UolrZVfrV9+31c44cn+ZzQWGCiJs+DM\nxTi93Ua9GPIm2rjYqRrt9H+tfic9eZ8Wn5fmZgJ1RSPdTP0LM9ul8m2TUR2s\ntK150GwFAlEyevgI+6MiDW5JolWVBS4Nq9zwphyJ3WzGll1H9CIUCwXMK1r6\nr4FE+XgtTKYNIOXlW7XFyTRAE1myJGyWbcFljkwUV0B68hL0rfVB5QHcfazc\n98weVH7fJ726orsHSfjSqxigbSsCHSuKpz/iwFv/tIWxYFzpmqsnSjI0QM+0\nktNd\r\n=Kv/O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.658f95a6"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.658f95a6_1548707533939_0.3286851235358532","host":"s3://npm-registry-packages"}},"3.1.0-alpha.12fdfce5":{"name":"primer-forms","version":"3.1.0-alpha.12fdfce5","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.12fdfce5","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"cfdc1da1cc44fd1e9b91cd9d04a49b742dfdc36e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.12fdfce5.tgz","fileCount":12,"integrity":"sha512-ONyQ7dLKErKksqxj5r3nnnunRokYZgKaFFn3e+uJnjOrXgPLPXsf0rxJyeI+3Dz7MkZNxuYui39whJuEWTqp3Q==","signatures":[{"sig":"MEQCIDsdhD7RMvPFCMFZO7W0e8QWM78/noel/C9UpvQO2Hy5AiA7pOhOIFL4nxHMxj+opIOTCl1BcRur2Deh57R8FvXExw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT6LfCRA9TVsSAnZWagAATcwP/1YnbJuTW5Y7URZo4kGF\nDRtGF9Sb2bptd/nJX631usJUS+/1RAhmUeexqzleVZAXExz3h1KDGsFJw7h5\nNSJ/CeTGcw4yMrdLOj5TDauP2PmIQ1ybom/MBv78BXD22U0dzPxJjHjdMSxW\n101H/r+HsXLxeW7kk6bNWAeltGbtyb+utFE6bLd5JcOkyzU7xD5pzXWqgaM3\nETD9AfMuVgzQ0BZ+BIFOyHiVER03GvqRMdyLm4r/fjqmTZ129UBPGBJbZPaW\nnsHeRghTDDC2nvhycf7/sLq0f9+gLs6T5FsikdWAsyAPtaLuZKtL3+jDvzlu\n8SbSM8SPcizzy9u2ltjx0o5Qb/JuLI8oQARbFmUCOvnXx9Yo+7wWjEViZ/wR\nr55tY/EvE275rfp3U/SOV0MG5NCz6KUUsBWONATJi19VoEvgSShNRePVVR4z\nOHfJAMm7UPCdj2EQP4VMO9sgfJv1XzqLsbQUDgU0w4UFDkkZ7ftkEPXkdcyh\nWGFCvPzNwbgYEoLCQg6We7khWEQhltOnkUiy45J/Zq1QsG88MmYQigXvDMto\nxFR3qVE1Eyty6E6Zjxb/AYIFijwa1D7DfS3JSBLVyZtDd0zTtB4445Gt031M\n1wNScolesRhfp60KQI1/+q/a0ozRON3hJHEMK/+hmWBqTGVyRIJKn1ByfFOT\nuOOx\r\n=YFSI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.12fdfce5"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.12fdfce5_1548722911342_0.5474909386514446","host":"s3://npm-registry-packages"}},"3.1.0-alpha.74cf4cd4":{"name":"primer-forms","version":"3.1.0-alpha.74cf4cd4","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.74cf4cd4","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"a9278122c4c68136bf2760d047cc70192748817e","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.74cf4cd4.tgz","fileCount":12,"integrity":"sha512-uJ3E1Cl/b1fr+es2jjUnYsWgk15IAW7L/5KhmZQe2ZZG1HXTVQK4yKbvuawcGIIdlDqc4dTvsBA6bXWEKM/30w==","signatures":[{"sig":"MEUCIQCrLARBl94/y4yN8gpLMm2wgPTqTa94jQB/IbePF1FrPAIgfyWqdJfOgs2g6TswmPgjgbSYiwcKcSfeTP38DThZLAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcT9vkCRA9TVsSAnZWagAAhxcP/Al/GT4S8ePfnS2xQPCU\nCCiGo1iksy1BzaBIHiIRrcAB0af0TXpHgJz8LEXCAcgC1+6f4TufG6yfrXnn\n8zCcZ5mUpdvofwQQ//HbSDugx74GyHSYLJSuRVIcaEjmyPT8CI6F3a5rOg6B\nmbrdlh8NWOWFBpFJYeiajFDTIngtCLmmfBqi6wNUR5+c7U7S+ewoVspDs4BS\nVInhOD4+TvdAReidtGjbaBZMPAThyWF0hozm4T8n6j4i2i08PvvWYo1KNZSZ\nFlILNMQuwuvE5lIdTzmtBP3SkYPOlqhfMbM0opvran5UU2buoMwwolTZT/Ex\nafvNtY9cyvdXXtOrVqiJZTsF1HQt0f6UZjM7jO7LsJzBr/WueI4qmn0xS1sU\nIhasy3WLfKksss0Bao6v1dYZD2oYNqH26rPCFlfDP+43TVXwRDI3FzwbRc4+\nb/stoxPMNoTCvmKkH1UXHjOU1rR0Jtwgd553BxtgOo5wK0gVnbHK/6+uHY5H\ncW8OF6LUZeb7E1tf3L18TzE421UCG0zSL8j8qQjOB6jzcg8hShSjjtEPfta8\n7ulwot9wWQQWxZVJ5ZVezejGW9qytNRkXlvWEknPV3gA6+ybuIXn1xtdQ4oX\ncW4n30kVONgdIrXplPi2tD5+9C8pMQ/9tWR81o35m2HzvoKvUreyhXC1oCkq\nr+gw\r\n=K+AL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.74cf4cd4"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.74cf4cd4_1548737507864_0.8513237568712999","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0a57e1d1":{"name":"primer-forms","version":"3.1.0-alpha.0a57e1d1","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.0a57e1d1","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"d583d3bd5d9d6b9c6c67deeb01384590e264dd90","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.0a57e1d1.tgz","fileCount":12,"integrity":"sha512-kliNraEw7ZunKbcjB8VLnBe57z/cue/ASnhUhufRGLEsP0TlxaUt/amombUUHWFq3NaWGlZ2AXlvhSUcXnWBXQ==","signatures":[{"sig":"MEUCIQCmoqP3m1qlwg2XGJ0FP7iTpa+WgtNFpwJwDIynl6CzLwIgLJmZhdv1S+ueHa1DCxnzGB54DbTjRSz+fU3Fs/P0EsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUJr+CRA9TVsSAnZWagAAsD4P/0mQx4GbzglcC6OWPljj\nbSZ3KSCHIpoTUQMiyqVsEWtH5csBavldK0UPfMzOj6fhyYfcz48UkjNPOIlT\noU5YPjMOAFQGhFc2qhdzRmXIn4U3wD0LLuKeYespkcEJaNSQDCemw7pETjab\nDMBKQM2YhaY6nRu13RpkgRENgVLAKLjE0aYQLVWWkCa4fVqima+l1Cvt0MC0\nBHff5qII8I61PJGf1a5zOcu4LckBQL+3GztElqfUlf5V5vTrOWcKom3Mh1ia\nE0RfwjWXXzFp8yQjail46H59tLaZ/bd/s41Krriv9Ke2jGnz7nYWWde5HTTY\nWxidmwlaYBsl17yrKZ6ajcVjQ5TFZIyNYIVDVdQ+AmJ91MPyuvtFaG+pDPks\nID2sqdLrcZNiokcV192exDZ2+MYl7g9c/Cb7ieFm82ITyfmcGuRVQYS14KUe\na04x454pnzWODlkWv0UbYBjzqF6siQkktM1pQeC5BxxK+N/xg/iW/zLgie6t\nb+EUfgXwtkKoEGJG/gDUwjVhoFF0gpuACeH7wYeBlfi4HNozNYZqXaJqkfFz\nWzSE9IWU5am9ENmb2OTAr/uRHC4rpGwSuDbDPQaXEl+WD3UZ9La+9FavzYEm\nNv1I47ArKkqX+h4RPWPSl6xvhiFT/P4dBylBDXewX24WSTkt/uAdPb0knb0q\nTg2W\r\n=M2u9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.0a57e1d1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.0a57e1d1_1548786430280_0.4135216279660465","host":"s3://npm-registry-packages"}},"3.1.0-alpha.94655d9d":{"name":"primer-forms","version":"3.1.0-alpha.94655d9d","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.94655d9d","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"c96c0b9d64ec1149694422907659706dc220ce46","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.94655d9d.tgz","fileCount":12,"integrity":"sha512-Ai8NE1ZDHVtALKozq1CoBfCbyRRjOZ5ZkV4mtIjn15JhAle2llXso+GX2IQxLWgvLyll+bgBesUN1yv0E2mACA==","signatures":[{"sig":"MEUCIQCd7RWicHgV0bJRqlmPfryumlg1KU0oAOaAN8kVxr0fSwIgLOVEuw8DPgNq4xinx02197PzcKK40M435V/Lp9ZUYCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUJ68CRA9TVsSAnZWagAAbJwP/1CLkEGBKACmXOfTQIaP\nHFN2Un4xuprezH3jn5iS5chCvaErVYR56Fx1YGrE3Um+4Xlad7mCfQRUBtWJ\nY6YXwy2/1/vxsHbaHJPT/mGLvYPBpmQMIZ90i25rxiHPhgS2gA5RwoamI8qY\nQJD6Afe/aguPk3M5BbcMb/0jV4CJ+2L90RN611S6xmtt2Aa5ljFxMm95VPfd\n+6unMiaKgUHg4ixsWIXTXPizjBPrncFXSyHYCp4417y9POH/Nlj9/GwRVJie\n6u5PnBovOmHtORifI+9tLBpE3rN/npUiSMI/RPnMBdevJVMCP4SWY7mobPwg\njh6QJWaqLq6OTNbup1MlINqQvuupJFCkt3rBy93393TxCkCY/Eld5nhOgUad\naRLUeX9xiiu8ye5VQ+GhsA5ZuykYRjshFWp4b3ZmCKnmqf88/0OsrxfQ3xrX\nyxi4wgUJjl45KVRsJkGznvIEwHR2kS2Huv+2OQCWupOE/RsCRmABszu78GT5\noWdj3TFoNhhY4HsFmZGDtaC5ahlxUA7dBvVC24llddpaComLqF1tDoi6aZR9\nUjxDa3HslLICzCwsaB5+RYvnwZD44w8bfiSCnmtOL9QuVqsbYMp8ENLOqgUm\n/Dsiuih05C/y9rhkrcSen1kvKbucDBVMQzCV0MeIyLSv5R6rnrgrwnyRU61F\nH95r\r\n=Y9mf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.94655d9d"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.94655d9d_1548787387897_0.09273719879742437","host":"s3://npm-registry-packages"}},"3.1.0-alpha.8348e823":{"name":"primer-forms","version":"3.1.0-alpha.8348e823","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.8348e823","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"152403a731969fa12fd36c20f6283cbb9d50e0e7","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.8348e823.tgz","fileCount":12,"integrity":"sha512-5KfVoGZ6dDuMx8XQgUbzCBlIF2ly2oDYulcSok8zP3Ax4vfupixkIhL62Sxi2nUHER0h2Ii3AfkouuVl2SL0VA==","signatures":[{"sig":"MEYCIQDNBasVDeNWH/qg51ac88wM7gNtdzg620sMUzeW/usVFQIhAJKrAUbq6/Hq1vpGnwIkjcAKm7+RxZecwk5sSKs1k12N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUKOBCRA9TVsSAnZWagAAAtoP/jLJN0kS60mmFGJHizQw\noUoTZhYoV5+RthK3yePtE6EwuBdFB24/NA0YgChM6btE8sQWDgsh+UzXL0ga\nP2dlUgtLF9qkvxjsyOrryqveE3RNSdoNCs3oD6TjDD38BUvzq38regviv2OV\n0kHfJCh4nU+u0HTAsg/QS4fuJJyB5MItw4X21jC2ljJeqUeYCDTdvB71RpUq\nR/UFXSXzFRKBIMlOMANBMT96P0QQpoj8sbEsoy325GnY/TxNBFiTBqGeTDuD\nayV9pxttWctQTBO2c6FJMggQtIdWrt/a+dVqAQ9/o5jKsEkXHdEXhayk9y+p\nAjwLvZEMqv/2LzkhnAbksMK8mtwBQbJJRxLRscQCLvpF4pv6ZMz0xIp4K28d\nJGp4Gyh8wseGXD8DWE/tHYdNk+cTO6Pg4s/aqJTmBve/LwgEifmNHUUyb7T8\nyjjK8glaxNgXu5pJeWtNlLoYxru4OpyW20b1XE9pnA5+S4FnCYk0UK33S0t+\nw58HfG3ia5j/Xqe8I/MmlyUiIGdWzxVeUZaUwGWYF/EGIdFDlLIGFp9k0C1h\nwHZN14yRNe+bDfi9v+w4grhjSP3WWwq0UjMMGkiA+/0fRnBiXxvgetnSLBav\nwSSAduSmjk+ZX/h9yAe2o7+kBSRa+RrA/0CivV/IvWmkiCseX8c560V/X1jH\nHrez\r\n=QqQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.8348e823"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.8348e823_1548788608602_0.7485233202814086","host":"s3://npm-registry-packages"}},"3.1.0-alpha.748df56f":{"name":"primer-forms","version":"3.1.0-alpha.748df56f","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.748df56f","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"03e465259bc0cb7733af8e9939e278aaefed05b9","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.748df56f.tgz","fileCount":12,"integrity":"sha512-FoV3g6Kza+YOD56ycPTesNfy4bGwTt9PbRoytK91AUAQ9IXsyWlAI7RpKwdxwTRXG+ixTtebEVMUYeFdyzI2Sw==","signatures":[{"sig":"MEUCIQCiuIuj4RhexHRXmhsAQRf80ZhaKMMNzIlzAtqVGu/zLgIgQN44v+5qhBMVT71TuelaL8lRFMGnZyiyWyei6UA0l3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUNoICRA9TVsSAnZWagAAUHUP/3lWzlPtZS25QY08kmxJ\ndU+KSmWhE/2DBW8VtvuOwQVYpTN/ex6NbFuyfAMeK1ILElbrpvDepR7zeIhH\n+nrO/f2iqOlU2TD3Vn9dlpFksAE2dkZAEDT4dFo6Eqd7KzLTrrB6fsVD8vAQ\nmGAvD3n1xNbVyurJZWm3SHLiTJZaXeoucLB6D4aADaT0mTkWfX/PcKnH/9ab\ngiXH6HrSsyzC3u9+IcvH+ebWIsglCJnRtVIykDLXocAg6qR9/myAx7wlTD4H\nkeEcPzwr9F23DS9tER5xTHtbAUDdLrvpv54sOJdr990RxfL7HBgRjACmsmuj\n9deGzoxg56QVtm+vaU+kWtc7Ww4GPWAEOJRQnier6T4YzLcxYAgE8rs4BjPx\nVK8UqjGzQ8TAgdyArglcG2/7Qnz0OMrOXig77CctiDs6iB+78+MvVshQH0a1\n/jXX+SRmJrNAaKhXXBbb1fy+rtjao1v6yx5DPhtwTs/oWZAHh90+81Zm4/py\nQnYqGkUV7Eh3j0dMuGiEmpumAPY4qQiukG7gAp7UJMj8QsnCAmw+1l8lfdHi\nt2ELfttTW2IAgr46tOpNb7F/B6JwmOerQcovheNgQlkYz2Fz0lP6tLJSXnIM\n2RLAH+iaShKi2UctBVKgN5Vc8VK28eydvWPgfEI+s63KCB+hhyn3EzZAHDtW\nbVqo\r\n=8+FB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.748df56f"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.748df56f_1548802567508_0.5093837672930486","host":"s3://npm-registry-packages"}},"3.1.0-alpha.d5a982e8":{"name":"primer-forms","version":"3.1.0-alpha.d5a982e8","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.d5a982e8","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"685a8cfeb2675d372a3c543114d8acbee0c5963b","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.d5a982e8.tgz","fileCount":12,"integrity":"sha512-O0UW9oHTyEJOQj2GbjIm7GEtPZQRpkK1ECs0w/cT/2Ve0NILpS1XHKucXf4z5S6NHdUSn69+Re7q5+amHLTWYw==","signatures":[{"sig":"MEQCIHwA+9BChQnc/lZ8xvYC/xOytFLkA6L738hcSZh4bdtWAiB+fkem1McNtmIB1WYS3XMbbDMAukZd7wEpvpTFTE4faw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVLLJCRA9TVsSAnZWagAAd90P/1hgR1gQWWTSBmkJ2kSK\nIA6+ffwHJEL6h6C1PmzAiFbec1a5dhZbEf07bWSnBQRA+LeftuUKVB9qzyMa\nFPRxzzWnP8+dwsPuDjPOVs7oQYSLiIjieOHx7bDh9uCwBwNAkivVVIWxSB4V\nTCAjenTgeGb4xsdio+P8VFq2PHX0vSbYVN9tO0vELZWapuZ7GEkoud6wmnyI\n3n49eCNFYOWPiaNwFWH8vPMk23LDnYnf9aNXxzMYbGdYiRSKUWNP7YvevAht\n3WFWzycX9Oa5Vac2Rd98ip3TBf4S2U65wE8f6UZzQwEoTKGfhCnF/0fc/pXk\nTI/J6pjcWVJSVnd/0ZCuw96lF3U1gg4hZyK/U8cDFypGDk8zbA7WqSsbqJO8\ndDg3Kg8sl/KuUqEkl7NHN11Np0gxInYJYX+oMFR4cnhzsZ4Oeza54kJ+bWQH\nBEWsZDL222HyUFmGlPJwrTXRIo62upjt0S9wKGyoX2Pr+iSRHxzw/mkKRJhV\nJWFJgCRlzeSRSSFdz0Jmwf9cv4bwIv+QoL/YsfHD5jHd+qb08AOHejLXRUF7\nyx3+CS5Th9ogi4KrYJY09oDLY6J4nM8rQO/q1Gk8JwFPlC7fuFN/xB2LUsNm\nov5t2ESAUT0UPNFlQqDnfC581xrLGVwvxNKekPrWTY5XvpPzy7gIhMR1hzsR\ndVUC\r\n=YXxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.d5a982e8"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.d5a982e8_1549054664494_0.9641033429948331","host":"s3://npm-registry-packages"}},"3.1.0-alpha.880aa354":{"name":"primer-forms","version":"3.1.0-alpha.880aa354","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.880aa354","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"61a1b9e63b7bad7e6a53dd417bd968149c610e31","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.880aa354.tgz","fileCount":12,"integrity":"sha512-g0lkTSuAdyifwbNQryvDaOmoBc2+FNvZI9RI3g9vtBSGh5ZOG3RYWnWOVKCHt0yfn12lfTGzAwecT6tGS41v1Q==","signatures":[{"sig":"MEQCIEQzs6s2KUu6T+dKHaaJgTK2ICn5UnD8AQwUXr3n8bW3AiAkfT0DG3Kk6PEwV3hKhQxeKWlO98MQIJB08oiyyUwXRw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWKkFCRA9TVsSAnZWagAA/cwP/2KGe/Vp0Z+qa3TI/68X\n9Ntu2errT2nQTC8G6CqnvBGvBUxD588Pryw+DOfGW4W7hO7/rNwXtXsHV8Dl\n3K/z6+7wI9Zh+r/JTI2W8MAXktnWZOzqqgT4Vst8JC5hy1bkF8+JiFUQPfhR\nXxGVjddBS7pCqulxhN1kY0a7n7vUJI4jHcAKehur7QzCUE2zKovcDOKGGqCL\nCwFUBKRcbM+GdDJxG3WnxQCuyd8biqHEDzlK88Cg0oXxt2eHzfT4u79IR6rc\nW1+b8I7pHds3ARxQcF4uBZ8jfaZyW6cGUg3obfHMCJW0pjbZlbM5CUgwdBF+\n7ZKlG9g5YXoLycpZ+MqW0CHgacTXn/fZ/xlH/rLo6a8L+kcGfsfldmafHIDC\njZd4NcYupJmFC2z5ZR3LUO7ejOVJzx70v9n7s6sSHu4bqCj/uRYYQWEJ/5Fs\ngbt8qN9X7SM/qSVRkRSxKuGSxwFtUcofEQBI361zDfCpgQpyuO6Dlh60ckTw\n7E7tKBcyYN9DHOUrFiw8UZjB5Th3RrSyMzCpGX/Z3FjU6vUYgEwwIFuZxhJb\nRhLcxw3moLr6xlPqI4qSvI2VevOz41jXXIL27WI9UK9Vl+VlBmwFoHPZ+vjt\nQ2K3bPHfpydo/SP9/G2oPE6gFKoLzZQyNxz6pYbhLanaJD+ee4DJVIgU6vRu\nAeFg\r\n=+Y/c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.880aa354"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.880aa354_1549314308429_0.46257555691383745","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0e97ea6c":{"name":"primer-forms","version":"3.1.0-alpha.0e97ea6c","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.0e97ea6c","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"96405edbc2608b7bcb49988d58c8cca832748cff","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.0e97ea6c.tgz","fileCount":12,"integrity":"sha512-7Gj+pY6vHhHypkUXeybTb40T6HIwxpjhfG4v33vcWYDPSQiiV609FxsEZrkUBEymr29IW0RFEi6+Tu3HJRyTUA==","signatures":[{"sig":"MEUCIQCfpEajAVFjA0X8WoQH4f4ljpd9cbeTK4Ydkyk5LXptnAIgJ+vZFCTd3mHPGmUizxNH9i1NUgvkuAXZOj4p8zqYD1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZG33CRA9TVsSAnZWagAAqbIP/1JxObrnPYNo2o1YurgA\n2plxy17lcEyyJEucTvVyF+E+fqbyfCVKK93DXhTJD/qsgvHuvpQzbBscmKrq\n6lU9HE12TNgrhlPP6qOUH2IGcOvUBpa/hiT9+sEEgid67maOag+scMqEAiMw\nXTySp6if137Wbg0wTdj6nR3wP6vYfImllG5KJV4Kc4dpIUbBZKUQo5/TWInS\n6MF1axhzkaS2nhgDsN3WiuLMnoJxfdNjAtVPfmDMP1lsJvAuucZP02UzlWq6\n0co5snjWu5BKUdG4hQMJ4yDNRzAzsCzmPe3vI9wwoxJFzDdHu55QhUtpGYgS\n0q3t8/TexQGwb27KmRm6sxrIoJpTbeKVQjp0YezxtBorAiwPwYpK21ajov/n\nxk86GWIlb2nSIV5UpSWLFwyIBriRFqcKeIaq39L/4t4npo/1/Id2k5FOrQnL\n5xsEEubeJvuMon4S5irixKjdABidU12ojDPvCwMH63irUnkf7o7oq8fmH2rV\nmiS7iAbbcnqJsU71ojQYDSB3RZ1iqku6fj82MgD/8zkU1884jK57bId6qyip\nVuJ8Qp7RW/mYl0eSXmhLqUmshfs4/YqdjDKmoDKwlbNGFvLjG1t+/UMhGKr1\nCP6OmhLzwIt8WX37w849s9fTkCb7hX6s0SXQ4PJw0OQbP8PZJaJwE/ms4/w2\nF+XM\r\n=OxSM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.0e97ea6c"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.0e97ea6c_1550085622822_0.08297314795185873","host":"s3://npm-registry-packages"}},"3.1.0-alpha.df004242":{"name":"primer-forms","version":"3.1.0-alpha.df004242","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"author":{"name":"GitHub, Inc."},"license":"MIT","_id":"primer-forms@3.1.0-alpha.df004242","maintainers":[{"name":"broccolini","email":"diana.mounter@gmail.com"},{"name":"dgraham","email":"david.malcom.graham@gmail.com"},{"name":"emilybrick","email":"emily.brick@buzzfeed.com"},{"name":"emplums","email":"eplummer26@gmail.com"},{"name":"jonrohan","email":"yes@jonrohan.codes"},{"name":"josh","email":"josh@joshpeek.com"},{"name":"keithamus","email":"npm@keithcirkel.co.uk"},{"name":"koddsson","email":"koddsson@gmail.com"},{"name":"mdo","email":"markdotto@gmail.com"},{"name":"mislav","email":"mislav.marohnic@gmail.com"},{"name":"mschoening","email":"max@max.wtf"},{"name":"muan","email":"me@muanchiou.com"},{"name":"primer-css","email":"design-systems@github.com"},{"name":"shawnbot","email":"shawnbot-npm@nym.hush.com"}],"homepage":"http://primer.github.io/","bugs":{"url":"https://github.com/primer/primer/issues"},"dist":{"shasum":"ae72bbdb92694cc59d014b822ef4908b5ca327c6","tarball":"https://registry.npmjs.org/primer-forms/-/primer-forms-3.1.0-alpha.df004242.tgz","fileCount":12,"integrity":"sha512-3xyZX4CvIot54/Cejve2ieguEU15Q9MMycVJ8eyGskKrgZVLaV+MHn/BqSkZAcxlQeVfhyjtuxb70QLakcqa3g==","signatures":[{"sig":"MEYCIQCgMwYhh26tvDm0OsqGtvrduQ10lPerkCK2QRIV0qQxbwIhAO8Ae7zVuc16Bv9eey8eVNroNCbLNBAepEbGCfuUGSke","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":87511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZdOrCRA9TVsSAnZWagAApncP/iFiE3TMj/5XqacinNH2\n2gEaLMDBBX1IK6RDqxLa1nfny6vhVEQTFe493GsKGZY0BorXi7S6Eo7dpX95\nYM9FHXe8h1nxQGuwO0cTK8yu3OR9YRlAgRR491CA2AL8F6/4fA4bzSZpmt63\nl8uVwz0CC6mY3JrPTOuEmF6O2khAal8Z9D061i965m3EsMPaT5B6yefX9Hzg\nPopruT5rI/vwKbupwtkGUn7LpDsqSUJ99ToNIRS/qyxRRwf0oP4zW1pKPHFs\nYTv6mx7Oe7/XVe5ZrhEv5GVRP4l49ZKOYAc5ZowIecrG+tlRt6ug7oIpLi97\nitx9AaUdWzg8jRMhTwiAsN3P++TUNEUhbjYhHm+8rfKbPk49snNlYoUND2Jh\nbOJrUVqeXXLivMoZFazXbW6Csj3aAmORwN5eNggocxGN6lMB4FP64Yr5qUv8\nWqIblGKWtAgepyurrrrHg07aL6xAtbj+wCvucirrzj4IhXNmXRH+zJO4f0RR\n1gVAB8M61MoslkkIfTNesVjQ8GZGcM7ilG72HezfhRl/0h1XJeagn7KmEiuc\nFtOUDd64S2BhI9/ZPMP8SgIx24fJ55gYE3+TWLq3WehmdM1DJxbmPfWwEkNW\nQjoEEULrrDQx+iBoZsSHoBstPzCLQgdTJ3BXSOVtb3MAcvTyBvMdwMgVgHXN\nNaeh\r\n=jZqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"build/index.js","sass":"index.scss","style":"build/build.css","primer":{"category":"core","module_type":"components"},"readme":"# Primer Forms\n\n[![npm version](https://img.shields.io/npm/v/primer-forms.svg)](https://www.npmjs.org/package/primer-forms)\n[![Build Status](https://travis-ci.org/primer/primer.svg?branch=master)](https://travis-ci.org/primer/primer)\n\n> Style individual form controls and utilize common layouts.\n\nThis repository is a module of the full [primer][primer] repository.\n\n## Install\n\nThis repository is distributed with [npm][npm]. After [installing npm][install-npm], you can install `primer-forms` with this command.\n\n```\n$ npm install --save primer-forms\n```\n\n## Usage\n\nThe source files included are written in [Sass][sass] (`scss`) You can simply point your sass `include-path` at your `node_modules` directory and import it like this.\n\n```scss\n@import \"primer-forms/index.scss\";\n```\n\nYou can also import specific portions of the module by importing those partials from the `/lib/` folder. _Make sure you import any requirements along with the modules._\n\n## Build\n\nFor a compiled **css** version of this module, a npm script is included that will output a css version to `build/build.css` The built css file is also included in the npm package.\n\n```\n$ npm run build\n```\n\n## Documentation\n\n<!-- %docs\ntitle: Forms\npath: components/forms\nstatus: Stable\n-->\n\nStyle individual form controls and utilize common layouts.\n\n{:toc}\n\nOverview:\n- We reset several elements' default styles for cross browser consistency and easier manipulation later. This includes `<fieldset>`s, WebKit validation bubbles, and most textual `<input>`s.\n- Specific types of textual `<input>`s are styled automatically, but `.form-control` is available should you need it.\n- Always declare a `type` on your `<button>`s.\n- Form layouts rely on form groups.\n\n#### Kitchen sink\n\nAll our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.\n\n```html\n<p>\n  <button class=\"btn\" type=\"button\">Button</button>\n  <button class=\"btn select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Standard input\" aria-label=\"Repository description\">\n  <input class=\"form-control input-monospace\" type=\"text\" placeholder=\"Monospace input\" aria-label=\"SHA\">\n  <select class=\"form-select\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 2\">Option 2</option>\n  </select>\n</p>\n\n<p>\n  <button class=\"btn btn-sm\" type=\"button\">Small button</button>\n  <button class=\"btn btn-sm select-menu-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"true\">\n    Select menu\n  </button>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Repository description\">\n  <select class=\"form-select select-sm\" aria-label=\"Important decision\">\n    <option>Select</option>\n    <option value=\"option 1\">Option 1</option>\n  </select>\n</p>\n```\n\n#### Example form\n\nForm controls in Primer currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.\n\n```html\n<form>\n  <label for=\"name\">Name</label>\n  <input class=\"form-control\" type=\"text\" id=\"name\">\n\n  <label for=\"email\">Email address</label>\n  <input class=\"form-control\" type=\"email\" id=\"email\">\n\n  <label>\n    <input type=\"checkbox\"> Remember me\n  </label>\n\n  <label>\n    <input type=\"radio\" id=\"herp\" name=\"herpderp\" checked> Herp\n  </label>\n  <label>\n    <input type=\"radio\" id=\"derp\" name=\"herpderp\"> Derp\n  </label>\n\n  <button class=\"btn\" type=\"submit\">Submit</button>\n</form>\n```\n\n#### Form contrast\n\nTextual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.\n\n```html\n<form>\n  <input class=\"form-control\" type=\"text\" placeholder=\"Default input\" aria-label=\"Default input\">\n  <input class=\"form-control input-contrast\" type=\"text\" placeholder=\"Input with contrast\" aria-label=\"Input with contrast\">\n</form>\n```\n\n#### Sizing\n\nMake inputs smaller, larger, or full-width with an additional class.\n\n##### Small\n\n```html\n<form>\n  <input class=\"form-control input-sm\" type=\"text\" placeholder=\"Small input\" aria-label=\"Small input\">\n</form>\n```\n\n##### Large\n\n```html\n<form>\n  <input class=\"form-control input-lg\" type=\"text\" placeholder=\"Large input\" aria-label=\"Large input\">\n</form>\n```\n\n##### Block\n\n```html\n<form>\n  <input class=\"form-control input-block\" type=\"text\" placeholder=\"Full-width input\" aria-label=\"Full-width input\">\n</form>\n```\n\n##### Hide webkit's contact info autofill icon\nWebkit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.\n\n```html\n<form>\n  <input class=\"form-control input-hide-webkit-autofill\" placeholder=\"Hide Webkit's contact autofill on this input\" type=\"text\" aria-label=\"Hide Webkit's contact autofill on this input\">\n</form>\n```\n\n#### Selects\n\nPrimer adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.\n\n```html\n<form>\n  <select class=\"form-select\" aria-label=\"Preference\">\n    <option>Choose an option</option>\n    <option>Git</option>\n    <option>Subversion</option>\n    <option>Social Coding</option>\n    <option>Beets</option>\n    <option>Bears</option>\n    <option>Battlestar Galactica</option>\n  </select>\n</form>\n```\n\n##### Small\n\nUse the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).\n\n```html\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n\n<select class=\"form-select select-sm\" aria-label=\"Preference\">\n  <option>Choose an option</option>\n  <option>Git</option>\n  <option>Subversion</option>\n  <option>Social Coding</option>\n  <option>Beets</option>\n  <option>Bears</option>\n  <option>Battlestar Galactica</option>\n</select>\n```\n\n#### Form groups\n\n```html\n<form>\n  <dl class=\"form-group\">\n    <dt><label for=\"example-text\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text\"></dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-select\">Example Select</label></dt>\n    <dd>\n      <select class=\"form-select\" id=\"example-select\">\n        <option>Choose an option</option>\n        <option>Git</option>\n        <option>Subversion</option>\n        <option>Social Coding</option>\n        <option>Beets</option>\n        <option>Bears</option>\n        <option>Battlestar Galactica</option>\n      </select>\n    </dd>\n  </dl>\n\n  <dl class=\"form-group\">\n    <dt><label for=\"example-textarea\">Example Textarea</label></dt>\n    <dd>\n      <textarea class=\"form-control\" id=\"example-textarea\"></textarea>\n    </dd>\n  </dl>\n</form>\n```\n\n#### Form group validation\n\nConvey errors and warnings for form groups. Add the appropriate class—either `.errored` or `.warn`—to the `<dl class=\"form-group\">` to start. Then, house your error messaging in an additional `<dd>` with either `.error` or `.warning`.\n\n```html\n<form>\n  <dl class=\"form-group errored\">\n    <dt><label for=\"example-text-errored\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-errored\" aria-describedby=\"form-error-text\"></dd>\n    <dd class=\"error\" id=\"form-error-text\">This example input has an error.</dd>\n  </dl>\n  <br>\n  <dl class=\"form-group warn\">\n    <dt><label for=\"example-text-warn\">Example Text</label></dt>\n    <dd><input class=\"form-control\" type=\"text\" value=\"Example Value\" id=\"example-text-warn\" aria-describedby=\"form-warning-text\"></dd>\n    <dd class=\"warning\" id=\"form-warning-text\">This example input has a warning.</dd>\n  </dl>\n</form>\n```\n\n#### Checkboxes and radios\n\nUtilities to spice up the alignment and styling of checkbox and radio controls.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\" aria-describedby=\"help-text-for-checkbox\">\n      Available for hire\n    </label>\n    <p class=\"note\" id=\"help-text-for-checkbox\">\n      This will do insanely <strong>awesome</strong> and <strong>amazing</strong> things!\n    </p>\n  </div>\n</form>\n```\n\nYou may also add emphasis to the label:\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"checkbox\" checked=\"checked\">\n      <em class=\"highlight\">Available for hire</em>\n    </label>\n  </div>\n</form>\n```\n\n##### Show / hide content based on a checkbox or radio button state\n\nContent that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live=\"polite\"` attribute on the parent label for added content to be announced when displayed.\n\n```html\n<form>\n  <div class=\"form-checkbox\">\n    <label>\n      <input type=\"radio\" name=\"hireme\">\n      Not available for hire\n    </label>\n  </div>\n  <div class=\"form-checkbox\">\n    <label aria-live=\"polite\">\n      <input type=\"radio\" class=\"form-checkbox-details-trigger\" name=\"hireme\">\n      Available for hire\n      <span class=\"form-checkbox-details text-normal\">\n        <span class=\"d-block mb-1\">Available hours per week</span>\n        <input type=\"text\" name=\"\" class=\"form-control input-contrast\" size=\"3\">\n        <span class=\"text-small text-gray pl-2\">hours per week</span>\n      </span>\n    </label>\n  </div>\n</form>\n```\n\n#### Input group\n\nAttached an input and button to one another.\n\n```erb\n<form>\n  <div class=\"input-group\">\n    <input class=\"form-control\" type=\"text\" placeholder=\"Username\" aria-label=\"Username\">\n    <span class=\"input-group-button\">\n      <button class=\"btn\" type=\"button\" aria-label=\"Copy to clipboard\">\n        <%= octicon \"clippy\" %>\n      </button>\n    </span>\n  </div>\n</form>\n```\n\n#### Form actions\n\nAlign buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.\n\n```html\n<div class=\"form-actions\">\n  <button type=\"submit\" class=\"btn btn-primary\">Save changes</button>\n  <button type=\"button\" class=\"btn\">Cancel</button>\n</div>\n```\n<!-- %enddocs -->\n\n## License\n\n[MIT](./LICENSE) &copy; [GitHub](https://github.com/)\n\n[primer]: https://github.com/primer/primer\n[docs]: http://primer.github.io/\n[npm]: https://www.npmjs.com/\n[install-npm]: https://docs.npmjs.com/getting-started/installing-node\n[sass]: http://sass-lang.com/\n","scripts":{"lint":"../../script/lint-scss","test":"../../script/npm-run-all build lint","build":"../../script/npm-run primer-module-build index.scss","prepare":"npm run build","postpublish":"../../script/notify success","prepublishOnly":"../../script/notify pending"},"_npmUser":{"name":"primer-css","email":"design-systems@github.com"},"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"_npmVersion":"6.4.1","description":"Style individual form controls and utilize common layouts.","directories":{},"_nodeVersion":"8.15.0","dependencies":{"primer-support":"5.1.0-alpha.df004242"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/primer-forms_3.1.0-alpha.df004242_1550177195319_0.6860157351301526","host":"s3://npm-registry-packages"}}},"time":{"created":"2016-05-25T12:37:47.005Z","modified":"2026-08-07T19:05:15.801Z","0.2.0":"2016-05-25T12:37:47.005Z","0.2.1":"2016-05-27T21:07:16.769Z","0.2.2":"2016-06-02T14:18:36.473Z","0.3.0":"2016-07-05T12:49:59.894Z","0.4.0":"2016-07-14T16:35:24.156Z","0.5.0":"2016-08-19T18:25:06.616Z","0.6.0":"2016-11-03T12:58:41.200Z","0.7.0":"2017-01-14T00:56:54.828Z","0.7.1":"2017-01-19T11:53:05.918Z","0.7.2":"2017-01-26T02:32:04.616Z","0.7.3":"2017-02-06T21:08:46.428Z","1.0.3":"2017-03-03T23:30:18.453Z","1.0.4":"2017-03-04T02:39:15.911Z","1.0.5":"2017-03-21T15:02:30.521Z","1.0.6":"2017-03-21T20:53:43.101Z","1.0.7-mono.0":"2017-06-08T19:48:39.010Z","1.0.7-monotest.0":"2017-06-11T16:06:45.405Z","1.0.7-monobeta.0":"2017-06-11T20:10:24.267Z","1.0.7-themyscira.0":"2017-06-12T16:49:43.887Z","1.0.8-0":"2017-06-12T23:13:02.286Z","1.0.8-1":"2017-06-19T23:41:33.491Z","1.0.8":"2017-06-23T21:29:16.180Z","1.0.9":"2017-06-23T21:52:56.376Z","1.0.10":"2017-06-23T23:21:20.748Z","1.0.11":"2017-06-28T23:01:11.900Z","1.0.12":"2017-06-29T19:55:02.108Z","1.0.13-0":"2017-07-09T22:50:15.977Z","1.0.13":"2017-07-10T20:30:17.467Z","1.1.0-alpha.92656aa4":"2017-07-12T20:45:08.521Z","1.1.0-alpha.c1ad9722":"2017-07-12T21:38:49.803Z","1.1.0-alpha.9991349f":"2017-07-12T22:08:26.337Z","1.1.0-alpha.a7f1f710":"2017-07-12T23:34:46.689Z","1.1.0-alpha.0ec98f7c":"2017-07-13T19:28:25.398Z","1.1.0-alpha.9c2cb073":"2017-07-13T20:46:49.632Z","1.1.0-alpha.2da4646b":"2017-07-13T21:03:45.014Z","1.1.0-alpha.d7875d5c":"2017-07-13T21:42:16.582Z","1.1.0-alpha.c5efc988":"2017-07-13T22:02:45.221Z","1.1.0-alpha.164ab439":"2017-07-13T22:23:27.594Z","1.1.0-alpha.aca4e37a":"2017-07-13T22:29:03.184Z","1.1.0-alpha.9d047e94":"2017-07-13T23:22:30.821Z","1.1.0-alpha.35cfeeda":"2017-07-13T23:31:18.154Z","1.1.0-alpha.46d97219":"2017-07-13T23:43:15.779Z","1.1.0-alpha.36799d9b":"2017-07-14T22:20:26.974Z","1.1.0-alpha.656d1ead":"2017-07-14T23:31:38.209Z","1.1.0-alpha.a246e616":"2017-07-18T15:55:20.615Z","1.1.0-alpha.6401d7cf":"2017-07-18T18:10:11.394Z","1.1.0-alpha.7974d22b":"2017-07-18T19:40:39.193Z","1.1.0-alpha.6dae25c2":"2017-07-19T20:54:57.862Z","1.2.0-alpha.47779470":"2017-07-19T21:47:00.365Z","1.0.13-1":"2017-07-20T20:26:29.666Z","1.0.13-2":"2017-07-20T20:32:53.100Z","1.0.13-3":"2017-07-20T20:40:39.879Z","1.0.13-4":"2017-07-20T20:47:49.118Z","1.2.0-alpha.39d50db9":"2017-07-20T22:12:29.488Z","1.2.0-alpha.7c1f4bf1":"2017-07-20T22:26:35.489Z","1.2.0-alpha.a1bd7859":"2017-07-20T22:32:18.158Z","1.2.0-alpha.17c4cf97":"2017-07-20T22:47:04.416Z","1.2.0-alpha.71aa3894":"2017-07-20T23:39:03.603Z","1.2.0-alpha.d0281a6b":"2017-07-20T23:44:03.994Z","1.2.0-alpha.72cfd878":"2017-07-21T00:06:32.899Z","1.2.0-alpha.3d54e445":"2017-07-21T00:17:41.033Z","1.1.0-rc.4":"2017-07-21T00:46:44.588Z","1.1.0-rc.5":"2017-07-21T00:55:15.701Z","1.1.0-rc.6":"2017-07-21T23:01:30.593Z","1.1.0-rc.7":"2017-07-24T19:25:25.560Z","1.1.0":"2017-07-24T19:34:28.883Z","1.2.0-alpha.e97d9417":"2017-07-24T20:59:53.760Z","1.2.0-alpha.376de7cb":"2017-07-24T21:08:05.308Z","1.2.0-alpha.70168740":"2017-07-24T21:26:17.454Z","1.2.0-alpha.410ddacb":"2017-07-24T21:30:00.190Z","1.1.1-rc.8":"2017-07-24T21:55:19.512Z","1.1.1-rc.9":"2017-07-24T22:19:29.846Z","1.1.1-rc.10":"2017-07-24T22:35:54.244Z","1.2.0-alpha.eb8a8768":"2017-07-24T22:56:23.692Z","1.2.0-alpha.dc93c0dc":"2017-07-24T23:02:18.242Z","1.2.0-alpha.18393b95":"2017-07-24T23:07:20.088Z","1.2.0-alpha.dc1c6de7":"2017-07-24T23:20:08.723Z","1.2.0-alpha.e353ed52":"2017-07-25T06:24:25.721Z","1.1.1-rc.11":"2017-07-25T18:31:22.228Z","1.1.1-rc.12":"2017-07-25T20:01:50.996Z","1.2.0-alpha.4f0a1ee6":"2017-07-25T21:21:57.216Z","1.1.1-rc.13":"2017-07-25T21:39:26.835Z","1.1.1":"2017-07-25T22:44:52.255Z","1.2.0-alpha.bcb1bad6":"2017-07-26T22:05:58.796Z","1.2.0-alpha.e9cfc652":"2017-07-26T22:13:57.123Z","1.2.0-alpha.95570ed3":"2017-07-26T22:17:37.341Z","1.2.0-alpha.d6a171d3":"2017-07-26T22:34:36.753Z","1.2.0-alpha.df13c7be":"2017-07-26T23:13:52.049Z","1.2.0-alpha.d66d9e50":"2017-07-27T00:44:08.528Z","1.2.0-alpha.5393754b":"2017-07-27T00:55:26.656Z","1.2.0-alpha.5966046b":"2017-07-27T00:59:00.900Z","1.2.0-alpha.3715510e":"2017-07-27T01:01:12.957Z","1.2.0-alpha.0522c357":"2017-07-27T20:35:09.583Z","1.2.0-alpha.e7831590":"2017-07-27T22:42:52.981Z","1.2.0-alpha.0eb9fa6a":"2017-07-28T21:11:31.036Z","1.1.1-rc.14":"2017-07-31T18:38:38.440Z","1.1.1-rc.15":"2017-07-31T20:56:18.394Z","1.2.0-rc.0":"2017-07-31T21:09:56.896Z","1.2.0-rc.1":"2017-07-31T21:20:15.800Z","1.2.0":"2017-07-31T21:55:12.933Z","1.3.0-alpha.fe5e3a3d":"2017-07-31T21:58:49.259Z","1.2.0-alpha.835d6aca":"2017-08-03T20:31:56.227Z","1.2.0-alpha.1e61e099":"2017-08-03T20:36:23.719Z","1.2.0-alpha.872c7b8c":"2017-08-03T20:38:09.869Z","1.2.0-alpha.a90a48ad":"2017-08-03T22:51:03.629Z","1.2.0-alpha.d4d52eda":"2017-08-03T22:54:53.662Z","1.2.0-alpha.b11ddab3":"2017-08-04T21:44:56.198Z","1.3.0-alpha.6cf70ab8":"2017-08-08T17:04:28.410Z","1.3.0-alpha.cd9a484a":"2017-08-09T19:12:15.891Z","1.3.0-alpha.5125486c":"2017-08-09T20:58:49.986Z","1.3.0-alpha.34671876":"2017-08-09T22:25:30.924Z","1.3.0-alpha.4607fa12":"2017-08-09T22:33:50.388Z","1.3.0-alpha.0dd13c10":"2017-08-09T22:54:02.411Z","1.3.0-alpha.a2faeb3f":"2017-08-10T23:31:09.723Z","1.3.0-alpha.c350fb30":"2017-08-10T23:34:36.780Z","1.3.0-alpha.ed908c17":"2017-08-11T16:15:54.660Z","1.3.0-rc.0":"2017-08-11T20:44:42.065Z","1.3.0-alpha.2c694a6f":"2017-08-11T21:19:59.804Z","1.3.0-alpha.c1ca5b73":"2017-08-11T21:25:36.650Z","1.3.0-alpha.1ea1c542":"2017-08-11T22:27:18.002Z","1.3.0-alpha.63868222":"2017-08-11T22:31:09.007Z","1.3.0-alpha.6767e15b":"2017-08-11T22:42:15.411Z","1.3.0-alpha.bc699360":"2017-08-14T23:43:59.659Z","1.3.0-alpha.86dc9d85":"2017-08-14T23:46:52.213Z","1.3.0-alpha.0794a612":"2017-08-14T23:48:41.587Z","1.3.0-alpha.07ea7d95":"2017-08-14T23:50:32.822Z","1.3.0-alpha.2d0dc0a9":"2017-08-15T17:45:53.881Z","1.3.0-rc.1":"2017-08-15T19:09:33.475Z","1.4.0-alpha.725699da":"2017-08-16T21:51:52.235Z","1.4.0-alpha.49431621":"2017-08-16T21:53:09.508Z","1.3.0-rc.2":"2017-08-16T22:50:56.147Z","1.3.0":"2017-08-16T22:56:31.847Z","1.4.0-alpha.edbbf3c9":"2017-08-16T23:09:08.248Z","1.4.0-alpha.b040c70a":"2017-08-17T17:05:16.318Z","1.4.0-alpha.9e852ee7":"2017-08-17T23:31:53.552Z","1.4.0-alpha.0201c56b":"2017-08-18T18:23:10.195Z","1.4.0-alpha.6a78e694":"2017-08-18T18:25:17.264Z","1.4.0-alpha.1cc69b58":"2017-08-18T18:25:53.244Z","1.4.0-alpha.e857377f":"2017-08-18T22:39:12.328Z","1.4.0-alpha.5e3fb7b7":"2017-08-18T22:45:07.337Z","1.4.0-alpha.71e36148":"2017-08-18T23:47:36.529Z","1.4.0-alpha.cba147d1":"2017-08-21T19:06:07.255Z","1.4.0-alpha.24f38241":"2017-08-21T23:51:27.113Z","1.4.0-alpha.7064500":"2017-08-22T15:16:48.669Z","1.4.0-alpha.7f57fd19":"2017-08-23T22:25:13.010Z","1.3.0-rc.3":"2017-08-24T20:39:12.896Z","1.4.0-alpha.0444a988":"2017-08-29T16:50:18.053Z","1.4.0-alpha.1dd7c0fc":"2017-08-30T23:12:50.599Z","1.4.0-alpha.c3b708a8":"2017-08-30T23:19:17.356Z","1.4.0-alpha.7acfa286":"2017-08-30T23:51:33.962Z","1.4.0-alpha.deecf9fc":"2017-08-30T23:55:32.710Z","1.4.0-alpha.8f695d94":"2017-08-31T16:53:11.910Z","1.4.0-alpha.2e955279":"2017-08-31T16:57:13.900Z","1.4.0-alpha.670dd75f":"2017-08-31T17:03:27.958Z","1.4.0-alpha.3f6fbeb8":"2017-08-31T17:10:15.000Z","1.4.0-alpha.d7669ef0":"2017-09-01T20:20:18.311Z","1.3.0-rc.4":"2017-09-01T21:33:48.468Z","1.4.0-alpha.662e34a7":"2017-09-02T00:09:29.963Z","1.4.0-alpha.58e5748b":"2017-09-02T00:47:27.903Z","1.4.0-alpha.196d0ee8":"2017-09-05T15:59:53.598Z","1.4.0-alpha.db62cc5a":"2017-09-06T19:25:40.072Z","1.4.0-alpha.7e6208ed":"2017-09-06T20:02:08.305Z","1.4.0-alpha.620b6ab4":"2017-09-06T20:44:46.449Z","1.4.0-alpha.10ecf0bd":"2017-09-06T22:38:51.898Z","1.4.0-alpha.2b4fde00":"2017-09-06T23:00:10.181Z","1.4.0-alpha.1eb7bceb":"2017-09-06T23:58:41.315Z","1.4.0-alpha.68cefb21":"2017-09-07T00:04:07.418Z","1.4.0-alpha.68a47d07":"2017-09-07T17:51:51.111Z","1.4.0-alpha.00ff9fdf":"2017-09-07T18:06:19.717Z","1.4.0-alpha.3805ebb6":"2017-09-07T19:03:05.215Z","1.4.0-alpha.495b352f":"2017-09-07T19:21:29.478Z","1.4.0-alpha.a0416d0c":"2017-09-07T19:25:31.520Z","1.4.0-alpha.4e20437f":"2017-09-08T21:05:53.173Z","1.4.0-alpha.6cff0edc":"2017-09-08T22:30:37.926Z","1.4.0-alpha.74e40479":"2017-09-08T22:36:14.327Z","1.4.0-alpha.cef502ae":"2017-09-08T22:59:25.842Z","1.4.0-alpha.1f8eed47":"2017-09-08T23:18:38.773Z","1.4.0-alpha.ff49bb35":"2017-09-08T23:26:24.642Z","1.4.0-alpha.3f685417":"2017-09-08T23:48:45.956Z","1.4.0-alpha.7cc2985b":"2017-09-08T23:58:09.774Z","1.4.0-alpha.c4a2e1f5":"2017-09-09T00:31:30.599Z","1.4.0-alpha.1c0fe35c":"2017-09-09T00:36:40.056Z","1.4.0-alpha.8c9d96b7":"2017-09-11T17:27:22.985Z","1.4.0-alpha.5cf0e083":"2017-09-11T18:58:07.423Z","1.4.0-alpha.a79aaac4":"2017-09-11T22:29:02.065Z","1.4.0-alpha.004083cf":"2017-09-11T23:22:26.370Z","1.4.0-alpha.a92491ae":"2017-09-11T23:59:47.272Z","1.4.0-alpha.6ae842b4":"2017-09-12T18:10:19.904Z","1.4.0-alpha.b94a0894":"2017-09-12T19:14:11.187Z","1.4.0-alpha.91b12b7f":"2017-09-12T20:16:10.376Z","1.4.0-alpha.99e791d1":"2017-09-12T21:12:42.400Z","1.4.0-alpha.1e209b68":"2017-09-12T21:14:04.574Z","1.4.0-alpha.d7ecafb7":"2017-09-12T23:54:07.122Z","1.4.0-alpha.b1b0f36a":"2017-09-13T07:13:03.107Z","1.4.0-alpha.18f330dd":"2017-09-13T08:01:59.188Z","1.4.0-alpha.b5261c5a":"2017-09-13T08:16:48.977Z","1.4.0-alpha.65fc2d56":"2017-09-13T09:52:29.950Z","1.4.0-alpha.c202630b":"2017-09-13T22:32:33.855Z","1.4.0-alpha.b0c397aa":"2017-09-13T22:48:31.997Z","1.4.0-alpha.e92be9a9":"2017-09-14T19:47:00.173Z","1.4.0-alpha.05244e6c":"2017-09-15T21:59:31.424Z","1.4.0-alpha.e4440c27":"2017-09-15T22:04:11.538Z","1.4.0-alpha.98dd1f8b":"2017-09-15T22:04:33.109Z","1.3.0-rc.5":"2017-09-15T23:16:02.836Z","1.3.0-rc.6":"2017-09-16T04:04:18.622Z","1.3.0-rc.7":"2017-09-20T03:37:58.168Z","1.3.1":"2017-09-20T23:51:31.613Z","1.4.0-alpha.65deba26":"2017-09-20T23:56:22.446Z","1.4.0-alpha.82d366f4":"2017-09-21T04:48:43.464Z","1.4.0-alpha.971dd13f":"2017-09-21T16:53:12.221Z","1.4.0-alpha.eb118ad7":"2017-09-21T18:14:44.726Z","1.4.0-alpha.9009c792":"2017-09-21T20:37:37.669Z","1.4.0-alpha.ac917ffe":"2017-09-22T20:16:14.763Z","1.4.0-rc.0":"2017-09-22T21:40:53.222Z","1.4.0-alpha.ff961b66":"2017-09-25T19:45:12.961Z","1.4.0-alpha.624e39eb":"2017-09-25T19:51:50.604Z","1.4.0-alpha.0b69014a":"2017-09-25T20:04:08.818Z","1.4.0-rc.1":"2017-09-25T20:10:56.018Z","1.4.0-alpha.c4adcad2":"2017-09-25T20:10:57.505Z","1.3.2-rc.0":"2017-09-26T16:22:10.646Z","1.4.0-alpha.02d19bc1":"2017-09-26T16:24:47.431Z","1.4.0-rc.2":"2017-09-26T16:30:19.414Z","1.4.0-rc.3":"2017-09-26T16:44:51.923Z","1.3.1-rc.1":"2017-09-26T16:50:08.330Z","1.4.0-rc.4":"2017-09-26T16:55:53.559Z","1.3.1-rc.2":"2017-09-26T16:58:41.379Z","1.4.0-alpha.467f3674":"2017-09-26T17:01:18.614Z","1.4.0-rc.5":"2017-10-02T23:32:36.173Z","1.4.0":"2017-10-04T18:14:00.150Z","1.4.0-alpha.1ced14b8":"2017-10-04T23:05:48.071Z","1.4.0-alpha.a496cb5a":"2017-10-04T23:09:43.375Z","1.4.0-alpha.84ebbc83":"2017-10-04T23:11:28.576Z","1.5.0-alpha.d5a9ae4a":"2017-10-04T23:56:59.680Z","1.5.0-alpha.0dbe01ab":"2017-10-05T00:06:33.309Z","1.4.0-alpha.9a3ed1d6":"2017-10-05T21:28:49.830Z","1.4.0-alpha.cd9db871":"2017-10-05T22:23:56.566Z","1.4.0-alpha.a13e6f94":"2017-10-08T02:29:32.648Z","1.4.0-alpha.acf55e92":"2017-10-09T18:50:33.055Z","1.4.0-alpha.5b3f9c50":"2017-10-09T23:41:10.635Z","1.4.0-alpha.fc0632f6":"2017-10-10T18:57:47.638Z","1.4.0-alpha.96589fef":"2017-10-10T19:06:24.421Z","1.4.0-rc.6":"2017-10-12T00:03:02.044Z","1.4.0-rc.7":"2017-10-12T00:13:48.708Z","1.4.0-alpha.923aac60":"2017-10-16T10:04:49.784Z","1.4.0-rc.8":"2017-10-16T16:52:47.748Z","1.4.0-rc.9":"2017-10-16T21:37:13.373Z","1.4.0-alpha.2196529c":"2017-10-19T16:35:52.904Z","1.4.0-alpha.0c02d6f5":"2017-10-19T17:13:59.324Z","1.4.0-alpha.57ee1db2":"2017-10-19T17:24:44.515Z","1.4.0-alpha.f56e0e8f":"2017-10-19T20:14:35.075Z","1.4.0-alpha.50e3e38c":"2017-10-19T21:56:53.191Z","1.4.0-alpha.855d6dc1":"2017-10-19T22:09:35.391Z","1.4.0-rc.10":"2017-10-23T19:29:36.849Z","1.4.0-rc.11":"2017-10-23T21:06:14.741Z","1.4.0-rc.12":"2017-10-23T21:32:44.633Z","1.4.0-rc.13":"2017-10-24T18:13:44.106Z","1.4.0-rc.14":"2017-10-24T18:48:01.983Z","1.4.0-rc.15":"2017-10-24T19:31:01.355Z","1.4.0-rc.16":"2017-10-24T20:58:21.034Z","1.4.0-rc.17":"2017-10-24T21:02:47.897Z","1.4.0-rc.18":"2017-10-24T21:05:09.193Z","1.4.1":"2017-10-24T22:48:34.590Z","1.5.0-alpha.e386e3b9":"2017-10-27T15:44:23.972Z","1.4.1-rc.0":"2017-10-27T16:31:05.780Z","1.4.1-rc.1":"2017-10-27T17:23:52.615Z","1.4.1-rc.2":"2017-10-27T18:54:35.816Z","1.4.1-rc.3":"2017-10-27T19:34:55.850Z","1.5.0-alpha.2b4f51db":"2017-10-27T19:36:16.771Z","1.5.0-alpha.eee49256":"2017-10-27T19:51:45.793Z","1.5.0-alpha.e777f888":"2017-10-27T19:58:34.913Z","1.5.0-alpha.791988c8":"2017-10-27T20:58:38.614Z","1.5.0-alpha.6b3e1006":"2017-10-27T21:53:30.578Z","1.5.0-alpha.c239278e":"2017-10-31T22:38:52.798Z","1.5.0-alpha.595805c5":"2017-10-31T22:44:47.242Z","1.5.0-alpha.38e3619d":"2017-11-01T04:39:56.249Z","1.5.0-alpha.343456b9":"2017-11-01T13:46:33.727Z","1.5.0-alpha.b1aa5fe9":"2017-11-01T15:17:46.825Z","1.5.0-alpha.cf694cbe":"2017-11-01T22:16:55.290Z","1.5.0-alpha.c5d5f836":"2017-11-01T22:54:48.762Z","1.5.0-alpha.1eed2c74":"2017-11-02T02:22:28.205Z","1.5.0-alpha.dea380f4":"2017-11-02T05:01:42.127Z","1.5.0-alpha.a676c6d2":"2017-11-02T12:16:30.081Z","1.5.0-alpha.f6dde1e1":"2017-11-02T15:57:59.810Z","1.5.0-alpha.4e208a0b":"2017-11-02T16:25:45.806Z","1.5.0-alpha.3c5fa18a":"2017-11-02T16:28:34.459Z","1.5.0-alpha.8277736b":"2017-11-02T17:58:22.426Z","1.5.0-alpha.d313ee6b":"2017-11-02T19:47:51.365Z","1.4.1-rc.4":"2017-11-02T20:50:01.881Z","1.5.0-alpha.4450f943":"2017-11-02T21:41:40.433Z","1.5.0-alpha.503bc620":"2017-11-02T21:48:53.031Z","1.5.0-alpha.3992e3a5":"2017-11-02T21:54:20.181Z","1.5.0-alpha.0287894d":"2017-11-02T22:08:36.043Z","1.5.0-alpha.d63f1cb0":"2017-11-02T22:53:40.389Z","1.5.0-alpha.803eb3c0":"2017-11-02T23:02:39.177Z","1.5.0-alpha.eda81df5":"2017-11-02T23:24:41.593Z","1.5.0-alpha.29cee408":"2017-11-03T00:23:59.928Z","1.5.0-alpha.c046393a":"2017-11-03T06:29:29.164Z","1.5.0-alpha.923280ef":"2017-11-03T15:08:59.658Z","1.5.0-alpha.5823e83d":"2017-11-03T16:39:56.069Z","1.5.0-alpha.fd89e173":"2017-11-03T17:42:34.888Z","1.5.0-alpha.f73ca933":"2017-11-03T18:26:24.918Z","1.5.0-alpha.00b2b0b0":"2017-11-03T19:02:29.231Z","1.5.0-alpha.6b0d41de":"2017-11-03T20:15:07.612Z","1.5.0-alpha.c95221e2":"2017-11-03T20:29:53.791Z","1.5.0-alpha.cedbb1bd":"2017-11-03T20:54:35.298Z","1.5.0-alpha.5610327e":"2017-11-03T20:59:47.060Z","1.5.0-alpha.8fc77c51":"2017-11-04T18:36:41.953Z","1.5.0-alpha.4c38da86":"2017-11-06T15:57:01.830Z","1.5.0-alpha.6e2f2e28":"2017-11-06T17:03:35.675Z","1.5.0-alpha.4d9eeeac":"2017-11-06T18:27:26.844Z","1.4.1-rc.5":"2017-11-06T18:53:17.708Z","1.5.0-alpha.6fcd7e0a":"2017-11-06T20:55:50.625Z","1.5.0-alpha.4d6b10db":"2017-11-06T22:05:23.754Z","1.5.0-alpha.38d51a03":"2017-11-06T23:36:04.334Z","1.5.0-alpha.7888ee92":"2017-11-06T23:36:51.491Z","1.5.0-alpha.3adaac52":"2017-11-06T23:55:50.908Z","1.5.0-alpha.47b50016":"2017-11-07T04:48:59.409Z","1.5.0-alpha.3205d58c":"2017-11-07T06:44:52.980Z","1.5.0-alpha.ac1fba57":"2017-11-07T17:59:03.976Z","1.4.1-rc.6":"2017-11-07T20:49:29.668Z","1.5.0-alpha.a67b0ad2":"2017-11-07T21:45:03.728Z","1.5.0-alpha.a4bc4a43":"2017-11-07T21:59:33.139Z","1.5.0-alpha.f2cb42ae":"2017-11-07T22:00:36.955Z","1.5.0-alpha.19404e55":"2017-11-07T22:00:47.308Z","1.5.0-alpha.511e2245":"2017-11-07T22:13:28.128Z","1.4.1-rc.7":"2017-11-07T22:23:38.216Z","1.4.1-rc.8":"2017-11-07T22:24:56.419Z","1.5.0-alpha.30aafda8":"2017-11-07T22:53:49.143Z","1.4.1-rc.9":"2017-11-07T23:06:36.705Z","1.5.0-alpha.228f8628":"2017-11-08T01:45:33.414Z","1.5.0-alpha.c9a64cbb":"2017-11-08T02:08:22.112Z","1.5.0-alpha.e0a27da9":"2017-11-08T02:54:50.622Z","1.4.1-rc.10":"2017-11-08T03:46:11.655Z","1.5.0-alpha.ca4c2c3a":"2017-11-08T19:40:21.765Z","1.5.0-alpha.24aac17c":"2017-11-08T21:34:32.955Z","1.4.1-rc.11":"2017-11-08T21:45:36.449Z","1.4.1-rc.12":"2017-11-08T21:49:26.635Z","1.4.1-rc.13":"2017-11-08T22:49:40.849Z","1.4.1-rc.14":"2017-11-08T22:55:52.875Z","1.5.0-alpha.9965c961":"2017-11-08T23:05:40.326Z","1.4.1-rc.15":"2017-11-08T23:15:02.595Z","1.4.1-rc.16":"2017-11-08T23:44:49.504Z","1.4.1-rc.17":"2017-11-09T03:35:54.160Z","1.5.0-alpha.a13b5a65":"2017-11-09T16:55:06.432Z","1.5.0-alpha.14223a9a":"2017-11-09T17:54:12.103Z","1.5.0-alpha.6910d580":"2017-11-09T17:59:10.290Z","1.4.1-rc.18":"2017-11-09T21:23:31.351Z","1.4.1-rc.19":"2017-11-10T00:42:29.168Z","1.5.0-alpha.e39405dd":"2017-11-10T00:55:25.392Z","1.5.0-alpha.d2e6cfed":"2017-11-10T03:13:35.325Z","1.4.1-rc.20":"2017-11-10T05:50:10.311Z","1.4.1-rc.21":"2017-11-10T16:53:12.972Z","1.4.1-rc.22":"2017-11-10T17:08:55.003Z","1.4.1-rc.23":"2017-11-10T17:18:22.101Z","1.4.1-rc.24":"2017-11-10T19:38:03.611Z","1.4.1-rc.25":"2017-11-10T22:01:02.399Z","1.4.1-rc.26":"2017-11-13T20:18:33.605Z","1.4.1-rc.27":"2017-11-13T20:36:40.487Z","1.5.0-alpha.fbed85cd":"2017-11-13T20:37:19.095Z","1.4.1-rc.28":"2017-11-13T22:45:29.273Z","1.4.1-rc.29":"2017-11-14T00:18:01.564Z","1.4.1-rc.30":"2017-11-14T00:27:12.123Z","2.0.0-rc.0":"2017-11-14T00:51:14.670Z","2.0.0":"2017-11-14T01:01:41.200Z","2.0.0-rc.1":"2017-11-14T16:27:20.421Z","2.0.0-rc.2":"2017-11-14T17:17:31.649Z","2.1.0-alpha.0076710f":"2017-11-14T22:34:25.056Z","2.1.0-alpha.46a65560":"2017-11-14T23:11:39.574Z","2.1.0-alpha.0bad1ef1":"2017-11-15T17:03:03.897Z","2.1.0-alpha.62bcf358":"2017-11-15T17:53:26.448Z","2.0.0-rc.3":"2017-11-15T18:16:30.672Z","2.1.0-alpha.c618f034":"2017-11-15T18:27:54.063Z","2.0.0-rc.4":"2017-11-15T19:36:18.934Z","2.1.0-alpha.b209ba21":"2017-11-15T20:25:55.483Z","2.0.0-rc.5":"2017-11-15T21:25:33.934Z","2.0.0-rc.6":"2017-11-15T23:37:56.037Z","2.0.1-rc.0":"2017-11-15T23:47:24.527Z","2.0.1-rc.1":"2017-11-15T23:56:12.916Z","2.0.1":"2017-11-16T00:07:50.372Z","2.1.0-alpha.ef159fe7":"2017-12-05T01:12:13.176Z","2.1.0-alpha.da9ed3b0":"2017-12-06T18:19:46.825Z","2.0.1-rc.2":"2017-12-07T20:31:56.111Z","2.1.0-alpha.fb510a5d":"2017-12-07T21:30:44.191Z","2.0.1-rc.3":"2017-12-08T21:03:41.224Z","2.1.0-alpha.ed73f8e2":"2017-12-08T23:14:20.215Z","2.1.0-alpha.6d3383f1":"2017-12-11T15:50:13.457Z","2.0.1-rc.4":"2017-12-11T15:54:07.244Z","2.1.0-alpha.c69cc480":"2017-12-11T16:09:36.336Z","2.0.1-rc.5":"2017-12-11T16:27:33.589Z","2.0.1-rc.6":"2017-12-18T19:29:03.765Z","2.0.1-rc.7":"2017-12-18T19:49:11.527Z","2.0.2-rc.0":"2017-12-18T19:53:47.387Z","2.0.2-rc.1":"2017-12-18T23:44:40.427Z","2.0.2-rc.2":"2017-12-18T23:46:32.622Z","2.0.2":"2017-12-19T22:39:15.293Z","2.1.0-alpha.3efde033":"2018-01-03T23:15:09.162Z","2.0.2-rc.3":"2018-01-05T00:39:49.701Z","2.1.0-alpha.d02187f8":"2018-01-05T15:34:01.812Z","2.0.2-rc.4":"2018-01-05T16:27:22.377Z","2.1.0-alpha.aea4ff80":"2018-01-05T21:54:04.601Z","2.1.0-alpha.a134b9ac":"2018-01-05T23:05:24.373Z","2.1.0-alpha.6ab46488":"2018-01-05T23:10:29.691Z","2.0.2-rc.5":"2018-01-06T17:19:33.341Z","2.1.0-alpha.d2343bbd":"2018-01-09T23:40:02.369Z","2.1.0-alpha.dd122634":"2018-01-10T22:31:59.319Z","2.1.0-alpha.9ecb500d":"2018-01-10T23:52:01.120Z","2.0.2-rc.6":"2018-01-11T23:47:00.606Z","2.1.0-alpha.f64f6abb":"2018-01-11T23:47:48.747Z","2.1.0-alpha.9c5fbfd8":"2018-01-12T16:57:12.877Z","2.1.0-alpha.17592000":"2018-01-12T19:37:19.435Z","2.1.0-alpha.359598ab":"2018-01-12T19:58:02.345Z","2.1.0-alpha.52e89b13":"2018-01-12T20:05:20.640Z","2.1.0-alpha.c4869e9d":"2018-01-12T20:18:19.701Z","2.1.0-alpha.a4c3524c":"2018-01-12T20:27:46.977Z","2.1.0-alpha.7ae35186":"2018-01-12T22:37:57.134Z","2.1.0-alpha.36307d88":"2018-01-12T23:55:21.297Z","2.0.2-rc.7":"2018-01-13T00:06:28.310Z","2.1.0-alpha.b6939e4a":"2018-01-13T00:13:34.608Z","2.0.2-rc.8":"2018-01-13T00:18:15.637Z","2.0.2-rc.9":"2018-01-13T00:26:48.554Z","2.0.2-rc.10":"2018-01-13T00:40:30.962Z","2.0.2-rc.11":"2018-01-17T05:15:32.346Z","2.0.2-rc.12":"2018-01-17T23:23:54.861Z","2.0.2-rc.13":"2018-01-17T23:46:37.745Z","2.1.0-rc.0":"2018-01-18T00:07:34.846Z","2.1.0":"2018-01-18T00:43:23.061Z","2.2.0-alpha.2fffa26e":"2018-01-18T18:36:28.370Z","2.2.0-alpha.66dd47c0":"2018-01-18T19:03:54.872Z","2.2.0-alpha.e0fb693c":"2018-01-18T21:42:14.674Z","2.2.0-alpha.16d78454":"2018-02-07T08:28:32.437Z","2.2.0-alpha.d42378bb":"2018-02-27T00:05:47.779Z","2.2.0-alpha.158ab340":"2018-02-27T16:44:25.940Z","2.2.0-alpha.c62bc878":"2018-03-05T18:39:20.816Z","2.2.0-alpha.1f08d58c":"2018-03-05T19:05:37.021Z","2.2.0-alpha.4633be4e":"2018-03-14T00:41:06.720Z","2.2.0-alpha.fc637600":"2018-03-26T23:23:05.176Z","2.2.0-alpha.64d43fe3":"2018-03-26T23:27:36.141Z","2.2.0-alpha.87149739":"2018-03-27T17:23:53.044Z","2.2.0-alpha.c7d94705":"2018-03-27T17:37:40.029Z","2.2.0-alpha.1b67c66e":"2018-03-27T23:05:46.201Z","2.2.0-alpha.60a6ac26":"2018-04-05T16:57:42.242Z","2.2.0-alpha.de4aefb1":"2018-04-05T17:56:47.026Z","2.2.0-alpha.8c501390":"2018-04-26T21:42:22.109Z","2.2.0-alpha.aa8e26c1":"2018-04-26T21:46:25.812Z","2.2.0-alpha.cef32931":"2018-04-27T23:37:16.698Z","2.2.0-alpha.fefb3404":"2018-04-27T23:53:44.877Z","2.2.0-alpha.06e6261a":"2018-04-30T18:21:27.065Z","2.2.0-alpha.b150d7e6":"2018-04-30T20:53:48.434Z","2.2.0-alpha.244064c1":"2018-04-30T21:32:12.260Z","2.2.0-alpha.ff72c63b":"2018-04-30T21:41:33.411Z","2.2.0-alpha.e605f349":"2018-05-01T17:42:13.981Z","2.2.0-alpha.55ee9907":"2018-05-03T21:38:43.469Z","2.2.0-alpha.20ae7855":"2018-05-03T21:57:56.594Z","2.2.0-alpha.41e8c4d3":"2018-05-03T22:01:28.847Z","2.2.0-alpha.9115c5c9":"2018-05-03T22:18:50.776Z","2.2.0-alpha.942f15f1":"2018-05-03T22:21:49.376Z","2.2.0-alpha.07e8b001":"2018-05-04T21:09:39.169Z","2.2.0-alpha.8881b8fa":"2018-05-04T21:41:35.638Z","2.2.0-alpha.6ce8e0bc":"2018-05-04T22:01:14.251Z","2.2.0-alpha.32b59b4b":"2018-05-07T16:34:20.635Z","2.2.0-alpha.ac4b4352":"2018-05-07T17:53:36.952Z","2.1.0-rc.1":"2018-05-08T21:46:17.772Z","2.1.0-rc.2":"2018-05-08T21:51:43.164Z","2.1.0-rc.3":"2018-05-08T21:56:54.239Z","2.1.0-rc.4":"2018-05-09T04:59:39.972Z","2.2.0-alpha.1e956978":"2018-05-09T19:36:51.904Z","2.2.0-alpha.2f380714":"2018-05-09T21:48:43.462Z","2.2.0-alpha.51cfc597":"2018-05-09T23:25:02.907Z","2.2.0-alpha.7e6aa5c8":"2018-05-09T23:33:37.341Z","2.2.0-alpha.68e2fa59":"2018-05-09T23:39:26.667Z","2.1.0-rc.5":"2018-05-10T04:30:25.615Z","2.2.0-alpha.5f2bfac8":"2018-05-10T17:55:25.533Z","2.2.0-alpha.5c3ca04a":"2018-05-10T22:04:18.247Z","2.1.0-rc.6":"2018-05-10T22:06:39.581Z","2.1.0-rc.7":"2018-05-10T22:15:25.089Z","2.1.1-rc.0":"2018-05-10T22:39:06.311Z","2.1.1":"2018-05-10T23:07:53.830Z","2.2.0-alpha.62c2f82f":"2018-05-11T18:04:28.764Z","2.2.0-alpha.749dd3bc":"2018-05-11T18:52:00.954Z","2.2.0-alpha.8673492":"2018-05-11T18:55:40.178Z","2.2.0-alpha.dde66593":"2018-05-11T19:08:11.110Z","2.2.0-alpha.653de47c":"2018-05-11T19:29:30.325Z","2.2.0-alpha.73ea74e2":"2018-05-14T16:59:00.578Z","2.2.0-alpha.b92c57d1":"2018-05-14T17:02:19.465Z","2.2.0-alpha.814cdd3d":"2018-05-14T17:08:05.570Z","2.2.0-alpha.68e890a4":"2018-05-18T17:01:29.050Z","2.2.0-alpha.b088b8ca":"2018-05-23T21:05:04.696Z","2.2.0-alpha.4e70f02d":"2018-06-01T23:51:16.761Z","2.2.0-alpha.b62d989b":"2018-06-01T23:53:49.450Z","2.1.1-rc.1":"2018-06-13T22:55:17.664Z","2.1.1-rc.2":"2018-06-13T23:05:56.377Z","2.1.2-rc.0":"2018-06-13T23:43:34.917Z","2.1.2-rc.1":"2018-06-14T00:08:21.081Z","2.1.2":"2018-06-14T15:51:16.922Z","2.2.0-alpha.87a2e243":"2018-06-18T21:48:40.157Z","2.2.0-alpha.6d79c2b1":"2018-06-19T22:14:06.006Z","2.2.0-alpha.71a72cda":"2018-06-19T22:34:35.294Z","2.2.0-alpha.e78fdb9a":"2018-06-20T21:50:56.698Z","2.2.0-alpha.3a1e758e":"2018-06-25T22:23:08.706Z","2.2.0-alpha.dc6b5a17":"2018-06-26T03:45:13.605Z","2.1.2-rc.2":"2018-06-26T03:48:15.463Z","2.1.2-rc.3":"2018-06-26T04:03:54.493Z","2.1.2-rc.4":"2018-06-26T04:05:52.573Z","2.2.0-alpha.89893e4a":"2018-06-28T19:35:25.752Z","2.2.0-alpha.3091902b":"2018-06-28T19:46:44.343Z","2.1.2-rc.5":"2018-06-28T19:50:18.792Z","2.1.2-rc.6":"2018-06-28T20:06:44.732Z","2.1.2-rc.7":"2018-06-28T20:38:56.830Z","2.2.0-alpha.a134dbf7":"2018-06-28T23:15:56.910Z","2.2.0-alpha.effa8d7e":"2018-06-28T23:33:57.521Z","2.2.0-alpha.7d60d746":"2018-06-28T23:39:13.625Z","2.1.2-rc.8":"2018-06-29T16:57:19.774Z","2.2.0-alpha.ab698d5e":"2018-06-29T19:21:59.222Z","2.2.0-alpha.90b4f21c":"2018-06-29T19:49:18.153Z","2.1.2-rc.9":"2018-06-29T20:31:18.614Z","2.1.2-rc.10":"2018-06-29T20:56:25.016Z","2.1.3-rc.0":"2018-06-29T20:59:30.311Z","2.1.3":"2018-07-02T18:02:49.382Z","2.2.0-alpha.4901ed89":"2018-07-03T17:26:42.776Z","2.2.0-alpha.0b756ad4":"2018-07-03T17:32:22.818Z","2.2.0-alpha.fe4010eb":"2018-07-03T17:32:57.180Z","2.2.0-alpha.4103b139":"2018-07-03T17:42:54.600Z","2.2.0-alpha.eb7f6898":"2018-07-03T17:56:14.230Z","2.2.0-alpha.d773723d":"2018-07-03T17:57:31.651Z","2.2.0-alpha.dae40155":"2018-07-03T18:14:33.730Z","2.2.0-alpha.c417c2bc":"2018-07-03T18:34:57.694Z","2.1.3-rc.1":"2018-07-03T18:35:21.427Z","2.1.3-rc.2":"2018-07-03T18:51:00.908Z","2.1.4-rc.0":"2018-07-27T19:57:38.843Z","2.1.4-rc.1":"2018-07-27T20:29:25.372Z","2.1.4-rc.2":"2018-07-27T20:32:07.549Z","2.1.4":"2018-07-27T21:45:44.707Z","2.2.0-alpha.dc28805d":"2018-08-02T18:22:16.504Z","2.2.0-alpha.c66331d4":"2018-08-02T18:27:48.321Z","2.2.0-alpha.b19ce449":"2018-08-02T18:35:52.227Z","2.2.0-alpha.86ffde2d":"2018-08-02T22:38:22.493Z","2.2.0-alpha.c1adda16":"2018-08-23T18:36:58.075Z","2.2.0-alpha.602ed262":"2018-08-23T22:42:10.660Z","2.2.0-alpha.2e96422e":"2018-08-23T23:28:57.224Z","2.2.0-alpha.b669eefb":"2018-10-15T20:32:32.748Z","2.2.0-alpha.d9d741bc":"2018-10-15T21:26:56.640Z","2.2.0-alpha.671ec2a2":"2018-10-15T21:28:14.017Z","2.2.0-alpha.a0bd1a08":"2018-10-15T23:22:04.965Z","2.2.0-alpha.472eb506":"2018-10-15T23:48:11.867Z","2.1.4-rc.3":"2018-10-16T06:19:59.778Z","2.2.0-alpha.fdcbf941":"2018-10-16T20:52:03.448Z","2.2.0-alpha.ba09cbcc":"2018-10-17T17:27:37.651Z","2.1.4-rc.4":"2018-10-17T19:19:17.098Z","2.2.0-alpha.a8b75a13":"2018-10-17T19:30:32.616Z","2.2.0-alpha.93e11282":"2018-10-17T19:31:26.961Z","2.2.0-alpha.01812ee2":"2018-10-17T19:37:15.830Z","2.2.0-alpha.76e9bd5d":"2018-10-17T20:03:43.135Z","2.2.0-alpha.56a6d9e8":"2018-10-17T20:09:39.209Z","2.2.0-alpha.d2876be1":"2018-10-17T20:32:30.818Z","2.2.0-alpha.8e9cccb4":"2018-10-17T20:42:23.955Z","2.2.0-alpha.9cac3410":"2018-10-17T20:56:03.314Z","2.2.0-alpha.9b72bf6f":"2018-10-17T20:58:04.578Z","2.2.0-alpha.3c406710":"2018-10-17T21:04:01.406Z","2.2.0-alpha.1938ff24":"2018-10-17T21:10:50.127Z","2.2.0-alpha.53c93082":"2018-10-17T21:22:48.180Z","2.2.0-alpha.0f5bbeba":"2018-10-17T21:31:16.879Z","2.2.0-alpha.c29e3d87":"2018-10-17T21:58:06.208Z","2.2.0-alpha.17f5537f":"2018-10-17T22:11:49.786Z","2.2.0-alpha.b67f7cc4":"2018-10-17T22:21:23.188Z","2.2.0-alpha.09cd6cad":"2018-10-18T17:00:40.188Z","2.1.4-rc.5":"2018-10-18T17:33:04.072Z","2.2.0-alpha.cef53ac4":"2018-10-18T18:31:27.766Z","2.2.0-alpha.b014d245":"2018-10-18T18:41:58.720Z","2.2.0-alpha.49d97c80":"2018-10-18T20:00:53.524Z","2.2.0-alpha.b5459caa":"2018-10-18T20:02:10.715Z","2.2.0-alpha.7c8d0e34":"2018-10-18T21:20:14.957Z","2.1.4-rc.6":"2018-10-18T21:32:22.216Z","2.2.0-alpha.c396b082":"2018-10-18T21:35:02.021Z","2.2.0-alpha.47902cf5":"2018-10-18T21:39:05.470Z","2.1.4-rc.7":"2018-10-18T21:43:44.314Z","2.1.4-rc.8":"2018-10-18T21:50:27.202Z","2.2.0-alpha.e61e3868":"2018-10-18T22:11:42.631Z","2.2.0-alpha.c8f9d606":"2018-10-18T22:24:31.437Z","2.2.0-alpha.8ae934a9":"2018-10-18T23:53:55.706Z","2.2.0-alpha.fc68e650":"2018-10-18T23:59:50.865Z","2.2.0-alpha.3080c2dc":"2018-10-19T04:11:54.222Z","2.2.0-alpha.2f50e954":"2018-10-19T18:18:24.228Z","2.1.4-rc.9":"2018-10-19T21:11:04.270Z","2.1.4-rc.10":"2018-10-22T17:45:11.878Z","2.2.0-alpha.3f5d8a65":"2018-10-22T20:21:35.913Z","2.2.0-alpha.ae5b46b8":"2018-10-22T22:10:31.969Z","2.1.4-rc.11":"2018-10-22T22:15:33.089Z","2.1.5-rc.0":"2018-10-22T23:35:31.340Z","2.2.0-alpha.d1ea413c":"2018-10-23T17:38:57.042Z","2.2.0-alpha.a9f6a8c2":"2018-10-23T18:04:18.618Z","2.1.5":"2018-10-23T20:04:59.051Z","2.2.0-alpha.7dd7d142":"2018-10-23T20:23:24.817Z","2.2.0-alpha.77a05b96":"2018-10-23T21:18:11.967Z","2.2.0-alpha.1871e8e5":"2018-10-23T21:34:17.953Z","2.2.0-alpha.44b1636e":"2018-10-25T15:08:46.369Z","2.2.0-alpha.260b88e3":"2018-10-25T19:43:23.364Z","2.2.0-alpha.d94059f1":"2018-10-25T20:26:37.367Z","2.2.0-alpha.1d86b11a":"2018-10-25T20:43:48.341Z","2.2.0-alpha.6e8eee0b":"2018-10-25T21:04:11.097Z","2.2.0-alpha.f5159d01":"2018-10-25T23:48:28.481Z","2.2.0-alpha.71d3dd4d":"2018-10-26T02:41:40.104Z","2.2.0-alpha.8147bf9e":"2018-10-26T02:51:03.369Z","2.2.0-alpha.ade07006":"2018-10-29T19:47:18.450Z","2.2.0-alpha.6e00d1f1":"2018-11-06T05:15:24.626Z","2.2.0-alpha.a81416ae":"2018-11-06T05:25:43.882Z","2.2.0-alpha.3487d68e":"2018-11-06T06:59:29.244Z","2.2.0-alpha.deb27cb4":"2018-11-06T07:08:58.789Z","2.2.0-alpha.c3a1ee2b":"2018-11-06T07:10:15.886Z","2.2.0-alpha.6ac5deb8":"2018-11-06T08:17:04.492Z","2.2.0-alpha.c12761d7":"2018-11-07T22:26:51.284Z","2.2.0-alpha.4a75e7bd":"2018-11-08T18:46:41.981Z","2.2.0-alpha.d76fd883":"2018-11-08T19:08:13.344Z","2.2.0-alpha.c2903f93":"2018-11-09T00:02:28.858Z","2.2.0-alpha.0fa93277":"2018-11-09T18:08:03.623Z","2.2.0-alpha.92274564":"2018-11-09T21:44:54.309Z","2.2.0-alpha.19834d12":"2018-11-09T22:19:18.324Z","2.2.0-alpha.1c6820e3":"2018-11-13T22:10:37.057Z","2.2.0-alpha.26a2ae18":"2018-11-13T23:28:17.391Z","2.1.5-rc.1":"2018-11-14T00:17:22.003Z","2.1.5-rc.2":"2018-11-15T21:37:36.630Z","2.2.0-alpha.d651913a":"2018-11-15T22:10:12.554Z","2.2.0-alpha.ea8762da":"2018-11-15T22:30:45.977Z","2.1.5-rc.3":"2018-11-15T22:59:19.558Z","2.2.0-alpha.389964ac":"2018-11-15T23:04:29.309Z","2.2.0-alpha.c144285b":"2018-11-15T23:47:59.855Z","2.1.5-rc.4":"2018-11-16T00:13:10.007Z","2.1.5-rc.5":"2018-11-17T05:02:22.610Z","2.1.6-rc.0":"2018-11-19T20:35:10.578Z","2.1.6-rc.1":"2018-11-19T20:47:19.259Z","2.2.0-alpha.e9889e24":"2018-11-19T21:39:43.859Z","2.1.6-rc.2":"2018-11-19T21:56:05.433Z","2.2.0-alpha.314bc862":"2018-11-19T22:11:58.744Z","2.1.6-rc.3":"2018-11-19T22:34:11.212Z","2.2.0-alpha.2afc388c":"2018-11-19T22:42:11.124Z","2.1.6-rc.4":"2018-11-19T22:47:24.535Z","2.1.6":"2018-11-20T00:04:45.749Z","2.2.0-alpha.ab2b4e17":"2018-11-20T18:38:39.256Z","2.2.0-alpha.62009446":"2018-11-20T18:44:49.414Z","2.2.0-alpha.bc9c43da":"2018-11-26T19:48:26.317Z","2.2.0-alpha.589611fb":"2018-11-29T18:22:33.391Z","2.2.0-alpha.640adae6":"2018-11-30T18:43:23.548Z","2.2.0-alpha.9abc2666":"2018-11-30T21:26:24.778Z","2.2.0-alpha.c96e9341":"2018-12-01T00:26:11.151Z","2.2.0-alpha.920cbb94":"2018-12-01T00:34:42.846Z","2.2.0-alpha.10b12bd7":"2018-12-01T00:49:35.621Z","2.2.0-alpha.60374339":"2018-12-01T00:51:44.876Z","2.2.0-alpha.72bcb091":"2018-12-04T20:40:11.223Z","2.2.0-alpha.406e3771":"2018-12-05T06:08:33.515Z","2.2.0-alpha.7b492b62":"2018-12-05T06:51:44.739Z","2.2.0-alpha.076a5833":"2018-12-05T09:36:44.946Z","2.2.0-alpha.87a7c3c7":"2018-12-05T09:53:16.699Z","2.2.0-alpha.2fb541e8":"2018-12-05T10:00:16.802Z","2.2.0-alpha.7ad3aaa6":"2018-12-05T10:01:03.451Z","2.2.0-alpha.335e7a0f":"2018-12-05T19:30:01.220Z","2.2.0-alpha.1d903df8":"2018-12-05T19:42:58.211Z","2.2.0-alpha.5505b4f9":"2018-12-05T20:00:51.102Z","2.2.0-alpha.c9c2ddd0":"2018-12-06T00:40:40.738Z","2.2.0-alpha.3a835d8f":"2018-12-06T18:38:02.765Z","2.2.0-alpha.a4606fae":"2018-12-06T19:00:50.052Z","2.2.0-alpha.1a319bd0":"2018-12-06T19:57:00.635Z","2.2.0-alpha.a59a2bd4":"2018-12-06T22:36:30.971Z","2.2.0-alpha.97a6e91d":"2018-12-07T08:39:51.152Z","2.2.0-alpha.a93e3ebd":"2018-12-07T09:39:44.459Z","2.2.0-alpha.46beb5a1":"2018-12-07T19:37:51.592Z","2.2.0-alpha.c20a7afb":"2018-12-07T22:40:07.080Z","2.2.0-alpha.a369dd35":"2018-12-07T22:42:59.321Z","2.2.0-alpha.d328fa90":"2018-12-07T23:03:45.764Z","2.2.0-alpha.bd244056":"2018-12-07T23:28:40.249Z","2.2.0-alpha.f7b11c63":"2018-12-08T00:17:15.982Z","2.2.0-alpha.714565b4":"2018-12-10T16:17:14.207Z","2.2.0-alpha.456be6d9":"2018-12-11T00:14:27.388Z","2.2.0-alpha.0b0d1941":"2018-12-14T05:48:36.744Z","2.2.0-alpha.7acee306":"2018-12-14T06:32:07.623Z","2.2.0-alpha.8d9b243e":"2018-12-14T06:39:02.218Z","2.2.0-alpha.084f709d":"2018-12-17T23:01:19.247Z","2.2.0-alpha.f5a89e25":"2018-12-17T23:12:28.560Z","2.2.0-alpha.4586004e":"2018-12-17T23:15:54.940Z","2.2.0-alpha.6289c294":"2018-12-17T23:36:05.440Z","2.2.0-alpha.d4f69a27":"2018-12-17T23:41:26.476Z","2.2.0-alpha.2a13841b":"2018-12-18T00:04:52.346Z","2.2.0-alpha.45c8cf83":"2018-12-18T00:11:21.027Z","2.2.0-alpha.8432e534":"2018-12-18T00:19:14.966Z","2.2.0-alpha.7a76b326":"2018-12-19T05:21:39.648Z","2.2.0-alpha.52d5b327":"2018-12-20T19:39:15.047Z","2.2.0-alpha.af57a500":"2018-12-20T22:32:27.695Z","2.2.0-alpha.4dab7fdf":"2018-12-20T22:38:33.674Z","2.2.0-alpha.47ed2750":"2018-12-20T22:50:11.132Z","2.2.0-alpha.82bac610":"2018-12-20T23:04:45.247Z","2.2.0-alpha.15a93353":"2018-12-20T23:14:32.923Z","2.2.0-alpha.50e7198e":"2018-12-21T19:21:04.629Z","2.2.0-alpha.6c54e75d":"2018-12-21T20:23:48.844Z","2.1.6-rc.5":"2018-12-21T22:40:32.461Z","2.1.6-rc.6":"2018-12-21T22:46:21.967Z","2.1.7-rc.0":"2018-12-21T22:59:17.120Z","2.1.7-rc.1":"2018-12-21T23:06:47.617Z","2.2.0-alpha.856f95ca":"2019-01-03T00:34:49.646Z","2.2.0-alpha.2bb3a027":"2019-01-03T05:57:37.471Z","2.2.0-alpha.5862b25f":"2019-01-03T06:15:06.647Z","2.2.0-alpha.ee297c75":"2019-01-03T06:59:25.158Z","2.2.0-alpha.413e9cf2":"2019-01-03T15:26:11.638Z","2.2.0-alpha.1092c5ae":"2019-01-04T18:29:45.386Z","2.2.0-alpha.d2790373":"2019-01-04T18:36:25.470Z","2.2.0-alpha.f83c67be":"2019-01-04T18:53:17.858Z","2.2.0-alpha.e7242c1b":"2019-01-04T19:08:58.450Z","2.2.0-alpha.3e5ab64a":"2019-01-04T19:52:58.326Z","2.2.0-alpha.e7877054":"2019-01-04T20:07:58.318Z","2.2.0-alpha.0b0648ab":"2019-01-04T21:12:43.218Z","2.2.0-alpha.955f170c":"2019-01-04T21:54:10.637Z","2.2.0-alpha.a5c1364f":"2019-01-04T23:14:08.937Z","2.2.0-alpha.d9c365a1":"2019-01-04T23:24:28.768Z","2.2.0-alpha.687ba691":"2019-01-07T19:01:55.280Z","2.2.0-alpha.95307c65":"2019-01-07T21:04:31.071Z","2.2.0-alpha.2a15788f":"2019-01-07T21:17:07.796Z","2.2.0-alpha.7324c66f":"2019-01-07T21:33:13.755Z","2.2.0-alpha.8d56c8e7":"2019-01-07T21:41:48.395Z","2.2.0-alpha.d9b3997c":"2019-01-07T21:46:38.121Z","2.2.0-alpha.da3ba6a1":"2019-01-07T22:39:46.657Z","2.2.0-alpha.426b85a5":"2019-01-07T23:26:18.516Z","2.2.0-alpha.e7c17f27":"2019-01-07T23:42:12.968Z","2.2.0-alpha.eb2780e6":"2019-01-07T23:44:20.401Z","2.1.7":"2019-01-07T23:46:15.716Z","2.2.0-alpha.93f4e152":"2019-01-08T00:09:10.842Z","2.2.0-alpha.82a598b3":"2019-01-08T00:39:05.703Z","2.2.0-alpha.ecdd8bad":"2019-01-08T00:47:44.889Z","2.2.0-alpha.50510ebc":"2019-01-08T06:07:09.282Z","2.2.0-alpha.f18919ba":"2019-01-08T17:43:41.829Z","2.2.0-alpha.c7a3eeeb":"2019-01-08T18:41:04.389Z","2.2.0-alpha.950bf2b7":"2019-01-08T18:55:47.029Z","2.2.0-alpha.7c07cf8e":"2019-01-08T19:10:43.133Z","2.2.0-alpha.076ed277":"2019-01-08T19:22:33.905Z","2.2.0-alpha.a4df514d":"2019-01-08T20:07:59.382Z","2.2.0-alpha.912f1fb8":"2019-01-08T20:08:51.755Z","2.2.0-alpha.97e04ebe":"2019-01-08T20:33:39.206Z","2.2.0-alpha.1ed322f8":"2019-01-08T21:29:18.347Z","2.2.0-alpha.a8d2d06c":"2019-01-08T22:47:42.629Z","2.2.0-alpha.4ee73d2a":"2019-01-08T22:54:08.491Z","2.2.0-alpha.36125bde":"2019-01-08T22:59:39.748Z","2.2.0-alpha.6a37bfd5":"2019-01-09T01:02:08.165Z","2.2.0-alpha.35d6afc4":"2019-01-09T01:19:13.981Z","2.2.0-alpha.88be8a95":"2019-01-09T18:09:04.468Z","2.2.0-alpha.4ab66aaa":"2019-01-09T18:13:00.356Z","2.2.0-alpha.6af250dd":"2019-01-09T19:38:57.176Z","2.2.0-alpha.d16597a4":"2019-01-09T19:46:48.925Z","2.2.0-alpha.100c45e0":"2019-01-09T21:34:38.413Z","2.2.0-alpha.c5a475ff":"2019-01-09T21:57:48.575Z","2.2.0-alpha.d2e6ee2d":"2019-01-09T22:09:12.198Z","2.2.0-alpha.3bd3259f":"2019-01-09T22:18:31.533Z","2.2.0-alpha.9798c944":"2019-01-09T23:55:53.691Z","2.2.0-alpha.6f43d81e":"2019-01-10T00:17:38.005Z","2.2.0-alpha.ef34ab55":"2019-01-10T00:25:16.501Z","2.2.0-alpha.a6cd7ee5":"2019-01-10T08:11:43.639Z","2.2.0-alpha.45cd0ac2":"2019-01-10T08:15:38.619Z","2.2.0-alpha.9db56652":"2019-01-10T22:07:21.628Z","2.2.0-alpha.629938f0":"2019-01-10T22:16:53.200Z","2.2.0-alpha.de967b8b":"2019-01-11T00:01:55.087Z","2.2.0-alpha.197cd065":"2019-01-11T00:24:19.427Z","2.2.0-alpha.4cdb2f3a":"2019-01-11T00:34:19.779Z","2.2.0-alpha.5d2d2289":"2019-01-11T00:34:38.281Z","2.2.0-alpha.1811653a":"2019-01-11T00:42:22.318Z","2.2.0-alpha.ec171b46":"2019-01-11T00:49:43.278Z","2.2.0-alpha.4f621c26":"2019-01-11T18:21:26.235Z","2.2.0-alpha.c71b51f1":"2019-01-11T18:23:02.144Z","2.2.0-alpha.141d2d88":"2019-01-11T18:23:42.777Z","2.2.0-alpha.5eefc7cd":"2019-01-11T19:11:37.434Z","2.2.0-alpha.2d2ba632":"2019-01-11T19:34:08.145Z","2.2.0-alpha.cf5e649c":"2019-01-11T19:43:13.207Z","2.2.0-alpha.c098d806":"2019-01-11T20:04:19.483Z","2.2.0-alpha.8212a1d1":"2019-01-11T22:32:29.570Z","2.2.0-alpha.2d744d75":"2019-01-11T22:33:18.744Z","2.2.0-alpha.7c2e8750":"2019-01-11T22:39:27.583Z","2.2.0-alpha.14293137":"2019-01-11T22:55:33.337Z","2.1.8":"2019-01-11T23:07:32.548Z","2.2.0-alpha.79e1959c":"2019-01-11T23:18:39.768Z","2.2.0-alpha.79aab1d6":"2019-01-14T22:47:27.697Z","2.2.0-alpha.f2b57801":"2019-01-15T19:33:56.616Z","2.2.0-alpha.ca348b59":"2019-01-15T19:42:31.340Z","2.2.0-alpha.a5658d30":"2019-01-15T19:43:16.410Z","2.2.0-alpha.7941d537":"2019-01-15T19:56:04.223Z","2.2.0-alpha.7a0f07a5":"2019-01-15T21:14:55.864Z","2.2.0-alpha.03430b81":"2019-01-15T21:32:40.410Z","2.2.0-alpha.2aa63435":"2019-01-15T21:40:24.188Z","2.2.0-alpha.51dbf9ab":"2019-01-15T21:44:43.474Z","2.2.0-alpha.87aaf87e":"2019-01-15T22:21:42.735Z","2.2.0-alpha.b1478763":"2019-01-16T23:05:46.179Z","2.2.0-alpha.e41bfddd":"2019-01-16T23:20:05.052Z","2.2.0-alpha.d93360bc":"2019-01-17T00:36:32.173Z","2.2.0-alpha.20dd7c15":"2019-01-17T06:48:49.214Z","2.2.0-alpha.5c653f08":"2019-01-17T06:55:54.173Z","2.2.0-alpha.4d5dbc0a":"2019-01-17T19:39:21.881Z","2.2.0-alpha.dace91e8":"2019-01-17T19:52:54.244Z","2.2.0-alpha.d8fa0fbf":"2019-01-17T22:42:15.753Z","2.2.0-alpha.0bc0eeca":"2019-01-17T22:53:00.648Z","2.2.0-alpha.d51305cd":"2019-01-17T23:16:16.441Z","2.2.0-alpha.946e3ad8":"2019-01-18T00:33:45.935Z","2.2.0-alpha.091e3379":"2019-01-18T17:48:06.418Z","2.2.0-alpha.ee6f7715":"2019-01-22T21:13:19.344Z","2.2.0-alpha.20da46e0":"2019-01-22T21:18:11.635Z","2.2.0-alpha.4b1305d3":"2019-01-22T22:33:18.320Z","2.2.0-alpha.a158835b":"2019-01-22T22:42:54.869Z","2.2.0-alpha.031b4784":"2019-01-22T22:45:18.092Z","2.2.0-alpha.a5b2d418":"2019-01-22T22:46:37.264Z","2.2.0-alpha.2507e037":"2019-01-22T22:48:09.209Z","2.2.0-alpha.333ee702":"2019-01-22T22:56:48.483Z","2.2.0-alpha.5b896e00":"2019-01-22T22:58:28.969Z","2.2.0-alpha.ef822821":"2019-01-22T23:09:40.252Z","2.2.0-alpha.fbc5fb3f":"2019-01-22T23:13:20.576Z","2.2.0-alpha.2ccb67f5":"2019-01-22T23:28:50.808Z","2.2.0-alpha.12b798b8":"2019-01-22T23:38:43.651Z","2.2.0-alpha.0e91d9c4":"2019-01-22T23:45:22.709Z","2.2.0-alpha.9d5ddbae":"2019-01-23T00:21:57.784Z","2.2.0-alpha.d8e36290":"2019-01-23T00:23:46.874Z","2.2.0-alpha.8d395281":"2019-01-23T00:25:50.346Z","2.2.0-alpha.7e8b2dae":"2019-01-23T04:59:31.059Z","2.2.0-alpha.113894c2":"2019-01-23T05:07:39.793Z","2.2.0-alpha.12076a07":"2019-01-23T05:46:52.931Z","2.2.0-alpha.33d1cca1":"2019-01-23T19:21:47.548Z","2.2.0-alpha.1a7850cf":"2019-01-23T19:41:04.008Z","2.2.0-alpha.2682bd3a":"2019-01-23T19:41:25.081Z","2.2.0-alpha.96f9fe02":"2019-01-23T21:49:55.790Z","2.2.0-alpha.7f53e5ff":"2019-01-23T22:53:02.333Z","2.2.0-alpha.78cb7baa":"2019-01-23T23:16:42.655Z","2.2.0-alpha.1c57a0a9":"2019-01-23T23:28:46.891Z","2.2.0-alpha.c9e70d2f":"2019-01-23T23:30:21.668Z","2.2.0-alpha.8d7000cb":"2019-01-23T23:40:03.871Z","2.2.0-alpha.127dd98f":"2019-01-24T00:04:25.171Z","2.2.0-alpha.61aab4bc":"2019-01-24T00:05:34.513Z","2.2.0-alpha.68c3e189":"2019-01-24T00:43:26.933Z","2.2.0-alpha.5a78e62d":"2019-01-24T19:02:40.698Z","2.2.0-alpha.80c32bd2":"2019-01-24T19:09:37.009Z","2.2.0-alpha.cb697793":"2019-01-24T19:16:18.429Z","2.2.0-alpha.2be44f23":"2019-01-24T19:33:49.547Z","2.2.0-alpha.28960460":"2019-01-24T22:48:34.072Z","2.2.0-alpha.77423703":"2019-01-24T22:53:30.511Z","2.2.0-alpha.e6d3dacb":"2019-01-24T22:54:19.121Z","2.2.0-alpha.618b7b78":"2019-01-25T01:23:50.097Z","2.2.0-alpha.24b4159c":"2019-01-25T19:56:45.220Z","2.2.0-alpha.645f5f82":"2019-01-25T21:38:20.941Z","2.2.0-alpha.10e3b361":"2019-01-25T21:49:45.507Z","2.2.0-alpha.b78e8ab3":"2019-01-25T22:07:17.208Z","2.2.0-alpha.eba8f309":"2019-01-25T22:17:39.053Z","2.2.0-alpha.a75d1fb5":"2019-01-25T23:07:38.620Z","2.2.0-alpha.78600794":"2019-01-25T23:09:47.953Z","2.2.0-alpha.55f783ab":"2019-01-25T23:21:41.745Z","3.1.0-alpha.dee1eb40":"2019-01-25T23:26:07.965Z","3.1.0-alpha.82c06bb2":"2019-01-25T23:48:54.365Z","3.0.0":"2019-01-26T00:00:15.976Z","3.1.0-alpha.e45cefe1":"2019-01-26T00:04:38.845Z","3.1.0-alpha.658f95a6":"2019-01-28T20:32:14.249Z","3.1.0-alpha.12fdfce5":"2019-01-29T00:48:31.494Z","3.1.0-alpha.74cf4cd4":"2019-01-29T04:51:47.952Z","3.1.0-alpha.0a57e1d1":"2019-01-29T18:27:10.427Z","3.1.0-alpha.94655d9d":"2019-01-29T18:43:08.054Z","3.1.0-alpha.8348e823":"2019-01-29T19:03:28.731Z","3.1.0-alpha.748df56f":"2019-01-29T22:56:07.708Z","3.1.0-alpha.d5a982e8":"2019-02-01T20:57:44.607Z","3.1.0-alpha.880aa354":"2019-02-04T21:05:08.532Z","3.1.0-alpha.0e97ea6c":"2019-02-13T19:20:22.979Z","3.1.0-alpha.df004242":"2019-02-14T20:46:35.440Z"},"bugs":{"url":"https://github.com/primer/primer/issues"},"author":{"name":"GitHub, Inc."},"license":"MIT","homepage":"http://primer.github.io/","keywords":["primer","css","github","design-system","forms","inputs","select menus"],"repository":{"url":"https://github.com/primer/primer/tree/master/modules/primer-forms","type":"git"},"description":"Style individual form controls and utilize common layouts.","maintainers":[{"email":"manuelpuyol@github.com","name":"manuelpuyol"},{"email":"yes@jonrohan.codes","name":"jonrohan"},{"email":"design-systems@github.com","name":"primer-css"},{"email":"lugraciecy@gmail.com","name":"gracepark"},{"email":"jibrang@github.com","name":"jibrangarcia"},{"email":"arelia.jones@gmail.com","name":"arelia"},{"email":"tylerjdev@github.com","name":"tylerthedev"},{"email":"clay@smockle.com","name":"smockle"},{"email":"sim@simurai.com","name":"simurai"},{"email":"katehiga8@gmail.com","name":"khiga8"},{"email":"simon.taranto@gmail.com","name":"srt32"},{"email":"dgreif+githubbotnpm@github.com","name":"githubbot"},{"email":"jonathan.fuchs@gmail.com","name":"jfuchs"},{"email":"andri.j.alexandrou@gmail.com","name":"andrialexandrou"},{"email":"joycezhu@github.com","name":"joycezhu"},{"email":"bteng22@gmail.com","name":"bteng22"},{"email":"dustin.savery@gmail.com","name":"dustin.savery"},{"email":"ncalteen@github.com","name":"ncalteen"},{"email":"alaingoga@gmail.com","name":"alaingoga"},{"email":"andrei.girip99@gmail.com","name":"andreiig"}],"readme":"","readmeFilename":"","users":{"flumpus-dev":true}}